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.
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.
Relación de contraste
17.06:1
AA · Texto normal
Requiere 4.5:1
AA · Texto grande
Requiere 3:1
AAA · Texto normal
Requiere 7:1
AAA · Texto grande
Requiere 4.5:1
Cómo funciona
- 1
Escribe un color de primer plano
Pega un código hex o usa el selector de color.
- 2
Escribe un color de fondo
La relación de contraste se actualiza al instante.
- 3
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 escalas de tonos y exportaciones Pro para validar sistemas completos en vez de un par a la vez.
Casos de uso comunes
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.
Preguntas frecuentes
Esto verifica un par.
Paletta valida todo tu sistema de color contra WCAG. Cada tono, cada combinación.