Guía de accesibilidad web y color (I). Fundamentos de la percepción del color y el contraste

La accesibilidad web (en general la accesibilidad tecnológica) busca que todas las personas puedan acceder a los contenidos de Internet en igualdad de condiciones, con independencia de sus capacidades físicas, cognitivas o sensoriales. En este sentido, el acceso a la información visual se ve afectada por el uso que hacemos de los recursos gráficos, de cómo explotamos el color y el contraste en las interfaces y los contenidos.

Como veremos en otro artículo, las pautas de accesibilidad de la WCAG 2.1 establecen diferentes criterios de accesibilidad relacionados con el color y el contraste. Por ejemplo, se indica que el color no debe usarse como único medio para transmitir información, dar indicaciones o solicitar una respuesta. También establece unas ratios de contraste mínimos y mejorados entre el primer plano y el fondo para el texto, los componentes del interfaz y otros objetos gráficos. ¿Cual es el fundamento de estas recomendaciones?

Esta guía trata en una serie de artículos los principales aspectos del color y el contraste que afectan a la accesibilidad. Se estructura en tres partes:

Comenzamos explicando cómo nuestro sistema perceptivo capta la luz y crea la experiencia de color y contraste, cuales son los modelos de color que se usan en las pantallas y los interfaces y cuales son las personas que pueden estar afectadas por problemas de percepción del color y el contraste.


Bases de la percepción del color

El espectro de luz visible

Una idea básica sobre el color es que se trata una característica de la luz. Lo que conocemos como luz son en realidad ondas electromagnéticas, como también lo son los rayos X o las ondas de radio FM. Pero la luz es la parte del espectro electromagnético que los seres humanos somos capaces de percibir, y que cubre aproximadamente el rango de frecuencias de los 400nm a los 700nm. Las diferentes frecuencias de onda dan lugar a experiencias de color diferentes, por lo que la luz visible suele representarse como un espectro de color. Por debajo de los 400nm están las ondas ultravioleta y por encima de los 700nm los infrarrojos:

Espectro de luz visible entre los 400 y los 700 nanómetros.

En la naturaleza, los colores que vemos son resultado de cómo reflejan las superficies de los objetos a las diferentes frecuencias de la luz. La luz blanca contiene ondas de todas estas frecuencias al mismo tiempo, pero los diferentes objetos absorben o reflejan la luz de manera diferencial para cada frecuencia, de forma que en ocasiones un objeto emite mucha intensidad en frecuencias cortas y poca en las largas, o al contrario.

El sistema visual y la percepción del color

Realmente no hay nada en la naturaleza que diga que una onda de 400nm sea azul y otra de 700nm sea roja. Son nuestro sistema visual y nuestro cerebro quienes crean la experiencia de los diferentes colores que conocemos. Todo comienza en nuestra retina, un tejido situado al fondo de nuestros ojos, en el que hay dos tipos diferentes de receptores de la luz [2]:

  • Los bastones son receptores que no detectan matices de color, pero son muy sensibles a la intensidad de la luz: son responsables de la visión en blanco y negro. 
  • Los conos son los responsables de la visión en color y hay tres tipos de ellos especializados en la detección de diferentes longitudes de onda. Por ejemplo, los conos S (short) detectan las longitudes de onda corta que dan lugar a la experiencia del color azul, los conos M (medium) están especializado en las ondas medias que se asocian a los colores verdes y, por último, los conos L (long) detectan mayoritariamente las ondas largas de los colores rojizos. Esta especialización no significa que cada cono solo detecte un color, solo que es más sensible a unas frecuencias que otras como muestra la siguiente imagen: 
Sensibilidad a la luz de los tres tipos de conos. Los conos S tienen máxima sensibilidad entorno a los 400nm, los conos M sobre los 525, y los L sobre los 560.

De igual manera que cualquier color puede conseguirse por la mezcla aditiva de estos tres colores primarios (azul, verde y rojo), el cualquier color que experimentamos puede derivarse de la información captada por estos conos. 

Por otra parte, en nuestro sistema nervioso también existen diferentes tipos de neuronas oponentes que responden de manera opuesta (excitatoria vs. inhibitoria) a los pares de colores azul-amarillo y rojo-verde, a lo que se puede añadir otro mecanismo blanco-negro. 

En definitiva, a partir de esta respuesta diferencial de los receptores y neuronas de nuestro sistema visual, los seres humanos somos capaces de percibir miles de colores diferentes. 

La percepción del contraste

En el ámbito de la percepción, el contraste es la propiedad que nos permite distinguir unos objetos de otros, o partes de una misma escena como diferentes. La detección del contraste es una ventaja evolutiva para todos los animales, pero los seres humanos lo hemos aprovechado también como medio de transmisión de la cultura (la escritura, la pintura, o el diseño gráfico dependen de un buen contraste entre el fondo y los elementos del primer plano). 

En el ámbito del diseño web, el contraste es importante por varios motivos. Se utiliza para ofrecer una buena legibilidad entre el texto y el fondo, pero también para diferenciar visualmente diferentes regiones de una página. 

Contraste entre regiones de una página web. El contraste de color entre secciones ayuda a leer y navegar.
Estructura de secciones web. ¿Cuantas secciones tienen estas páginas? La diferencia de contraste permite identificar sin esfuerzo la estructura y jerarquía de contenidos de una página.

¿Cómo podemos definir el contraste?

A nivel físico, el contraste puede definirse como un atributo que depende de la diferencia en intensidad luminosa (llamada luminancia) entre dos áreas o superficies. El máximo de contraste se da entre el blanco y el negro, pero hay un rango amplio de contrastes posibles. En otro artículo de esta guía veremos una serie de herramientas que permiten calcular el ratio de contraste entre dos colores.

A nivel subjetivo, no solemos hablar de luminancia, sino de su equivalente psicológico: el brillo. El brillo es la luminancia juzgada por una persona, pero no es directa sino que hay otros factores que pueden influir la percepción del contraste:

  • La adaptación a la luz o la oscuridad. Nuestro sistema visual se adapta a las condiciones de la luz exterior. Si estamos a oscuras y encendemos una luz o estamos en interior y salimos fuera en un día soleado, nuestra capacidad de percibir el contraste cambiará durante un tiempo.
  • Las diferencias individuales. Hay personas que tienen dificultades con la percepción de los colores o el contraste como veremos más adelante. Pero además, las personas sin ningún déficit tienen diferente grado de sensibilidad. Lo que para una persona puede ser un buen contraste, para otra puede ser apenas perceptible.
  • El contexto circundante. El brillo que se percibe en un área depende de su color, pero también está afectado por el color del área que le circunda. Esto es así porque nuestro cerebro no ve exactamente el color que ven nuestros ojos, sino que hace una reinterpretación de la escena para que podamos reconocer objetos y escenas con mayor facilidad. Por ejemplo, fijate en la siguiente imagen:
El Contraste simultaneo del color se demuestra por dos cuadrados de igual color que se rodean de colores diferentes. El que está en un contexto más oscuro parece  más brillante que el que están en un contexto más claro.

El cuadrado central de la izquierda parece mucho más oscuro que el cuadrado central de la derecha. Sin embargo, si aumentamos la imagen de forma que no podamos ver el cuadrado grande que le rodea veremos que ambos son iguales. Este fenómeno se llama contraste simultáneo de color

Representación del color en las pantallas y en el software

A lo largo de la historia, el ser humano ha utilizado diferentes sistemas para crear y representar los colores. Sin entrar en detalle, recordaremos que en la impresión de colores existe el sistema sustractivo CMYK (Cyan, Magenta, Yellow, Key). Las impresoras a color suelen requerir cartuchos de tinta de estos colores primarios, que se mezclan en la proporción adecuada para conseguir el resto de colores. El resultado que obtenemos sobre de la tinta sobre el folio en blanco es resultado de sustraer ciertas longitudes de onda de la luz y reflejar otras.

Sin embargo, en la época de las pantallas, se utilizan principalmente los sistemas aditivos, donde los colores se expresan al sumar las diferentes longitudes de onda de la luz emitida. Hay toda una ciencia para crear y mostrar el color en las pantallas [3]. Aunque existen diferentes modelos para expresar esto, vamos a centrarnos en explicar los que son más básicos y útiles en la práctica para comprender la accesibilidad al color en la web: el espacio RGB y el modelo HSL.

El espacio de colores RGB

El espacio de colores RGB (de Red, Green, Blue) permite representar cualquier color como una mezcla aditiva de esos colores primarios en diferente intensidad. Las pantallas y monitores (ya sean de rayos catódicos, LED o plasma) transmiten imágenes mediante rayos luminosos rojos, verdes y azules, que se sincronizan para obtener las imágenes en color. 

En muchos programas de ofimática y de diseño encontraréis que cuando queremos obtener un color determinado, podemos especificarlo como una mezcla de estos tres colores RGB, en la que la intensidad de cada uno en la mezcla se representa habitualmente en una escala de 0 a 255 (1 byte). Los colores del modelo RGB pueden usar también la notación hexadecimal, que transforma la numeración de cada canal de color a una escala que va de 00 a FF. De esta forma un color RGB (255, 0, 16) pasaría a ser HEX #FF0010.

Muestra de colores primarios y gama de grises junto al selector de colores de Microsoft Office.

El modelo HSL (Hue, Saturation, Luminosity)

El modelo HSL es una representación alternativa del espacio de color RGB, que lo mejora al incorporar algunos parámetros importantes para la percepción visual. Se representa habitualmente como un doble cono cada color se define en base a tres parámetros: Matiz (Hue), Saturación y Luminancia.

Matiz de color (Hue)

Se refiere a la cualidad del color dentro del espectro de luz visible. Sin entrar en muchos detalles técnicos, podemos entender este concepto de forma similar a cómo usamos el lenguaje para hablar de los colores. Aunque en la naturaleza existen miles de colores diferentes, solemos clasificarlos en unas pocas categorías (azul, verde, amarillo, rojo, etc.) distinguibles unas de otras. Una forma de representar estos matices son las ruedas de color, como la que se muestra a continuación.

Rueda de matices de color, que muestra una gama de colores de rojo a rosado.

Muchos programas y aplicaciones que usan el modelo HSL permiten especificar el matiz con un número entre 0 y 360. Así, dentro de esta rueda de color, puede estimarse el número en función de su posición o ángulo: el 0 corresponde al rojo y 180 al cyan (180º). En ocasiones, esta numeración se transforma a una escala de 0 a 255.

Saturación 

La saturación es la pureza del color, determinada por la intensidad luminosa y la combinación de las diferentes longitudes de onda. Cuando un matiz de color está totalmente saturado, hablamos de un color puro (predominancia de unas longitudes de onda determinadas). Si le añadimos intensidad de color gris, estaremos bajando su saturación y obteniendo diferentes colores cada vez más grisáceos.

Escala de saturación de color desde el rojo puro hasta el gris.

En el modelo HSL el nivel de saturación suele indicarse en la escala de 0 a 255, o como un  porcentaje de 0 a 100%.

Luminancia

Es la intensidad de un área luminosa. Aunque los parámetros técnicos de la luminancia son complejos, puede aplicarse una escala normalizada de luminancia relativa en la que el mínimo sería el negro más oscuro y el máximo el blanco más brillante.

En la siguiente imagen, se han obtenido diferentes variaciones de mayor y menor luminancia a partir del matiz rojo puro.

Escala de luminancia del color rojo puro.

La luminancia suele indicarse como un porcentaje, de 0 a 100%, aunque también dentro del esquema 0 a 255.

Población con problemas de accesibilidad al color y contraste

Muchas personas pueden tener problemas en la percepción adecuada del color y el contraste, de forma que sufran limitaciones en el acceso a los contenidos web e interfaces gráficas. A continuación se describen los principales colectivos y grupos de personas afectados.

Déficits en la percepción del color

Los déficits en la percepción del color, comúnmente conocidos como daltonismos, son causados por déficits en el funcionamiento de los conos. Al principio del artículo decíamos que existen tres tipos de conos (S, M y L) especializados en las frecuencias cortas (azul), medias (verde) y largas (rojo). La mayoría de personas sin tricrómatas (puede usar estos tres conos correctamente y tienen visión normal), pero hay personas que tienen dificultades con alguno de ellos. Podemos hacer una clasificación de los distintos déficits en función de cómo afectan a estos receptores [1]:

Tricrómatas anómalos 

Los tricrómatas anómalos son personas que tienen los tres tipos de conos, pero no les funcionan correctamente. Se subdividen en:

  • Protanómalos, con dificultades para distinguir el rojo; 
  • Deuteranomalos, con dificultades para distinguir el verde
  • Tritanómalos, si tienen dificultad para distinguir los azules y amarillos. 

Los tricrómatas anómalos pueden ver todos los colores, pero tienen dificultad para distinguir algunos matices. A continuación se muestra una simulación de cómo se percibirá la rueda de color en cada caso.

Simulación de los déficits de color de los tricrómatas anómalos: protanomalía, deuteranomalía y tritanomalía.

Dicrómatas

Los dicrómatas carecen de un tipo de conos, por lo que su visión en color se basa solo en dos de los receptores. No es solo que dejen totalmente de percibir un color, sino también que se les hará muy difícil distinguir colores que lo contienen. Pueden distinguirse tres tipos:

  • Protanopes, si tienen problemas para percibir el rojo; 
  • Deuteranopes, si tienen problemas para percibir el verde; 
  • Tritanopes, si tienen problemas para percibir el azul. 

Una simulación de estos déficits se muestra en la siguiente imagen:

Simulación de color de la dicromatía: protanopia, deuteranopia y tritanopia.

Monocrómatas

Los monocrómatas sufren un déficit llamado acromatopsia, son personas que no poseen conos, por lo que solo pueden percibir gamas de grises. En un déficit infrecuente de origen genético, y afecta conlleva también una hipersensibilidad a la luz. Una persona puede ser monocrómata a causa de un daño cerebral (hablamos entonces de acromatopsia cerebral). En este caso los conos funcionan correctamente, pero las áreas cerebrales del cerebro están dañadas.

Simulación de ceguera al color, monocromatismo.

Personas con baja visión

Se habla de baja visión cuando existe algún tipo de déficit o deterioro que afecta a la agudeza visual o campo visual, y que no puede corregirse con gafas, operaciones ni tratamientos farmacológicos. Diferentes patologías pueden causar la baja visión, algunas de las más frecuentes son el glaucoma, la degeneración macular, retinosis pigmentaria, etc.

Las personas con baja visión pueden sufrir una pérdida del contraste y una alteración de la percepción del color, además de otras dificultades como visión borrosa, deslumbramiento, ceguera nocturna, entre otros.

Dificultades temporales y contextuales

Desde el punto de vista del diseño inclusivo, no solo las personas con discapacidad pueden tener problemas con el color y el contraste.

  • Hay muchas limitaciones temporales que puede experimentar una persona, como una operación o tratamiento ocular que le impidan ver correctamente durante algunos días.
  • También puede haber dificultades dependientes del contexto o situacionales, como pueden ser una excesiva o deficiente iluminación exterior o el que nuestro teléfono móvil deba funcionar temporalmente con un brillo reducido.

Entonces, ¿cuál es el porcentaje de la población que tiene problemas con el color y el contraste? La cantidad de personas que puede encontrar dificultades con una determinada combinación de colores puede ser mucho mayor que aquellas que tienen una discapacidad, o un problema temporal o dependiente del contexto. Una estimación del porcentaje de personas que puede tener problemas para percibir una determinada combinación de color la ofrece la herramienta WhoCanUse:

Ejemplo de la aplicación Who Can use, que muestra una estimación de cuántas personas pueden percibir una determinada combinación de color.

Personas sin discapacidad

Muchas personas sufren problemas para diferenciar colores y objetos con diferentes contrastes, aunque no tengan reconocida una discapacidad. Esas dificultades pueden manifestarse en fatiga visual, mayor tiempo necesario para leer o realizar tareas.

Por otra parte, el buen uso del color y el contraste es también una cuestión de usabilidad: un texto con alto contraste es más legible y requiere menos esfuerzo que otro con un contraste bajo, aunque podamos percibir ambos. Por ejemplo, ¿a partir de cuál de los siguientes ratios de contraste te parece que es cómodo leer?:

Ratio 1.5:1 Requisitos de accesibilidad para el color y el contraste en la web

Ratio 2:1.5 Requisitos de accesibilidad para el color y el contraste en la web

Ratio 3.5:1 Requisitos de accesibilidad para el color y el contraste en la web

Ratio 5:1 Requisitos de accesibilidad para el color y el contraste en la web

Ratio 10:1 Requisitos de accesibilidad para el color y el contraste en la web

Ratio 15:1 Requisitos de accesibilidad para el color y el contraste en la web


Este artículo sirve de introducción a la percepción visual, el uso del color en las pantallas y las características de la población que puede estar afectada por los problemas del contraste. En el próximo artículo analizamos las recomendaciones de accesibilidad de las WCAG 2.1. para contenidos web relacionados con el color y el contraste.

Referencias

[1] Goldstein, E.B. (2010). Sensation and perception (Eighth Edition). Belmont, CA: Wadsworth.

[2] Lillo, J. , Moreira, H., & Melnikova, A. (2019). Daltonismos, vidas de distinto color. Mente y cerebro, (95), 48-55.

[3] NASA, Using color in information display graphics