Verificador de contraste
Elige un color de texto y un color de fondo y mira el ratio de contraste WCAG exacto, además de si pasa AA o AAA.
Vista previa de texto grande (18pt+)
Vista previa de texto normal, el tamaño que usa la mayoría del cuerpo de texto.
Qué significan las insignias
WCAG 2.1 exige un ratio de 4.5:1 para texto normal y 3:1 para texto grande (18pt+, o negrita de 14pt+) para cumplir AA. AAA es más estricto: 7:1 para texto normal, 4.5:1 para texto grande.
Cómo funciona
El ratio se calcula con la fórmula real de luminancia relativa de WCAG, no una aproximación. Cada canal se divide entre 255 y se lineariza para deshacer la curva gamma sRGB, y los canales lineales se ponderan 0.2126 rojo, 0.7152 verde y 0.0722 azul, reflejando cuánto contribuye cada uno al brillo percibido. El ratio de contraste es (más claro + 0.05) / (más oscuro + 0.05), entre 1:1 para colores idénticos y 21:1 para negro puro sobre blanco puro.
«Texto grande» tiene una definición precisa que casi nadie cita: 18pt (unos 24px) normal, o 14pt (unos 18.7px) en negrita. La fórmula es simétrica: intercambiar el primer plano y el fondo nunca cambia el ratio, así que el botón de intercambio es solo para previsualizar. Una limitación honesta: el ratio solo mide diferencia de luminancia. Un rojo sobre verde puede superar 4.5:1 en el papel y seguir siendo difícil de leer para alguien con deficiencia de visión de color.
Ambos colores pasan por esas fórmulas aquí mismo, en el JavaScript de la página, con cada cambio. No se transmite ningún valor de color a ningún sitio, algo que puedes verificar en la pestaña Red mientras mueves los selectores.
Preguntas frecuentes
¿Cuál es la diferencia entre AA y AAA?
AA es el nivel base al que apuntan la mayoría de los sitios: 4.5:1 para texto normal, 3:1 para texto grande (18pt o más, o negrita de 14pt o más). AAA es más estricto, pensado para contenido dirigido a usuarios con baja visión: 7:1 normal, 4.5:1 grande.
¿Esto comprueba imágenes o solo colores planos?
Solo dos colores sólidos, texto sobre un fondo. Para texto sobre una foto o un degradado, comprueba el contraste contra las zonas más oscuras y más claras sobre las que podría colocarse.
¿Es la misma fórmula que usan los navegadores y las auditorías?
Sí. Es la fórmula estándar de luminancia relativa y ratio de contraste de WCAG 2.1, la misma que usan Lighthouse y axe.