Verifica el contraste de color según los estándares WCAG 2.1 AA y AAA
Texto de ejemplo grande (24px)
Texto de cuerpo normal — tamaño 14px — para evaluar legibilidad
También podrías necesitar
El contraste de color es fundamental para la accesibilidad web: determina si las personas con baja visión o daltonismo pueden leer el contenido. Las WCAG (Web Content Accessibility Guidelines) 2.1 definen tres niveles: Fail (ratio < 3:1 — texto ilegible para muchos usuarios), AA Large (3:1 — mínimo para texto grande o iconos), AA (4.5:1 — mínimo para texto normal, requerido por la mayoría de regulaciones), y AAA (7:1 — máximo contraste, ideal para texto crítico). El ratio de contraste se calcula según la fórmula de luminancia relativa del W3C: (L1 + 0.05) / (L2 + 0.05), donde L1 y L2 son las luminancias relativas de los dos colores. Esta herramienta calcula el ratio al instante con vista previa del texto sobre el fondo para que puedas evaluar visualmente el resultado antes de aplicarlo.
¿Qué ratio de contraste necesito para cumplir WCAG AA?
Para cumplir el nivel AA (el estándar más común, requerido por la mayoría de regulaciones de accesibilidad): texto normal (< 18pt o < 14pt bold) necesita ratio ≥ 4.5:1; texto grande (≥ 18pt o ≥ 14pt bold) necesita ratio ≥ 3:1. El nivel AAA exige 7:1 para texto normal y 4.5:1 para texto grande.
¿Cómo se calcula el ratio de contraste?
El W3C define el ratio como (L1 + 0.05) / (L2 + 0.05), donde L1 es la luminancia relativa del color más claro y L2 la del más oscuro. La luminancia relativa se calcula a partir de los valores RGB del color, aplicando una corrección gamma para el espacio sRGB: valores ≤ 0.04045 se dividen por 12.92; los mayores se elevan a la potencia 2.4 tras normalizar. El ratio va de 1:1 (sin contraste, mismo color) hasta 21:1 (negro sobre blanco).
¿Por qué mi diseño bonito falla el contraste WCAG?
Los colores que visualmente parecen contrastar bien muchas veces no cumplen el estándar. El ejemplo más común es texto gris claro sobre fondo blanco (#aaa sobre #fff tiene ratio 2.32:1 — falla incluso para texto grande). Los colores pasteles y las combinaciones de similar luminosidad suelen fallar. La solución es oscurecer el texto o aclarar el fondo hasta alcanzar el ratio mínimo.
¿Qué es 'AA Large' en el resultado?
AA Large significa que el contraste es suficiente para texto grande (≥ 18pt / 24px, o ≥ 14pt / ~18.67px en negrita) pero no para texto de cuerpo normal. Si usas este par de colores para cabeceras grandes, botones con texto grande o iconos con etiqueta, cumples AA. Si los usas para párrafos de texto de cuerpo, no cumples ningún estándar.
¿El contraste aplica solo a texto?
No. Las WCAG 1.4.11 (Non-text Contrast) requieren ratio ≥ 3:1 para componentes UI y gráficos informativos: bordes de inputs, íconos sin texto alternativo, gráficos de datos. Solo se aplica a elementos visuales que transmiten información, no a elementos decorativos (que pueden estar en alt='' en imágenes o aria-hidden en SVGs).