Verificador de Contraste WCAG
Verifica si dos colores cumplen con los requisitos de contraste WCAG AA y AAA.
Respuesta rápida: Verificador de Contraste WCAG: comprueba si dos colores cumplen los requisitos de contraste WCAG AA y AAA. Funciona íntegramente en el navegador, es gratis y no requiere registro.
Última actualización
Bueno saber
Contrast is measured as a ratio between the relative luminance of two colors, running from 1:1 (identical) to 21:1 (pure black on pure white). The WCAG 2.1 thresholds this tool reports are the accessibility bar most sites are held to: 4.5:1 for normal body text and 3:1 for large text at Level AA, tightening to 7:1 and 4.5:1 at the stricter Level AAA. "Large" here means roughly 18pt, or 14pt bold.
The formula is based on perceived luminance, not on how different two colors look, which produces some counterintuitive results. Two vivid but similarly bright colors — say a saturated red on a saturated green — can have poor contrast even though they clash violently to the eye, while a light gray on white may pass more easily than you expect. That is why relying on your own judgment is unreliable and a numeric check is worth the two seconds it takes.
One limitation to plan around: WCAG contrast is only defined for opaque colors. If your foreground uses transparency, the effective color depends on whatever sits behind it, so pre-blend it against the actual solid background before checking. Since luminance ignores hue entirely, a passing ratio does not guarantee a design is color-blind-friendly — confirm that separately with the color blindness simulator, and grab exact values with the color picker.
Preguntas frecuentes
- ¿Es gratuito el verificador de contraste?
- Sí, — gratis, sin registro ni límites.
- ¿Qué fórmula usas?
- La fórmula de luminancia relativa oficial WCAG 2.1 — la misma que utiliza Lighthouse de Google.
- ¿Qué ratios pasan?
- AA necesita 4.5:1 para texto normal o 3:1 para texto grande; AAA eleva eso a 7:1 y 4.5:1.
- ¿Puedo verificar colores transparentes?
- WCAG no define ratios para primeros planos transparentes — premezcla tu color contra un fondo sólido primero.
- ¿Se suben datos?
- No, la verificación se realiza en tu navegador.