Qué hace esta herramienta
El verificador calcula el ratio de contraste WCAG entre un color de texto y un color de fondo, y luego califica la pareja según los cuatro umbrales de WCAG 2.x: niveles AA y AAA, cada uno para texto normal y grande. Una vista previa en vivo muestra tus colores como texto real en ambos tamaños.
La fórmula de luminancia
Primero se calcula la luminancia relativa de cada color: cada canal RGB se linealiza (los valores de 0,03928 o menos se dividen entre 12,92; los mayores usan ((v + 0,055) / 1,055) ^ 2,4) y luego se combinan como L = 0,2126 x R + 0,7152 x G + 0,0722 x B. Los coeficientes reflejan que el ojo humano es más sensible a la luz verde.
El ratio de contraste es (L1 + 0,05) / (L2 + 0,05), donde L1 es la luminancia del color más claro. Va de 1:1 (colores idénticos) a 21:1 (negro sobre blanco).
Ejemplo práctico
Un texto blanco #FFFFFF sobre fondo azul #3B82F6 da un ratio de unos 3,7:1. Eso aprueba AA para texto grande (pide 3:1) pero suspende AA para texto normal (pide 4,5:1): bien para un titular, no para el cuerpo del texto.
Los cuatro umbrales
- AA texto normal: 4,5:1, la referencia legal que exigen muchas normativas.
- AA texto grande: 3:1. Grande significa al menos 18pt, o 14pt en negrita.
- AAA texto normal: 7:1, el nivel más estricto.
- AAA texto grande: 4,5:1.
Limitaciones
El ratio solo mide el contraste de luminancia. No tiene en cuenta el renderizado de fuentes, los trazos finos, la transparencia sobre imágenes ni las diferencias de visión del color más allá de la luminancia.