Verificador de contraste
Verifica el contraste WCAG 2.2 AA y AAA. Parte de generador de paletas de color con IA.
Respuesta rápida: Un verificador de contraste mide la diferencia de luminancia entre dos colores y la compara con las Pautas de Accesibilidad para el Contenido Web (WCAG).
Texto grande (24px)
Texto normal (16px). El veloz murciélago hindú comía feliz cardillo y kiwi.
Texto pequeño (14px). El veloz murciélago hindú comía feliz cardillo y kiwi.
Cómo funciona
Escribe un color de primer plano
Pega un código hex o usa el selector de color.
Escribe un color de fondo
La relación de contraste se actualiza al instante.
Lee los resultados WCAG
Verde significa que cumple, rojo significa que falla.
¿Qué es un verificador de contraste?
Un verificador de contraste mide la diferencia de luminancia entre dos colores y la compara con las Pautas de Accesibilidad para el Contenido Web (WCAG). WCAG 2.2 define dos niveles de conformidad. El nivel AA requiere una relación de contraste mínima de 4.5:1 para texto normal (menos de 18pt) y 3:1 para texto grande (18pt o 14pt en negrita). El nivel AAA requiere 7:1 para texto normal y 4.5:1 para texto grande. Los componentes de UI y objetos gráficos necesitan al menos 3:1 contra los colores adyacentes.
Las relaciones de contraste van de 1:1 (sin contraste, colores idénticos) a 21:1 (contraste máximo, negro sobre blanco). La mayoría de las leyes de accesibilidad, incluida la Ley Europea de Accesibilidad y la Sección 508, toman WCAG AA como el estándar mínimo.
Probar el contraste durante el diseño evita correcciones costosas. Un verificador de contraste te deja validar pares de colores antes de que lleguen al código de producción.
Combina este verificador con el convertidor de hex a RGB para fijar tus códigos hex, pasa tus colores por el simulador de daltonismo para ver cómo se leen en distintos tipos de visión, o colores de estado y exportación DTCG con Pro para revisar los pares de éxito, advertencia y error en la misma pasada.
Casos de uso comunes
Audita un sistema de diseño
Prueba cada combinación de texto y fondo de tus tokens contra WCAG AA antes de cerrar el sistema. Combínalo con el generador de escalas de tonos para cobertura a nivel de token.
Especifica una UI accesible
Verifica que las etiquetas de botones, enlaces y campos de formulario cumplan 4.5:1 antes de entregar a desarrollo.
Corrige un componente que falla
Pega el color de marca y encuentra el tono más cercano que cumpla, sin romper la paleta.
Documenta una revisión de accesibilidad
Registra cumple y no cumple para cada combinación como evidencia en tu reporte de accesibilidad.
FAQ
Preguntas frecuentes
El verificador usa WCAG 2.2, la versión que más leyes de accesibilidad referencian. Las relaciones se calculan con la fórmula de luminancia relativa definida en el estándar, así que los resultados coinciden con lo que reportan auditores y herramientas automatizadas como axe y Lighthouse.
AA es el estándar mínimo que exigen la mayoría de las leyes de accesibilidad y requiere 4.5:1 para texto normal y 3:1 para texto grande. AAA es un objetivo más estricto, 7:1 y 4.5:1, usado por productos gubernamentales y de salud. Apunta a AA en todo el producto y a AAA en contenido crítico como el cuerpo de texto.
WCAG establece un umbral de contraste más bajo para texto grande porque los caracteres más grandes son más fáciles de leer con bajo contraste. El texto grande se define como 18pt en adelante, o 14pt en adelante si es negrita. El mismo par de colores puede superar el umbral de 3:1 para texto grande mientras falla el umbral de 4.5:1 para texto normal.
Sí. WCAG 2.2 exige un contraste no textual de al menos 3:1 para íconos, bordes de formularios, anillos de foco y cualquier elemento gráfico necesario para entender la UI. Usa el mismo verificador, compara el color del componente contra su fondo adyacente y apunta a 3:1 o más.
Esto verifica un par.
Paletta valida todo tu sistema de color contra WCAG. Cada tono, cada combinación.