Verificador de Matriz de Contraste de Color

¿Por qué revisar todas las combinaciones de color a la vez, en lugar de una por una?

Las directrices de accesibilidad WCAG exigen un ratio de contraste mínimo entre el texto y el fondo; de lo contrario, los usuarios con baja visión o daltonismo pueden no poder leer el texto. En la práctica, la mayoría de los sitios combinan varios colores de marca, colores de fondo y colores de estado —un título en el color principal sobre una tarjeta gris claro, un color de advertencia sobre blanco, texto oscuro sobre un fondo teñido— y revisar cada combinación manualmente es fácil que lleve a errores u omisiones. Esta herramienta te permite pegar todos los colores que realmente usas y calcula al instante el ratio de contraste para cada par posible, presentado en una sola matriz —ya no es necesario revisar las combinaciones una por una.

Cómo se calcula el ratio — un ejemplo concreto

WCAG 2.1 define el ratio de contraste como (L1 + 0,05) / (L2 + 0,05), donde L1 y L2 son la luminancia relativa de los dos colores (un valor mayor significa más cercano al blanco). El negro puro #000000 frente al blanco puro #FFFFFF obtiene un 21:1 perfecto, pero el gris claro #999999 frente al blanco solo obtiene 2,85:1 —muy por debajo del mínimo de 4,5:1 requerido para texto normal. El texto normal (menos de 18px, o menos de 14px en negrita) necesita AA ≥ 4,5:1, o AAA ≥ 7:1 para un estándar más estricto; el texto grande (18px+ en negrita o 24px+) tiene un umbral más flexible de AA ≥ 3:1.

Cómo leer la matriz de resultados

Cada celda de la matriz muestra el ratio de contraste entre el color de esa fila y el de esa columna, codificado por color: verde (aprueba AAA), amarillo (aprueba solo AA) o rojo (no aprueba) —así puedes detectar combinaciones problemáticas de un vistazo en lugar de calcular cada una a mano.

El contraste se calcula únicamente a partir del valor RGB de cada color —no tiene en cuenta el grosor de la fuente, el suavizado (anti-aliasing) ni las superposiciones semitransparentes en el renderizado real. Verifica siempre en un dispositivo real antes de publicar.