Comprobador de Contraste: Calculadora de Relación de Contraste WCAG

Calcula la relación de contraste WCAG entre dos colores con el Comprobador de Contraste. Obtén resultados en tiempo real y califica el contraste de tus colores.

Colors

Foreground (Text)

Background

Preview & Results

Sample Text

The quick brown fox jumps over the lazy dog.

21.00

Contrast Ratio

AAA

WCAG Grade

AA (normal text, 4.5:1)

AA Large (3:1)

AAA (7:1)

Comprobador de Contraste: Calculadora de Relación de Contraste WCAG

Resumen rápido: El Verificador de Contraste es una herramienta web que calcula la relación de contraste WCAG entre dos colores, proporcionando resultados en tiempo real y calificando el contraste de sus colores.

Qué Hace Esta Herramienta y Características Clave

El Verificador de Contraste es una herramienta web que te ayuda a calcular la relación de contraste WCAG entre dos colores. Proporciona resultados en tiempo real y califica el contraste de tus colores según los estándares WCAG (AA, AA Grande, AAA).

Guía Paso a Paso de Cómo Usar

Abre la herramienta Verificador de Contraste.
Elige el color de primer plano (texto) haciendo clic en el selector de color o escribiendo el código hexadecimal en el campo de texto.
Elige el color de fondo haciendo clic en el selector de color o escribiendo el código hexadecimal en el campo de texto.
Ve la relación de contraste y la calificación que se muestran en tiempo real.

UndeFórmula / Lógica Técnica El ratio de contraste se calcula usando la siguiente fórmula:

Ratio de Contraste = (L1 + 0.05) / (L2 + 0.05)

Donde L1 y L2 son los valores de luminancia relativa de los colores de primer plano y de fondo, respectivamente. Ejemplos Prácticos en el Mundo Real

Ejemplo 1: Primer plano: #000000 (negro), Fondo: #ffffff (blanco) Ratio de Contraste: 21.00, Calificación: AAA
Ejemplo 2: Primer plano: #ffffff (blanco), Fondo: #000000 (negro) Ratio de Contraste: 21.00, Calificación: AAA
Ejemplo 3: Primer plano: #808080 (gris), Fondo: #ffffff (blanco) Ratio de Contraste: 4.50, Calificación: AA

Comparación o Matriz de Decisión / Lista de Verificación

Ratio de Contraste	Calificación WCAG
≥ 7.00	AAA
≥ 4.50	AA
≥ 3.00	AA Grande

Errores Comunes y Cómo Evitarlos

Error: Usar colores con bajos ratios de contraste. Cómo Evitarlo: Siempre comprueba el ratio de contraste y la calificación antes de usar colores en tus diseños.
Error: Ignorar las directrices WCAG para el contraste de color. Cómo Evitarlo: Utiliza Contrast Checker para asegurarte de que tus diseños cumplen con los estándares WCAG de accesibilidad.

Preguntas Frecuentes

¿Cómo calcula Contrast Checker el ratio de contraste?

Contrast Checker calcula el ratio de contraste utilizando la fórmula (L1 + 0.05) / (L2 + 0.05), donde L1 y L2 son los valores de luminancia relativa de los colores de primer plano y de fondo.

¿Cuál es la diferencia entre las calificaciones AA, AA Large y AAA?

La calificación AA requiere un ratio de contraste de ≥ 4.50, AA Large requiere una relación de contraste de ≥ 3,00, y el grado AAA requiere una relación de contraste de ≥ 7,00.

¿Cómo puedo usar Contrast Checker para mejorar la accesibilidad de mi sitio web?

Utilice Contrast Checker para calcular la relación de contraste entre los colores de su texto y fondo, y asegúrese de que cumpla con los estándares WCAG (AA, AA Grande, AAA). Esto ayudará a mejorar la accesibilidad de su sitio web para usuarios con deficiencias visuales.