Verificador de Contraste
Verifica el contraste entre dos colores según WCAG 2.1 — esencial para accesibilidad web.
Define texto y fondo antes de aprobar una interfaz
El objetivo no es solo pasar WCAG, sino ver si la combinación aguanta lectura real en CTA, tablas, menús y formularios.
Color de texto
Color de fondo
Texto de ejemplo — Aa Bb Cc 123
Texto pequeño de ejemplo para verificar legibilidad real
Resultado operativo
Revisa primero el ratio, luego confirma si esta pareja sirve para texto pequeño, títulos o botones críticos.
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.