Verificador de Contraste de Color
Verifica la relación de contraste WCAG entre dos colores hex y comprueba si el par cumple con los estándares de accesibilidad AA y AAA.
¿Esta herramienta respondió tu pregunta?
Gracias: esto nos ayuda a mejorar la herramienta.
Cómo usar esta herramienta
- Ingresa el color de primer plano (texto) y el color de fondo como códigos hex.
- La herramienta calcula la luminancia relativa WCAG de cada color.
- Lee la relación de contraste y los resultados de aprobado/reprobado para los umbrales AA y AAA.
Verifica si dos colores cumplen los requisitos de contraste WCAG 2.1. La relación mínima es 4.5:1 para texto normal (AA) y 7:1 para el estándar más alto AAA.
Fórmula
For each hex color, compute relative luminance L using the WCAG formula:L = 0.2126 × lin(R) + 0.7152 × lin(G) + 0.0722 × lin(B)
where lin(c) = c/12.92 if c ≤ 0.03928, else lin(c) = ((c + 0.055)/1.055)2.4.
Contrast ratio: ratio = (Llighter + 0.05) / (Ldarker + 0.05)
WCAG thresholds: AA normal text ≥ 4.5:1; AA large text ≥ 3.0:1; AAA normal text ≥ 7.0:1; AAA large text ≥ 4.5:1.
Preguntas frecuentes
- ¿Qué es la relación de contraste WCAG?
- WCAG (Pautas de Accesibilidad para el Contenido Web) define una fórmula de relación de contraste. Va de 1:1 (sin contraste) a 21:1 (negro sobre blanco). El texto normal del cuerpo requiere al menos 4.5:1 para cumplir con AA.
- ¿Qué se considera texto grande?
- El texto grande es de 18pt (24px) o más, o 14pt en negrita (aproximadamente 19px en negrita). El texto grande solo necesita una relación de 3:1 para AA.