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 las cuatro primeras insignias 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. Esa es la quinta insignia, Componentes de interfaz y gráficos.
Cuando una combinación no llega a AA (o, si ya la pasa, a AAA), se proponen colores de texto del mismo tono que sí llegan: uno más oscuro y otro más claro si existe, cambiando lo mínimo. Se mueve solo la luminosidad OKLCH, que es la claridad que percibe el ojo, así que el color se parece de verdad al tuyo. Pulsa Usar para probarlo.
Lo que exigen hoy las leyes y las normas de accesibilidad es WCAG 2.x, que es lo que mide esta herramienta. WCAG 3 sigue siendo un borrador del W3C (el último, de septiembre de 2026) y su texto dice que el algoritmo de contraste está todavía por decidir. APCA, que muchas webs presentan como «el contraste de WCAG 3», salió de ese borrador en 2023: es una propuesta interesante, pero no es la norma. Si lo usas, cumple también WCAG 2.
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