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
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
¿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.
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.