Qué mide realmente una relación de contraste (y por qué importa el 4,5:1)

El texto en gris claro sobre un fondo blanco queda limpio en el mockup, pero resulta una barrera para cualquiera que tenga los ojos un poco cansados, un poco mayores o un poco diferentes. Que un texto sea legible no es cuestión de gusto, es algo que se puede medir, y esa medida es la relación de contraste. Una vez que sabes qué está comparando ese número, las reglas de accesibilidad que se construyen sobre él dejan de parecer arbitrarias.

En resumen: una relación de contraste compara cuánto más claro es tu texto frente a su fondo, en una escala de 1:1 (idénticos, invisible) a 21:1 (negro sobre blanco). WCAG fija 4,5:1 como mínimo para el texto normal del cuerpo y 3:1 para el texto grande, para que la mayoría pueda leerlo. El número sigue la luminancia, no el tono, y por eso algunas combinaciones de colores vivos siguen fallando.

La escala: de 1:1 a 21:1

Una relación de contraste es un solo número que indica cuánto se diferencian dos colores en claridad. Va desde 1:1 en el extremo inferior hasta 21:1 en el superior. En 1:1, el texto y el fondo tienen la misma claridad, así que el texto desaparece dentro de él. En 21:1, el máximo, tienes negro puro sobre blanco puro, la combinación más legible que existe.

Todo lo que es legible vive entre esos dos extremos. La relación se escribe como un par, por ejemplo 4,5:1, lo que significa que el más claro de los dos colores tiene 4,5 veces más luminancia que el más oscuro. Cuanto más alto, más fácil de leer. El objetivo de ese número es convertir un juicio impreciso, ¿se ve bien?, en algo que puedes comprobar y aprobar o suspender.

Mide luminancia, no color

Esta es la parte que sorprende a la gente: la relación no tiene que ver con qué colores elegiste, sino con lo claro que es cada uno. El término técnico es luminancia relativa, el brillo percibido de un color una vez que tienes en cuenta que el ojo es mucho más sensible al verde que al azul. La fórmula pondera los canales de rojo, verde y azul en consecuencia y luego compara los dos resultados.

Por eso dos colores que se ven muy distintos pueden tener un contraste pésimo entre sí. Un rojo saturado sobre un verde saturado es una combinación chocante, pero si ambos tienen una luminancia parecida, el texto encima resulta realmente difícil de leer, sobre todo para alguien con una deficiencia de la visión del color que se apoya más en las diferencias de claridad que en el tono. El contraste es una diferencia de brillo, no un choque de colores, y confundir ambas cosas es como los diseños bonitos terminan siendo ilegibles. Puedes comprobar cualquier par de texto y fondo frente a los umbrales de WCAG con un verificador de contraste en color.hivly.net y ver la relación exacta antes de publicarlo.

De dónde sale el 4,5:1

El número 4,5:1 no es una preferencia del diseñador, es el umbral que las Web Content Accessibility Guidelines fijan para el texto del cuerpo de tamaño normal en el nivel AA, el nivel al que aspira la mayor parte de la web. Se eligió como el punto por debajo del cual el texto corriente se vuelve difícil de leer para una parte considerable de las personas, incluidas las que tienen visión moderadamente reducida o una leve deficiencia de la visión del color. Si superas ese listón, tu texto del cuerpo es legible para la gran mayoría.

El texto grande tiene un objetivo más fácil, 3:1, porque las letras más grandes y gruesas se leen con menos contraste. Los trazos son más anchos y las formas más grandes, así que el ojo necesita menos diferencia de brillo para distinguirlas. Esa es la lógica detrás de los dos números: cuanto más pequeño y fino es el texto, más contraste necesita para seguir siendo legible, así que las reglas piden más donde el texto es pequeño y menos donde es grande.

AA, AAA y cómo elegir tu mínimo

WCAG define dos niveles, y la diferencia está en lo estricto que tiene que ser el contraste. AA, el objetivo habitual, pide 4,5:1 en texto normal y 3:1 en texto grande. AAA, el nivel estricto, lo sube a 7:1 en texto normal y 4,5:1 en texto grande. AAA es más difícil de diseñar porque descarta muchos estilos suaves de bajo contraste, pero hace que el contenido sea legible para personas con baja visión más acusada.

La mayoría de los sitios apuntan a AA y lo tratan como el mínimo, no como la meta. Si tu público es más bien mayor o incluye a muchos lectores con problemas de visión, apostar por AAA en tu texto principal es una decisión razonable. En cualquier caso, el paso es el mismo: decide tu mínimo, mide cada par de texto y fondo frente a él, y corrige los que se queden cortos antes de que alguien tenga que entornar los ojos. El número elimina las conjeturas, que es justamente la razón por la que existe.