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.
Color Contrast Checker
The quick brown fox jumps over the lazy dog
Contrast Ratio
8.67:1
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.).
Comprender el contraste de color WCAG para la accesibilidad web
Un verificador de contraste de color es una herramienta esencial para diseñadores y desarrolladores web para garantizar que su contenido digital cumpla con los estándares de accesibilidad. Las pautas de contraste de color WCAG ayudan a crear interfaces que son legibles y utilizables por todos, incluidas las personas con discapacidad visual.
¿Qué es el contraste de color WCAG?
Las WCAG (Pautas de Accesibilidad del Contenido Web) definen ratios de contraste específicos entre los colores del texto y del fondo para garantizar la legibilidad. El verificador de contraste calcula estos ratios utilizando valores de luminancia relativa, proporcionando una medida matemática de cuán distinguibles son los colores entre sí. Cumplir con estos estándares es crucial para la conformidad con WCAG 2.1 y está referenciado por regulaciones como la Ley Europea de Accesibilidad (EAA) a través de EN 301 549.
¿Cómo funciona un verificador de contraste?
Nuestro verificador de contraste de color WCAG analiza la diferencia de luminancia entre los colores de primer plano (texto) y de fondo. Calcula automáticamente la relación de contraste y la compara con los criterios de éxito de WCAG 4,5:1 para texto normal (Nivel AA), 3:1 para texto grande y 7:1 para contraste mejorado (Nivel AAA). Esta retroalimentación instantánea te ayuda a tomar decisiones de diseño informadas sin cálculos manuales.
Mejores prácticas para el contraste de color
Comienza probando los colores de tu marca temprano en el proceso de diseño usando un verificador de contraste. Asegúrate de que todos los elementos de texto, botones, campos de formulario e iconos cumplan con los requisitos mínimos. No confíes únicamente en el color para transmitir información: usa también etiquetas de texto, iconos o patrones. Las pruebas regulares con un verificador de contraste WCAG ayudan a mantener los estándares de accesibilidad durante todo el ciclo de vida de tu proyecto.
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.