Verificador de contraste
Comprueba el contraste de color para WCAG
Cómo usar Verificador de contraste
Comprueba el ratio de contraste para accesibilidad WCAG 2.1 AA y AAA. Verificador de contraste gratuito para diseñadores.
¿Por qué importa el contraste de color?
Aproximadamente el 8% de los hombres y el 0,5% de las mujeres tienen algún tipo de deficiencia en la visión del color. Además, las personas leen en condiciones difíciles —luz solar intensa, pantallas de baja calidad, fatiga o envejecimiento. Un contraste de color suficiente garantiza que tu contenido sea legible para todos.
- Cumplimiento de accesibilidad web: Las WCAG 2.1 (Pautas de Accesibilidad para el Contenido Web) establecen ratios mínimos de contraste. Muchos países tienen leyes que exigen que los sitios web cumplan al menos el nivel WCAG AA —incumplirlo expone a las organizaciones a riesgo legal.
- Revisión de diseño: Comprueba las combinaciones de colores de texto y fondo durante la fase de diseño, antes del desarrollo. Es mucho más barato corregir problemas de contraste en Figma que tras el lanzamiento.
- Bibliotecas de componentes: Verifica que cada combinación de colores en tu sistema de diseño cumple los requisitos de accesibilidad.
- Modo oscuro: Los colores que funcionaban en fondos blancos suelen fallar en fondos oscuros. Cada modo necesita verificación de contraste independiente.
- Visualización de datos: Asegúrate de que los colores de los gráficos sean distinguibles por usuarios daltónicos y legibles en diferentes colores de fondo.
Niveles WCAG: El nivel A es el mínimo. El nivel AA (ratio ≥ 4,5:1 para texto normal, ≥ 3:1 para texto grande) es el estándar legal en la mayoría de jurisdicciones. El nivel AAA (ratio ≥ 7:1) es para la mayor accesibilidad —requerido en algunos sitios gubernamentales y de salud.
Frequently Asked Questions
¿Qué ratio de contraste exige WCAG AA?
WCAG AA requiere un ratio mínimo de contraste de 4,5:1 para texto normal (menos de 18pt o 14pt en negrita) y de 3:1 para texto grande (18pt o más, o 14pt o más en negrita). Los componentes de UI y elementos gráficos (iconos, bordes de formulario) requieren 3:1. Estos son mínimos —un mayor contraste es siempre mejor para la legibilidad.
¿Cómo se calcula el ratio de contraste?
Ratio de contraste = (L1 + 0,05) / (L2 + 0,05), donde L1 es la luminancia relativa del color más claro y L2 la del más oscuro. El contraste máximo es 21:1 (negro sobre blanco). Un ratio de 1:1 significa sin contraste.
¿Se aplica el ratio de contraste al texto de color sobre fondos de color?
Sí —la fórmula WCAG compara la luminancia relativa, no solo el brillo. El texto rojo sobre fondo verde puede tener poco contraste aunque ambos sean colores vivos. Prueba siempre las combinaciones de colores reales.
¿Cuál es la diferencia entre contraste de color y daltonismo?
El ratio de contraste mide la diferencia de luminancia —importa para todos los usuarios, incluyendo los que tienen visión normal del color. El daltonismo afecta a cómo se distinguen los colores, no necesariamente su luminancia. Un diseño de alto contraste usando solo rojo y verde pasa la prueba de luminancia pero puede ser indistinguible para usuarios con daltonismo rojo-verde.
¿Afecta el peso de la fuente a los requisitos de contraste?
Sí. El texto en negrita y el texto grande tienen requisitos mínimos más bajos porque son inherentemente más fáciles de leer. WCAG AA requiere 3:1 para texto de 18pt (24px) o más, o 14pt (aproximadamente 18,67px) en negrita. Para texto más pequeño o sin negrita, el requisito es 4,5:1.
Verificador de contraste vs simulador de daltonismo vs auditoría de accesibilidad
Un verificador de contraste comprueba el ratio de luminancia entre dos colores específicos. Un simulador de daltonismo (Coblis, DevTools de Chrome) muestra cómo aparece un diseño con diferentes tipos de deficiencia en la visión del color. Una auditoría de accesibilidad completa (axe, Lighthouse, WAVE) escanea una página entera en busca de todas las violaciones WCAG. Para una accesibilidad integral: comprueba el contraste en la fase de diseño, simula el daltonismo antes del lanzamiento y ejecuta auditorías automatizadas en el sitio en vivo.