Verificador de Contraste de Color
Asegúrate de que tu texto e interfaz cumplan con los requisitos de contraste de WCAG 2.1 — parte esencial de la conformidad EAA/EN 301 549. Pega los colores de marca, previsualiza combinaciones y obtén una evaluación clara para texto normal, texto grande y componentes UI.
Confiado por organizaciones de toda Europa que trabajan para cumplir con la conformidad WCAG y EAA
¿Qué es un verificador de contraste y por qué usarlo?
Un contraste suficiente mejora la legibilidad para todos — especialmente para quienes tienen baja visión, deficiencias en la percepción de color o pantallas de baja calidad.
Verifica 1.4.3 Contraste (Mínimo), 1.4.6 Contraste (Mejorado) y 1.4.11 Contraste no textual para componentes UI y gráficos.
La Ley de Accesibilidad Europea hace referencia a EN 301 549, que a su vez remite a WCAG — el contraste es clave para cumplir obligaciones.
Paletas accesibles crean interfaces robustas y legibles que funcionan en temas claros/oscursos y en varios dispositivos.
Umbrales de contraste WCAG 2.1 (referencia rápida)
Ratio mínimo: 4,5:1 (texto menor de 24 px normal / 19 px negrita).
Ratio mínimo: 3:1 (≥ 24 px normal o ≥ 19 px negrita).
Contraste mínimo con colores adyacentes: 3:1 (bordes de foco, campos de formulario, iconos etc.).
Probar el verificador de contraste
Ingresa colores de primer plano y fondo (HEX). La herramienta calcula la proporción de contraste y muestra apto/no apto para niveles WCAG. Los resultados se actualizan conforme escribes.
Color Contrast Checker
Example text preview
Contrast ratio: 8.67:1
Normal text
Contrast Ratio:8.67:1
Normal Text (WCAG AA)
Pass ≥ 4.5
AAA
Pass ≥ 7.0
Preguntas frecuentes
¿Cambia WCAG 2.1 los ratios de contraste?
¿Requiere la EAA el contraste WCAG?
¿Qué se considera “texto grande”?
Incorpora controles de contraste a tu flujo de trabajo
Realiza controles de contraste durante revisiones de diseño y código. Combínalos con escaneo automático para detectar problemas a gran escala.