Comprobador de contraste

Cómo usar el comprobador de contraste

1. Introduce el Color del texto y el Color de fondo. Usa las muestras de color o escribe cualquier valor CSS en los campos: un código HEX como #595959, rgb(89 89 89), hsl(0 0% 35%) o un nombre como navy.
2. La Relación de contraste se actualiza mientras escribes, de 1:1 (sin contraste) a 21:1 (negro sobre blanco).
3. La tabla Resultados WCAG 2.2 indica Aprueba o Suspende para Texto normal, Texto grande y Componentes de interfaz y gráficos, en los niveles AA y AAA.
4. Revisa la Vista previa: muestra texto normal, texto grande, texto grande en negrita, el contorno de un botón y un icono con tus dos colores.
5. Si un nivel no se cumple, elige un Objetivo en Sugerencias. La herramienta propone el Color de texto válido más cercano y el Color de fondo válido más cercano. Pulsa Usar para aplicar uno. Intercambiar colores invierte texto y fondo.

Todo se calcula en tu navegador; no se envía nada a ninguna parte.

Cómo se calcula la relación de contraste

WCAG 2.x define la relación como (L1 + 0,05) / (L2 + 0,05), donde L1 es la luminancia relativa del color más claro y L2 la del más oscuro. La luminancia relativa se calcula a partir de los canales sRGB linealizados: cada canal se decodifica con la curva de transferencia sRGB y luego L = 0,2126 R + 0,7152 G + 0,0722 B. El verde es el que más pesa porque nuestros ojos son más sensibles a él; por eso un verde puro parece mucho más luminoso que un azul puro de la misma «intensidad».

La relación nunca se redondea hacia arriba. #777777 sobre blanco da unos 4,48:1 y no cumple AA para texto normal, aunque parezca un «4,5». Esta herramienta trunca el valor mostrado a dos decimales, para que lo que ves sea lo que comprueba WCAG.

Si el color del texto es semitransparente (por ejemplo rgb(0 0 0 / 60%)), primero se mezcla con el fondo, como lo dibujaría el navegador. La transparencia del color de fondo se ignora, porque no se sabe qué hay detrás de la página.

Los niveles WCAG de un vistazo

«Texto grande» significa al menos 18 pt (24 píxeles CSS), o 14 pt en negrita (unos 18,66 px). Los logotipos y el texto puramente decorativo no tienen requisitos. La regla de 3:1 para componentes de interfaz (criterio de conformidad 1.4.11) se aplica a los bordes de campos y botones, los indicadores de foco, los iconos y las líneas de los gráficos que el usuario necesita ver.

Cómo funcionan las sugerencias

Los colores sugeridos mantienen el tono y el croma de tu color en el espacio OKLCH y solo cambian su luminosidad, oscureciéndolo o aclarándolo, hasta alcanzar la relación objetivo. Después, la herramienta elige de las dos direcciones la que queda visualmente más cerca de tu color original, medida en OKLab. El resultado se vuelve a comprobar tras redondearlo a un código HEX, así que cumple de verdad. Si ninguna luminosidad alcanza el objetivo (7:1 frente a un gris medio, por ejemplo), la herramienta te lo indica.

Sobre APCA

APCA (Accessible Perceptual Contrast Algorithm) es un modelo de contraste más reciente que se estudia para un futuro WCAG 3. Tiene en cuenta el grosor y el tamaño de la fuente y la polaridad (oscuro sobre claro frente a claro sobre oscuro). Todavía es un borrador y no un requisito legal ni normativo, así que esta herramienta muestra los resultados de WCAG 2.x, que siguen siendo la referencia de la norma europea de accesibilidad EN 301 549, de la Sección 508 y de la mayoría de las leyes.