Verificador de contraste de color

El texto con poco contraste es el defecto de accesibilidad más común de la web, y también el más fácil de corregir, siempre que alguien lo compruebe antes de cerrar la paleta. La herramienta de arriba toma un color de primer plano y uno de fondo, y te da la relación de contraste WCAG junto con los cuatro umbrales de cumplimiento que importan.

Cómo funciona

Introduce dos colores hexadecimales o usa los selectores nativos. La herramienta calcula la luminancia relativa de cada color con la fórmula de WCAG 2: cada canal se normaliza al rango 0–1, se linealiza (los valores por encima de 0,03928 se elevan a 2,4 tras aplicarles un desplazamiento) y se pondera con 0,2126 para el rojo, 0,7152 para el verde y 0,0722 para el azul. Esos pesos explican por qué el verde domina y el azul apenas cuenta: aproximan la sensibilidad de la visión humana a cada zona del espectro.

La relación es entonces (L_lighter + 0.05) / (L_darker + 0.05), redondeada a dos decimales. Va de 1:1 para dos colores idénticos a 21:1 para negro puro sobre blanco puro, y es simétrica: intercambiar primer plano y fondo da el mismo número.

A partir de esa relación se muestran cuatro resultados:

• AA, texto normal: requiere 4,5:1. Es el umbral contra el que se hacen la mayoría de las auditorías.
• AA, texto grande: requiere 3:1. «Grande» significa 18 pt (24 px) en peso normal, o 14 pt (18,66 px) en negrita.
• AAA, texto normal: requiere 7:1.
• AAA, texto grande: requiere 4,5:1.

Cómo leer el resultado

AA es el objetivo práctico. El nivel AA de WCAG 2.1 es la referencia de la mayor parte de la contratación pública, del European Accessibility Act y de marcos equivalentes. Merece la pena apuntar a AAA en el texto principal, pero es realmente difícil de conseguir con una paleta de marca, y la propia WCAG no recomienda exigir AAA de forma general a sitios completos.

Los componentes de interfaz tienen su propio umbral. El criterio de conformidad 1.4.11 exige 3:1 para el contorno visual de los controles: bordes de los campos, indicadores de foco, estados de los interruptores y las partes de un icono que transmiten significado. Un formulario cuyos campos tienen un borde gris claro muy de moda suele fallar aquí, aunque el texto de dentro cumpla.

El texto del placeholder también es texto. Igual que las etiquetas deshabilitadas que se espera que la gente lea, y el texto incrustado en imágenes. Ponerlo en gris no lo exime de nada.

En degradados e imágenes, manda el peor caso. Un pie de foto sobre una fotografía tiene una relación distinta en cada píxel. Compara tu texto con el punto más claro del fondo, no con la media, o añade una capa semitransparente detrás del texto para que el fondo sea predecible.

Fallar por poco sigue siendo fallar. 4,4:1 no cumple. Bajar la luminosidad unos pocos puntos porcentuales en HSL suele bastar; el conversor de colores facilita ese ajuste, porque al mantener el tono y la saturación y reducir solo la luminosidad el color sigue siendo reconocible.

Dónde encaja

El contraste es un criterio entre muchos, pero es el que afecta a más personas: la baja visión es frecuente, y también lo son el sol directo, las pantallas baratas y el hecho de que casi todos nos hacemos mayores. El marcado semántico, la gestión del foco y las alternativas textuales completan el cuadro, y lo esencial de HTML5 cubre los elementos estructurales de los que dependen las tecnologías de apoyo. Si tus colores se generan en tiempo de ejecución (un selector de tema, una paleta de gráficos, etiquetas elegidas por el usuario), la comprobación debe estar en el código además de en la revisión, y los fundamentos de JavaScript son el punto de partida para calcular la luminancia sobre la marcha.

Dos limitaciones de esta herramienta, dichas sin rodeos. Implementa la relación de WCAG 2, no el modelo APCA, más reciente, que se está estudiando para WCAG 3 y que puntúa de otra forma los mismos pares. Y solo acepta colores hexadecimales opacos: si el texto es semitransparente, compón primero el color sobre su fondo real y comprueba el resultado.