Los resultados se ofrecen solo con fines informativos y pueden contener errores. Verifica la información importante de forma independiente. El uso de esta herramienta es bajo tu propia responsabilidad.
Qué hace esta herramienta
El Verificador de Contraste de Color mide lo legible que es un texto sobre un fondo. Elige un color de texto y un color de fondo y verás la relación de contraste, desde 1:1 (colores idénticos) hasta 21:1 (negro sobre blanco), una vista previa en tiempo real y si la combinación supera los cuatro umbrales de WCAG: AA y AAA para texto normal y para texto grande.
La relación usa la fórmula de luminancia relativa de WCAG 2: cada canal de color se linealiza y se pondera (el verde es el que más cuenta y el azul el que menos), y la luminancia más clara se divide entre la más oscura, sumando 0,05 a ambas. AA exige 4,5:1 para texto normal y 3:1 para texto grande (al menos 24px, o 18,66px en negrita). AAA los eleva a 7:1 y 4,5:1. El cálculo se hace en tu navegador.
Cuándo usarla
- Elegir un color de marca para botones y comprobar que las etiquetas en blanco sobre él siguen siendo legibles.
- Corregir una auditoría de accesibilidad de Lighthouse o axe que ha fallado por texto con poco contraste.
- Elegir un gris para el texto secundario que sea lo bastante claro para parecer secundario pero que cumpla AA.
- Diseñar un tema oscuro, donde los colores de acento de tono medio suelen fallar sobre fondos oscuros.
Ejemplo práctico
#ffffff sobre #3b82f6
3.68:1 - AA large only
#767676 sobre #ffffff
4.54:1 - AA normal and large, fails AAA normal
#1e293b sobre #ffffff
14.63:1 - passes all four
Preguntas sobre esta herramienta
¿Por qué falla el texto blanco sobre un botón azul brillante?
Los colores saturados de tono medio tienen una luminancia bastante alta, así que el texto blanco sobre ellos suele quedar entre 3:1 y 4,5:1. Eso basta para etiquetas grandes y en negrita, pero no para el texto del cuerpo. Oscurece el fondo uno o dos tonos hasta que la relación llegue a 4,5:1.
¿A qué nivel debo apuntar, AA o AAA?
AA es el nivel al que se refieren la mayoría de las leyes y políticas de accesibilidad, así que tómalo como mínimo. AAA es un objetivo más estricto que merece la pena cumplir en textos largos de lectura, pero no es obligatorio para todos los elementos.
¿El contraste también se aplica a iconos y bordes?
WCAG 2.1 pide al menos 3:1 para los gráficos con significado y los componentes de la interfaz, como los bordes de los campos, los anillos de foco y los iconos que transmiten información. Para ellos, usa como referencia el resultado AA de texto grande.
¿Puedo comprobar un color escrito en RGB o HSL?
Los selectores funcionan con valores hex. Convierte antes las demás notaciones con la familia de herramientas del Conversor de color HEX a RGB o con el Convertidor de Colores, y después pega el código hex.
¿Esta herramienta es gratuita?
Sí, es gratis. Sin registro ni correo electrónico. Obtén el resultado en esta página.
¿Cómo obtengo el resultado?
Usa la herramienta en esta página. El resultado aparece aquí, sin envío por correo electrónico.