Comprueba si dos colores —el del texto y el del fondo— se distinguen lo suficiente para que cualquier persona pueda leerlos, incluidas las que tienen baja visión o daltonismo. Calcula el ratio de contraste entre ambos y lo compara con los umbrales oficiales de accesibilidad WCAG 2.1. El ratio va de 1:1 (dos colores idénticos, ilegible) a 21:1 (negro puro sobre blanco puro). Todo el cálculo ocurre en tu navegador: nada se sube a ningún servidor.
1. Pulsa el selector de Color de texto y elige el color de la letra.
2. Pulsa el de Color de fondo y elige el fondo sobre el que irá.
3. La vista previa muestra un ejemplo real con esos dos colores, y debajo aparecen el ratio y las cuatro insignias PASS/FAIL.
4. Todo se recalcula al instante mientras mueves los selectores; junto a cada uno se ve el valor #rrggbb elegido.
El ratio de contraste mide cuánta diferencia de luz hay entre los dos colores. Se calcula en dos pasos:
• Luminancia relativa — a cada color se le calcula la luz que percibe el ojo con la fórmula WCAG: se pasa cada canal R, G y B a escala 0-1, se corrige la gamma (linealización) y se combinan ponderados 0.2126·R + 0.7152·G + 0.0722·B (el verde pesa más porque el ojo lo ve más brillante). El resultado va de 0 (negro) a 1 (blanco).
• Ratio — con la luminancia del color más claro (L1) y la del más oscuro (L2) se aplica (L1 + 0.05) / (L2 + 0.05). El +0.05 evita divisiones extremas. Es simétrico: da igual cuál sea el texto y cuál el fondo, el ratio es el mismo.
Cada combinación se evalúa contra cuatro umbrales oficiales. AA es el mínimo legal y recomendado; AAA es el nivel reforzado (lectura prolongada o audiencia con baja visión):
• AA — texto normal: ratio ≥ 4.5:1.
• AA — texto grande: ratio ≥ 3:1.
• AAA — texto normal: ratio ≥ 7:1.
• AAA — texto grande: ratio ≥ 4.5:1.
El texto grande exige menos porque sus trazos son más gruesos y se leen mejor. Apunta como mínimo a AA; si puedes, a AAA.
Los umbrales de arriba son para texto. Los elementos no textuales tienen su propia regla WCAG (criterio 1.4.11): bordes de campos, iconos, controles de formulario y las partes significativas de un gráfico necesitan un contraste de al menos 3:1 frente a lo que tienen al lado. Esta herramienta muestra las cuatro insignias de texto; para un icono o un borde, fíjate en que el ratio llegue a 3:1 aunque la insignia de «AA normal» falle.
Se considera texto grande —y se le aplican los umbrales más suaves— el de 18pt o más (aproximadamente 24px), o el de 14pt o más (aproximadamente 18.67px) cuando está en negrita. Por debajo de esos tamaños cuenta como texto normal y debe cumplir el umbral más exigente. La vista previa incluye una línea de cada tamaño para que compares.
Debajo del ratio hay cuatro filas, una por criterio, con una insignia:
• PASS (verde, con un tic) — esa combinación cumple ese nivel.
• FAIL (rojo, con una cruz) — no lo cumple; hay que aumentar el contraste.
Como los umbrales son crecientes, si pasa AAA normal (7:1) pasa también todos los demás. Un texto que solo pasa «AA grande» (3:1) no es válido para texto normal.
Si una combinación falla:
• Oscurece el texto o aclara el fondo (o al revés): cuanto mayor sea la diferencia de luminancia, mayor el ratio.
• No te fíes solo del tono — dos colores vivos (rojo sobre verde) pueden tener un contraste bajísimo pese a «chocar». Lo que cuenta es la luz, no el color.
• El gris medio es traicionero: texto gris claro sobre blanco suele fallar; bájalo hacia negro.
• No uses solo el color para transmitir información (enlaces, errores): acompáñalo de subrayado, icono o texto.
• Ajusta los selectores hasta que la insignia que te interese pase a PASS.
Texto grande = 18pt+ (24px) o 14pt+ (18.67px) negrita