Cómo percibimos el color y el contraste

Antes de medir ratios conviene entender qué estamos midiendo y por qué. El contraste no es una cuestión de gusto: depende de cómo funciona el ojo humano, de la diversidad de la visión entre personas, de la edad y de algo que casi nunca se tiene en cuenta al diseñar, el entorno en que se mira la pantalla. Esta lección explica las bases perceptivas del color y la luminosidad, quién tiene más dificultades con el bajo contraste y qué mide exactamente la fórmula de las WCAG (y qué no). Con esto, los criterios de las lecciones siguientes dejarán de parecer números arbitrarios.

Tono, saturación y luminosidad: tres cosas distintas

Cualquier color puede describirse con tres dimensiones:

• Tono (hue): lo que llamamos «rojo», «verde» o «azul».
• Saturación: lo intenso o apagado que es ese tono.
• Luminosidad: lo claro u oscuro que lo percibimos.

Para leer, lo decisivo es la luminosidad. El sistema visual distingue los bordes de las letras sobre todo por diferencias de claridad, no de tono. Por eso la fórmula de contraste de las WCAG solo usa la luminancia relativa: ignora el tono por completo. Dos colores muy distintos en tono pero con luminancia parecida tienen un contraste bajo, aunque «se vean diferentes».

Cuidado con el selector HSL

Muchas herramientas de diseño muestran los colores en HSL (tono, saturación, luminosidad), y es tentador pensar que dos colores con la misma «L» tendrán el mismo contraste. No es así. El amarillo puro #FFFF00 y el azul puro #0000FF tienen en HSL la misma luminosidad (50 %), pero sobre blanco el amarillo da 1,07:1 y el azul 8,59:1. El ojo es mucho más sensible al verde y al amarillo que al azul, y la fórmula de luminancia lo refleja dando un peso muy distinto a cada canal (en torno al 72 % al verde, el 21 % al rojo y el 7 % al azul).

Visión del color diversa: el daltonismo

El llamado daltonismo agrupa varias alteraciones de la visión del color, casi siempre hereditarias y mucho más frecuentes en hombres. Las principales son:

• Deuteranomalía y deuteranopia (verde): las más comunes. Rojos, verdes, marrones y naranjas tienden a confundirse.
• Protanomalía y protanopia (rojo): confusiones parecidas, y además los rojos se perciben más oscuros, a veces casi negros.
• Tritanomalía y tritanopia (azul): poco frecuentes; se confunden azules con verdes y amarillos con rosas o grises.
• Acromatopsia: visión sin color, muy rara, suele ir acompañada de baja agudeza visual y gran sensibilidad a la luz.

Lo importante para el diseño: la mayoría de las personas con daltonismo ven bien las diferencias de luminosidad. Por eso los dos remedios que verás en la lección sobre 1.4.11 y 1.4.1 funcionan: asegurar contraste de luminosidad suficiente y no confiar la información solo al tono.

Baja visión, edad y sensibilidad al contraste

La agudeza visual (leer letras pequeñas a distancia) no es lo único que importa. La sensibilidad al contraste, la capacidad de distinguir un objeto de su fondo cuando la diferencia de claridad es pequeña, se reduce con muchas condiciones habituales: cataratas, glaucoma, degeneración macular asociada a la edad (DMAE), retinopatía diabética o secuelas de un ictus. Una persona puede tener una agudeza aceptable con sus gafas y, aun así, no distinguir un texto gris claro o el borde tenue de un campo de formulario.

La Organización Mundial de la Salud, en su Informe mundial sobre la visión (2019), estima que al menos 2.200 millones de personas en el mundo tienen alguna deficiencia de la visión cercana o lejana. Y aunque no exista ninguna patología, la edad cambia la visión de todos:

• El cristalino amarillea y pierde transparencia: llega menos luz a la retina y los azules y violetas se distinguen peor entre sí.
• La pupila se hace más pequeña y reacciona más despacio, lo que empeora la visión con poca luz.
• Aumenta la sensibilidad al deslumbramiento: los fondos muy brillantes y los reflejos molestan más.

Con una población cada vez más envejecida, el contraste suficiente no es una concesión a una minoría: es la condición para que la mayoría pueda leer sin esfuerzo una sede electrónica o una banca online.

Infografía · Conceptos clave

Qué reduce el contraste que percibimos

El mismo diseño se ve muy distinto según la persona, su edad, su pantalla y el entorno

• Baja visiónCataratas, glaucoma o DMAE reducen la sensibilidad al contraste
• DaltonismoConfunde tonos, pero la luminosidad suele percibirse bien
• EdadEl cristalino amarillea, entra menos luz y aumenta el deslumbramiento
• Luz ambienteEl sol directo y los reflejos borran los contrastes bajos
• PantallaBrillo bajo, ahorro de batería, filtros nocturnos y mal ángulo de visión
• Fatiga y fotofobiaCansancio, migraña o sensibilidad a la luz reducen la tolerancia

Leer la infografía como texto

Seis tarjetas resumen los factores que reducen el contraste que llega al ojo. Baja visión: cataratas, glaucoma o degeneración macular reducen la sensibilidad al contraste. Daltonismo: confunde tonos, pero la luminosidad suele percibirse bien. Edad: el cristalino amarillea, entra menos luz y aumenta el deslumbramiento. Luz ambiente: el sol directo y los reflejos borran los contrastes bajos. Pantalla: el brillo bajo, el ahorro de batería, los filtros nocturnos y un mal ángulo de visión empeoran la lectura. Fatiga y fotofobia: el cansancio, la migraña o la sensibilidad a la luz reducen la tolerancia al bajo contraste y al deslumbramiento. La conclusión es que los umbrales de las WCAG incluyen un margen que no conviene apurar.

El entorno y la pantalla también cuentan

El diseñador suele trabajar con un monitor de calidad, bien calibrado, en una oficina sin reflejos. La persona usuaria, no. Estos factores reducen el contraste efectivo que llega al ojo:

• Luz ambiental: el sol directo sobre un móvil en la calle o una ventana reflejada en el portátil «lavan» los colores. Un contraste de 3:1 en el estudio puede quedarse en casi nada en la parada del autobús.
• Brillo de la pantalla: el modo de ahorro de batería y el brillo automático lo reducen.
• Filtros del sistema: la luz nocturna o los modos de tono cálido desplazan los colores hacia el amarillo.
• Calidad y ángulo de visión: en pantallas económicas los grises claros se confunden con el blanco cuando se miran de lado.

Por eso los umbrales de las WCAG incluyen un margen: 4,5:1 está pensado para compensar la pérdida de sensibilidad al contraste equivalente a una agudeza de en torno a 20/40, la que se asocia habitualmente a personas de unos 80 años, según explica el propio documento de comprensión del criterio 1.4.3. Diseñar justo en el límite deja sin margen a quien lee en condiciones peores.

Qué mide la fórmula de las WCAG y qué no

La fórmula que verás en la siguiente lección calcula la diferencia de luminancia entre dos colores especificados. Es objetiva y reproducible, y por eso la usan la normativa y las herramientas de auditoría. Pero tiene límites:

• No tiene en cuenta el grosor de la letra más allá de la distinción entre texto normal y texto grande. Una fuente muy fina con 4,5:1 se lee peor que una de grosor medio con el mismo ratio.
• No distingue la polaridad: da el mismo ratio a texto oscuro sobre claro que a texto claro sobre oscuro, aunque la experiencia de lectura no sea idéntica.
• Es menos precisa con colores oscuros y algunos tonos medios. Tiende a sobrestimar el contraste entre colores oscuros (dos tonos oscuros pueden alcanzar el ratio y leerse mal) y, con algunos tonos medios saturados, como ciertos naranjas o azules, hay debate sobre si refleja bien la percepción. Aun así, en casos claros acierta: sobre un naranja #FF8C00, el texto negro da 9:1 y el blanco solo 2,3:1.
• Mide los colores declarados, no los píxeles que pinta la pantalla tras el suavizado de las letras (antialiasing).

Para superar estas limitaciones se han propuesto otros métodos, como el algoritmo APCA (Accessible Perceptual Contrast Algorithm), que se ha estudiado en el marco de los trabajos de las futuras WCAG 3, todavía en borrador. Ninguno de ellos es hoy exigible: la EN 301 549 (PDF, se abre en una ventana nueva) y el RD 1112/2018 (PDF, se abre en una ventana nueva) remiten a WCAG 2.x, y su fórmula es la que cuenta en una auditoría o una reclamación. Si te interesa la evolución, la verás en el nivel 7.

Si quieres ver la definición exacta de luminancia relativa, está en el glosario de las WCAG 2.2 (W3C).

Resumen

• El contraste que exigen las WCAG es diferencia de luminosidad; el tono no cuenta. Dos colores distintos con luminancia parecida tienen poco contraste.
• La luminosidad HSL de las herramientas de diseño no predice el contraste: el ojo pesa mucho más el verde que el azul.
• El daltonismo confunde tonos, pero la mayoría de las personas que lo tienen distinguen bien la luminosidad; baja visión y edad reducen la sensibilidad al contraste.
• Luz ambiental, brillo, filtros y pantallas reducen el contraste real: los umbrales incluyen un margen que no conviene apurar.
• La fórmula de WCAG 2.x tiene límites conocidos, pero es la única exigible hoy; APCA y otros métodos son, por ahora, complementarios.