Verificador de Contraste
Verifica la relación de contraste WCAG entre un color de texto y un color de fondo, con resultados de aprobado/reprobado para AA y AAA, tanto en texto normal como grande.
Opciones
Normal text looks like this.
Large text
Resultados
- Contrast ratio
- 17.08:1
Cómo verificar el contraste de color
Verifica la relación de contraste WCAG entre un color de texto y un color de fondo, y comprueba si aprueba AA y AAA tanto en texto normal como grande.
Qué significa la relación
La relación de contraste va de 1:1 (colores idénticos) a 21:1 (negro sobre blanco), calculada a partir de la luminancia relativa de cada color usando la fórmula definida en la especificación WCAG 2.x.
Umbrales AA y AAA
- AA, texto normal: al menos 4.5:1.
- AA, texto grande: al menos 3:1.
- AAA, texto normal: al menos 7:1.
- AAA, texto grande: al menos 4.5:1.
- Texto grande significa 18pt (24px) de peso regular, o 14pt (aproximadamente 18.7px) en negrita, según la definición de WCAG.
Leer la vista previa
El cuadro de muestra presenta ambos tamaños de texto renderizados con tus dos colores, lo cual es una forma más rápida de juzgar la legibilidad que solo el número de la relación.
Cómo usarlo
- Elige o escribe un color de primer plano (texto) y un color de fondo.
- Lee la relación de contraste y los cuatro resultados de aprobado/reprobado.
- Usa el botón de intercambio para verificar el par en la otra dirección.
Notas sobre el contraste
La relación usa el cálculo de luminancia relativa de WCAG 2.x para colores sRGB. La transparencia debe probarse contra el color de fondo final ya compuesto.
Preguntas frecuentes
¿A qué nivel debería apuntar?
AA es la base ampliamente exigida para la accesibilidad web, incluso bajo la mayoría de los requisitos legales de accesibilidad. AAA es más estricto y se recomienda cuando puedas lograrlo, especialmente para el texto del cuerpo.
¿Esto verifica algo más aparte del contraste?
No. El contraste de color es una parte de la accesibilidad del texto; el tamaño de fuente, el peso y el espaciado también afectan la legibilidad, pero no se evalúan aquí.
¿Por qué hay umbrales separados para texto grande?
WCAG permite una relación más baja para texto grande porque los trazos más grandes y gruesos se mantienen legibles con menor contraste que el texto pequeño del cuerpo.
¿El alfa o la transparencia afectan la relación?
El cálculo de contraste de WCAG se basa en los colores finales visibles. Si tu interfaz usa transparencia, primero muestrea o calcula el color compuesto sobre su fondo real, y luego prueba ese par.