Verificador de Contraste
Verifica el contraste entre dos colores según WCAG 2.1 — esencial para accesibilidad web.
Color de Texto
#
Color de Fondo
#
Texto de ejemplo — Aa Bb Cc 123
Texto pequeño de ejemplo para verificar legibilidad real
15.3: 1
✓ AATexto Normal≥ 4.5:1
✓ AATexto Grande≥ 3:1
✓ AAATexto Normal≥ 7:1
✓ AAATexto Grande≥ 4.5:1
Niveles WCAG
| Nivel | Texto Normal | Texto Grande | Uso |
|---|---|---|---|
| A | Sin requisito | Sin requisito | Mínimo legal |
| AA | ≥ 4.5:1 | ≥ 3:1 | Estándar recomendado |
| AAA | ≥ 7:1 | ≥ 4.5:1 | Máxima accesibilidad |
¿Por Qué Importa el Contraste?
Accesibilidad
Aproximadamente el 8% de hombres y el 0.5% de mujeres tienen deficiencia de visión cromática. Un contraste adecuado asegura que todos puedan leer tu contenido.
⚖Cumplimiento Legal
La directiva europea EAA 2025 y el ADA en EE.UU. requieren WCAG AA como mínimo para sitios web públicos y comerciales.
Legibilidad Móvil
Bajo luz solar directa, la legibilidad de pantallas se reduce drásticamente. Un buen contraste asegura lectura en cualquier condición.
📈 Conversión
Los CTAs con buen contraste tienen 20-30% más tasa de clic. La legibilidad directamente impacta las métricas de negocio.
Preguntas Frecuentes
¿Qué ratio necesito para accesibilidad web?
Texto normal: 4.5:1 para AA, 7:1 para AAA. Texto grande (≥18pt o ≥14pt bold): 3:1 para AA, 4.5:1 para AAA.
¿Qué es texto grande?
Según WCAG, texto grande es ≥18pt (24px) regular o ≥14pt (18.66px) en negrita.
¿Esta herramienta usa WCAG 2.1 o 3.0?
Usa la fórmula de contraste de WCAG 2.1, que es el estándar actual vigente. WCAG 3.0 está en borrador y usa APCA.
¿Puedo pegar colores HEX directamente?
Sí. Acepta HEX con o sin #, y 3 o 6 dígitos. También puedes usar los selectores de color.
¿El contraste depende del tamaño de fuente?
El ratio numérico no cambia, pero los umbrales WCAG son más flexibles para texto grande porque el tamaño compensa parcialmente la falta de contraste.