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). Consulta aprobado/reprobado para los niveles AA y AAA, para texto normal, texto grande (18 puntos+ o 14 puntos en negrita) y componentes de la interfaz de usuario. Esencial antes de enviar botones, enlaces y etiquetas de formularios: muchas paletas de marcas fallan hasta que se oscurece el texto o se aclaran las superficies.
Color del texto
Color de fondo
Aa Bb Cc — 123
Result
16.12 : 1
AA — Correcto
AA (texto grande) — Correcto
AAA — Correcto
AAA (texto grande) — Correcto
¿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.
¿Cuándo elegir algo else
• Cuando necesites una auditoría de página completa, utilice escáneres automáticos en el DOM renderizado.
• Al probar fondos no sólidos (imágenes, degradados), tome muestras de los peores píxeles de los casos.
• Al simular daltonismo, utilice simuladores de visión especializados.
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.
Solucionar fallas sin cambiar la marca
Si la marca púrpura falla en el blanco, no cambie el tono: oscurezca el primer plano en pasos de luminosidad del 5 al 10% o usa el púrpura solo para encabezados grandes. El texto del marcador de posición debe cumplir con el contraste (4.5:1), no solo con los valores de entrada. Los estados discapacitados pueden estar exentos del contraste estricto del texto, pero no deben transmitir información crítica únicamente mediante el color. Combine este verificador con el conversor de colores para una iteración rápida de HSL.
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.
¿Se envían mis datos a un servidor?
No.
¿Esta herramienta es gratuita?
Sí.