Comprobador de contraste WCAG
Pruebe cualquier par de colores de primer plano y fondo para la relación de contraste WCAG 2.1 (1 a 21).
¿Cómo comprobar el contraste de color
1. Ingrese o seleccione los colores de primer plano (texto) y de fondo.
2. Lea la relación de contraste (por ejemplo, 4,52:1).
3. Compruebe las filas AA y AAA para texto normal y grande tamaños.
4. Ajuste la luminosidad de HSL hasta que pase el nivel requerido, luego copia los valores hexadecimales.
Ejemplos de verificación de contraste
Texto del cuerpo #374151 en #FFFFFF
Relación ≈ 8.9:1: pasa AAA para texto normal (necesitas 7:1). Lectura cómoda en formato largo.
Gris claro #9CA3AF sobre blanco
Relación ≈ 2,6:1: no supera AA para texto normal (necesitas 4,5:1). Error común de marcador de posición.
Botón principal blanco en #2563EB
Relación ≈ 4,6:1: pasa texto normal AA; pasa a un azul más oscuro para AAA o para uso solo grande.
¿Cuándo usar esta herramienta
• Cuando auditas los tokens del sistema de diseño antes del lanzamiento.
• Cuando arreglas los hallazgos de accesibilidad de Lighthouse o axe.
• Cuando eliges colores de enlace que deben diferir del texto del cuerpo, no solo por el tono.
Explicación de los niveles de WCAG 2.1
El nivel A es mínimo; AA es el objetivo legal en muchas jurisdicciones (ADA, sector público EAA). AAA es una aspiración para el cuerpo del texto: los titulares grandes pueden pasar AAA más fácilmente que los subtítulos de 14 píxeles. Los indicadores visibles de enfoque (2.4.7) complementan el contraste: los usuarios de teclados necesitan anillos de enfoque visibles, a menudo 3:1 contra colores adyacentes. Documente la aprobación/rechazo en su sistema de diseño junto a cada par de tokens.
Preguntas frecuentes
¿Qué relación de contraste para texto normal WCAG AA?
Al menos 4,5:1 para texto normal y 3:1 para texto grande (18 pt+ o 14 pt negrita).
¿Qué pasa con AAA?
Texto normal 7:1, texto grande 4.5:1: más estricto, a menudo se usa para sitios gubernamentales.
¿Los componentes de la interfaz de usuario necesitan contraste?
WCAG 2.1 requiere 3:1 para los objetos gráficos y los límites de los componentes de la interfaz de usuario (1.4.11).
¿Cómo es la proporción? ¿calculado?
Basado en la luminancia relativa de los colores sRGB: (L1 + 0,05) / (L2 + 0,05) donde L1 es más claro.
¿El subrayado corrige los enlaces de bajo contraste?
No, aún se requiere contraste. Los subrayados ayudan a las señales que no son de color, pero no reemplazan las reglas de proporción.