contraste

Qué mide exactamente

El contraste no mide «lo distintos que son dos colores». Mide la diferencia de luminosidad entre ellos, y se expresa como una proporción: 4,5:1, 7:1, 21:1. El valor máximo posible es 21:1, que es negro puro sobre blanco puro. El mínimo es 1:1, dos colores con la misma luminosidad.

Que la fórmula ignore el tono explica algo que descoloca a muchos diseñadores: un naranja y un verde pueden parecer colores muy diferentes y tener un contraste pésimo entre ellos, porque su luminosidad es casi idéntica. Y al revés, dos azules del mismo tono pueden contrastar de sobra si uno es muy oscuro y el otro muy claro. La prueba casera es convertir la pantalla a escala de grises: si en gris no se distingue, el contraste es malo, por muy vistosa que sea la paleta en color.

Los umbrales que pide WCAG

Aquí no hay interpretación posible, son números:

• Texto normal: 4,5:1 en nivel AA, 7:1 en nivel AAA.
• Texto grande: 3:1 en AA, 4,5:1 en AAA. «Grande» significa a partir de 24 px, o de 18,66 px si va en negrita.
• Componentes de interfaz y gráficos: 3:1 contra lo que tengan al lado. Esto cubre el borde de un campo de formulario, el icono de un botón, las líneas de un gráfico o el indicador que marca un interruptor encendido.

Ese último punto es el que más se olvida. La gente mide el texto de los botones y da por hecho que ya está, pero un campo de formulario cuyo borde gris claro apenas se distingue del fondo blanco incumple igual: si no ves dónde empieza la caja, no sabes dónde escribir.

Hay excepciones y conviene conocerlas para no perder tiempo: el texto que forma parte de un logotipo no tiene requisito de contraste, ni el texto puramente decorativo, ni el de un elemento de interfaz desactivado.

Cómo se comprueba de verdad

Con un medidor, nunca a ojo. El de WebAIM es el más práctico: metes los dos colores en hexadecimal y te da el valor y qué niveles cumple. Los navegadores también lo traen incorporado: al inspeccionar un texto, el selector de color de las herramientas de desarrollo muestra la relación de contraste y las líneas que separan lo que cumple de lo que no.

Lo importante es medir sobre lo que se ve, no sobre lo que dice la hoja de estilos. Tres situaciones donde el valor calculado y el real no coinciden:

1. Texto sobre imagen o vídeo. El fondo cambia píxel a píxel. Hay que medir contra la zona más clara y contra la más oscura, y si no se sostiene, poner una capa de color sólido o semitransparente debajo.
2. Transparencias. Un rgba(0,0,0,0.6) sobre blanco no es negro: es un gris. Hay que calcular el color resultante.
3. Estados. El :hover, el :visited, el texto de un botón desactivado que sigue siendo accionable, el placeholder de un input. Cada estado tiene sus propios colores y cada uno se mide aparte.

<!-- Mal: el gris claro del placeholder suele quedarse en 2,5:1 -->
<input type="email" placeholder="Tu correo">

<!-- Bien: etiqueta visible con contraste suficiente, el placeholder solo apoya -->
<label for="correo">Tu correo</label>
<input type="email" id="correo" placeholder="nombre@ejemplo.com">

Lo que me encuentro auditando

En más de veinte años revisando webs, el contraste es el fallo que aparece en prácticamente todas las auditorías, y casi nunca por dejadez: por manual de marca. Alguien definió un color corporativo hace años, ese color se usa para los enlaces y para los botones, y nadie ha comprobado nunca qué relación tiene con el blanco del fondo. Los verdes lima, los amarillos corporativos y los azules celestes son los reincidentes.

Cuando lo planteo, la reacción habitual es «entonces hay que cambiar la marca». No: hay que cambiar el uso del color. El corporativo puede seguir estando en el fondo de una sección, en un icono grande, en una franja o en el borde de una tarjeta, donde el requisito es 3:1 o directamente no aplica. Para el texto pequeño se usa una variante oscurecida del mismo tono. Nadie percibe que la marca ha cambiado y la web pasa a leerse.

El segundo patrón que veo constantemente es el gris de los textos secundarios: fechas, pies de foto, notas legales, texto de ayuda de los formularios. Se pinta de gris claro para «restarle peso visualmente», y ese gris se queda en 3:1 o menos. Es información real, y hay quien no la puede leer.

Por qué le importa a un negocio

Porque el contraste no es un problema de minorías. Afecta a cualquiera que tenga presbicia —es decir, a casi toda la población a partir de los 45—, a quien tiene una catarata incipiente, a quien mira el móvil al sol en una terraza y a quien usa un portátil barato con la pantalla mal calibrada. Es el criterio de accesibilidad con mayor número de personas afectadas y, a la vez, el más barato de arreglar: se toca la hoja de estilos y punto.

Y toca el dinero directamente. El texto de bajo contraste suele estar precisamente donde peor conviene: el precio en gris junto al producto, las condiciones del envío, el mensaje de error del formulario de pago. Un error de validación en rojo claro sobre fondo blanco es un carrito abandonado que en analítica se ve como «se fue sin comprar», sin ninguna pista de por qué.

Añado el detalle legal: el nivel AA es requisito bajo el EAA para el comercio electrónico europeo desde junio de 2025, y el contraste es uno de los pocos criterios que cualquier herramienta automática detecta en segundos. Si alguien quiere documentar un incumplimiento, este es el primero que va a encontrar.

Errores frecuentes

Medir a ojo o preguntar al equipo si «se ve bien». El equipo lo ve bien porque tiene 30 años, dos monitores buenos y ha visto ese texto mil veces. La percepción no sirve como método: o hay un número medido, o no hay dato.

Comprobar solo el estado por defecto. El :hover de los enlaces, el foco, los botones deshabilitados y los placeholders se quedan fuera de casi todas las revisiones. Cada estado es una combinación de colores distinta y hay que medirla por separado.

Olvidar el modo oscuro. Una paleta que cumple en claro puede desplomarse al invertirla, sobre todo con blanco puro sobre negro puro, que produce halo y cansa la vista. El modo oscuro es un tema de color completo y necesita su propia medición.

Confiar en que el corrector automático lo ha visto todo. Las herramientas no miden el texto sobre imágenes, ni el texto dentro de un SVG, ni lo que solo aparece tras una interacción. Ahí, medición manual.

Tratar el 4,5:1 como objetivo y no como suelo. Es el mínimo legal, no una recomendación de diseño. Si puedes irte a 7:1 sin destrozar la estética, tu texto se lee mejor en el móvil, al sol y a los 60 años. Sale gratis.