Cómo mejorar el contraste de color sin cambiar el color de tu marca

Toda auditoría de accesibilidad produce el mismo momento incómodo. El azul de la marca no pasa sobre blanco, el verificador marca 3.02:1 y el consejo que te dan es “elige un color accesible”. A nadie que haya estado en esa reunión le ha servido de algo. El color está en el logo. Está en la presentación. Lo aprobó alguien que no está en la sala.

La buena noticia es que ese consejo está mal, o por lo menos muy incompleto. En la mayoría de los casos puedes conservar el color.

Al contraste casi no le importa el tono

Una relación de contraste compara la luminancia relativa, es decir, más o menos cuánta luz emite el color. La luminancia depende abrumadoramente de la luminosidad. El tono aporta un poco, porque el ojo es más sensible al verde que al azul, y la saturación casi nada.

La consecuencia práctica merece decirse sin rodeos: puedes cambiar qué tan claro es un color sin cambiar qué color es. Un azul más oscuro sigue siendo, a simple vista, tu azul. Mantiene la misma asociación con la marca, pertenece a la misma familia y combina con los mismos colores secundarios. Lo que no hace es reprobar tu auditoría.

Por eso “elige otro color” es tan mal consejo. Trata el color como una sola cosa indivisible, cuando en realidad tiene una propiedad que importa para el contraste y dos que importan para la identidad.

Trabaja en OKLCH, no en hexadecimal

Si mueves un valor hexadecimal a mano, vas a cambiar el tono y la saturación sin querer. El hexadecimal es un formato de almacenamiento; no es un espacio útil para razonar sobre el color.

OKLCH separa las tres propiedades con limpieza:

• L: luminosidad, de 0 a 100%. Es la que mueve el contraste.
• C: croma, más o menos la saturación.
• H: tono, de 0 a 360°. Es la que lleva tu marca.

Fija H, fija C cuando puedas y mueve L. Como la luminosidad de OKLCH es perceptualmente uniforme (a diferencia de HSL, donde un 50% de luminosidad significa algo distinto para el amarillo que para el azul), los pasos iguales en L se ven como pasos iguales. Eso hace que el ajuste sea predecible.

CSS acepta OKLCH directamente, así que puedes publicar el resultado sin volver a convertirlo:

--brand: oklch(68% 0.14 240);      /* fails on white */
--brand-text: oklch(52% 0.14 240); /* same hue, passes AA */

Dos propiedades personalizadas, un solo tono. El color de la marca sigue siendo el color de la marca y gana una variante segura para texto.

Cuánto tienes que moverlo

Menos de lo que la gente cree. Pasar de 3:1 a 4.5:1 contra blanco suele ser un cambio de luminosidad de alrededor de 8–15%, según el tono. Es un cambio visible si pones los dos colores lado a lado, y prácticamente invisible si no.

Hay un límite real, y conviene saber dónde está. Los colores cálidos muy saturados (amarillo, naranja, verde claro) tienen un techo bajo contra blanco, porque son claros por naturaleza. Un amarillo saturado no puede llegar a 4.5:1 contra blanco con ninguna luminosidad sin dejar de ser un amarillo saturado. Cuando chocas con ese muro, las opciones honestas son bajar el croma o cambiar el fondo.

Cambiar el fondo suele ser la concesión más pequeña

Esta opción se usa poco. Cuando el color de la marca es el texto, la restricción es el color de la marca. Cuando es el fondo, tienes dos cosas que puedes mover, y el texto suele ser la menos valiosa de las dos.

Un botón con fondo del color de la marca y texto blanco que no pasa muchas veces se arregla mejor oscureciendo un poco el fondo que renunciando al texto blanco. La mayoría de las herramientas nunca lo plantean, porque están hechas para evaluar un par, no para resolverlo.

Comprueba el resultado al tamaño que vas a publicar

WCAG 2 compara dos colores e ignora todo lo demás. Eso significa que un pie de foto de 12px en Light y un título de 32px en Bold reciben la misma puntuación, y cualquiera que haya publicado un pie de foto que técnicamente pasaba sabe que así no funciona la lectura.

APCA, el algoritmo candidato para WCAG 3, puntúa el tamaño y el grosor además del color. Da algunos resultados realmente incómodos. Un texto de 14px en peso regular no puede pasar con ningún contraste, ni siquiera negro puro sobre blanco puro. Necesita 16px, o necesita negrita. WCAG 2 deja pasar ese pie de foto sin pestañear.

Ninguna de las dos cifras basta por sí sola. WCAG 2 es la norma contra la que se mide la conformidad hoy. APCA predice mejor si una persona puede leer lo que tiene delante. Cuando no coinciden, publica según la que sea más estricta.

El modo oscuro merece su propia revisión

No des por hecho que una paleta que pasa sobre blanco va a pasar invertida. La fórmula de WCAG 2 suma una constante fija de destello que domina en el extremo oscuro, lo que significa que los pares cercanos al negro pueden mostrar una relación que pasa con holgura y aun así verse apagados y turbios. Es una de las fallas concretas que APCA se diseñó para corregir.

En la práctica, el color de una marca suele necesitar dos variantes: una oscurecida para fondos claros y una aclarada para fondos oscuros. Mismo tono, mismo croma, dos valores de luminosidad. Eso es un sistema de color más que un color, y es lo que de verdad exige publicar en ambos temas.

La versión corta

1. Conserva el tono. Mueve la luminosidad.
2. Trabaja en OKLCH para cambiar solo lo que querías cambiar.
3. Si el color es un fondo, considera moverlo a él en vez del texto que lleva encima.
4. Comprueba al tamaño y grosor reales, no solo como dos muestras.
5. Genera una segunda variante para el modo oscuro en lugar de suponer que la primera se invierte bien.

El contrast checker hace las cinco cosas. Dibuja el eje de luminosidad de tu propio tono, muestra qué tramos pasan y te da el valor más cercano que pasa, ordenado según lo poco que se mueve el color.