Verificador de contraste de color

¿Qué es Verificador de contraste de color?

El Verificador de contraste de color es una herramienta en línea gratuita de contraste WCAG y APCA para diseñadores, desarrolladores y testers de accesibilidad. Acepta colores en HEX (#rgb, #rrggbb y #rrggbbaa de 8 dígitos con alfa), rgb()/rgba() y hsl()/hsla(), compone un primer plano translúcido sobre el fondo antes de medir e informa tanto de la relación WCAG 2.1 (1:1 a 21:1) como de la puntuación de contraste de luminosidad APCA Lc. Señala el nivel AA de WCAG 2.1 (4.5:1 normal, 3:1 grande) y AAA (7:1 normal, 4.5:1 grande), añade una insignia 3:1 para componentes de interfaz y gráficos no textuales, y puede sugerir el primer plano válido más cercano —ajustando solo su luminosidad hasta cumplir AA o AAA— que aplicas con un clic.

Cómo usar Verificador de contraste de color

1. Introduce el color de primer plano (texto) como HEX, rgb() o hsl() —se admite HEX de 8 dígitos o rgba con alfa— o haz clic en el selector de color para elegirlo visualmente.
2. Introduce el color de fondo de la misma forma; un primer plano semitransparente se compone sobre él (y el fondo sobre blanco) antes de medir el contraste.
3. Usa el botón Intercambiar para invertir el primer plano y el fondo cuando quieras.
4. Lee la relación de contraste WCAG 2.1 y la puntuación APCA Lc mostrada justo al lado.
5. Revisa las insignias AA y AAA para texto normal y grande, además de la insignia 3:1 para componentes de interfaz y gráficos.
6. Si un par no aprueba, mira el color AA o AAA válido más cercano y haz clic en Aplicar para actualizar el primer plano.

Ejemplos

Primer plano #595959, Fondo #ffffff

Relación 7.00:1 con un APCA Lc alto — aprueba AA y AAA para texto normal y grande

Primer plano #00000080 (negro al 50%) sobre #ffffff

Se compone primero en un gris sólido y luego se calculan la relación WCAG y el APCA Lc

Primer plano #999999 sobre #ffffff — 2.85:1, no aprueba AA

Abre el color AA más cercano y haz clic en Aplicar para llegar a 4.5:1 manteniendo el mismo tono

Preguntas frecuentes

¿Qué relaciones de contraste exige WCAG?

El nivel AA de WCAG 2.1 necesita al menos 4.5:1 para texto normal y 3:1 para texto grande; el nivel AAA necesita 7:1 y 4.5:1. Los componentes de interfaz y objetos gráficos no textuales (SC 1.4.11) necesitan 3:1. Este verificador muestra una insignia de aprobado/no aprobado para cada uno de esos umbrales.

¿Qué es la puntuación APCA Lc?

APCA (el Algoritmo de Contraste Perceptual Accesible) es el método de contraste propuesto para WCAG 3. Da un valor de contraste de luminosidad (Lc) de aproximadamente 0 a 108, donde más alto es más contraste, y tiene en cuenta la polaridad (oscuro sobre claro frente a claro sobre oscuro). Se muestra junto a la relación WCAG 2.1 y usa sus propios niveles de orientación en lugar de un único aprobado/no aprobado.

¿Cómo funciona la sugerencia de color válido más cercano?

Mantiene el tono y la saturación del primer plano y solo ajusta su luminosidad hacia más claro o más oscuro hasta que el contraste con el fondo cumple AA (4.5:1) o AAA (7:1); luego puedes aplicarlo con un clic. Si el fondo es de tono medio y no se puede alcanzar el objetivo, muestra el color posible más cercano.

¿Qué formatos de color puedo introducir?

HEX (#rgb, #rrggbb, además de #rgba y #rrggbbaa de 8 dígitos con alfa), rgb()/rgba() y hsl()/hsla(), con un selector de color nativo para cada campo. Un primer plano semitransparente se compone sobre el fondo —que a su vez se aplana sobre blanco— antes de calcular la relación. Los colores con nombre no se admiten.

¿Se envían mis colores a un servidor?

No. Todo el análisis, la composición, la luminancia, la relación y el cálculo APCA se ejecutan por completo en tu navegador con JavaScript: no se sube ningún color ni se envía nada a un servidor, así que funciona de forma privada e incluso sin conexión una vez cargada la página.