Guía de accesibilidad web y color (II). Recomendaciones de las WCAG 2.1 para color y contraste

¿Te gusta este artículo? Compártelo

Este artículo pertenece a la guía de accesibilidad web y color, que se organiza en tres partes:

• Parte I. Fundamentos de la percepción del color y el contraste
• Parte II. Recomendaciones de las WCAG 2.1 para color y contraste [este artículo]
• Parte III. 10 herramientas para mejorar el contraste de color

Comenzábamos revisando algunos aspectos básicos sobre la percepción del color y el contraste, cómo se definen los colores en las pantallas, y las barreras de accesibilidad web a las que se enfrenta parte de la población (p.ej. aquellas que sufren déficits de visión).

La guía continua en este artículo explicando y mostrando ejemplos de los criterios de accesibilidad de las WCAG 2.1 que hay que seguir para asegurar que el color y el contraste no suponen un problema en el acceso a la información.

Introducción: El color y el contraste en las WCAG 2.1

¿Qué son las WCAG 2.1? 

Si has llegado hasta aquí posiblemente ya las conoces, pero no está mal recordar lo básico. Las Web Content Accessibility Guidelines (WCAG) del W3C son el estándar de facto sobre accesibilidad web. Buena parte de la legislación y normativa de obligado cumplimiento a nivel internacional toma estas guías como referencia para definir si un sitio web es accesible o no. Las WCAG se dividen en 4 principios básicos, según los cuales la web debe ser:

1. Perceptible
2. Operable
3. Comprensible
4. Robusta 

Estos principios se dividen en 13 pautas (más generales) y 78 criterios de conformidad (más específicos) que deben cumplirse para asegurar el acceso a los contenidos web de las personas con discapacidad y otros colectivos [1] [4].

Las WCAG establecen tres niveles de conformidad: A (bajo), AA (medio) y AAA (alto). Cada criterio de conformidad se asigna a un nivel: del total de 78 criterios hay 30 de nivel A, 20 de nivel AA y 28 de nivel AAA. El nivel A agrupa los criterios que son totalmente necesarios para permitir el acceso, mientras que el nivel AAA incluye criterios cuya misión es mejorar la usabilidad y ampliar el número de personas que podrán acceder a él. El nivel medio (AA) se toma como referencia normalmente en la legislación. Para conseguir la conformidad en un nivel determinado hay que cumplir también los criterios de los niveles inferiores (es decir, para que una web sea accesible a un nivel AA hay que cumplir los 30 criterios A y los 20 AA).

Hacer la información distinguible

El primer principio de las WCAG 2.1 es que la información que se transmite debe ser perceptible. Una de las características que contribuyen especialmente a esto es que los elementos sean distinguibles, separando el fondo del primer plano (pauta 1.4). Puede entenderse que el uso del color y el contraste son elementos importantes dentro de esta pauta, ya que las personas con dificultades de visión pueden tener problemas en diferenciar objetos si esto solo depende del color, o si no hay un contraste mínimo entre los elementos.

Un concepto importante aquí es el de ratio de contraste. Mucha gente piensa que para que dos colores tengan buen contraste deben ser diferentes en matiz (por ejemplo, amarillo sobre azul). Aunque puede obtenerse buen contraste combinando colores complementarios o colores cálidos y fríos, es mucho más fácil obtener buen contraste con colores con un matiz de color similar pero de diferente brillo [3]. Esto es así porque el ratio de contraste se refiere a la diferencia de luminancia (en realidad, de luminancia percibida) entre el fondo y el primer plano. El rango suele variar entre 1:1 (ningún contraste) y 21:1 (contraste máximo)

Veamos un ejemplo. En el modelo HSL la forma más efectiva de obtener un buen ratio de contraste entre dos colores es que su luminosidad (L) sea muy diferente. En las siguientes combinaciones de color, tanto el cuadrado central (primer plano) como el cuadrado de fondo tienen exactamente el mismo matiz de color y la misma saturación, pero pueden obtenerse fácilmente diferentes ratios de contraste modificando la luminosidad del cuadrado central.

Criterios de conformidad relacionados con el color y el contraste 

Las WCAG 2.1 recogen 5 criterios que hacen referencia de manera específica al uso del color y el contraste. Estos son:

1. Sobre el uso del color

• Criterio 1.3.3. Características sensoriales (Nivel A): Las instrucciones para operar o entender el interfaz no deben basarse en características sensoriales como el uso del color.
• Criterio 1.4.1. Uso del color (Nivel A): Especifica que el color no debe ser el único medio para transmitir la información.

2. Sobre el contraste

• Criterio 1.4.3. Contraste mínimo (Nivel AA): Establece el contraste mínimo que debe tener el texto y las imágenes de texto.
• Criterio 1.4.6. Contraste mejorado (Nivel AAA): Detalla los ratios de contraste necesarios en texto e imágenes de texto para tener una experiencia mejorada.
• Criterio 1.4.11. Contraste de elementos no textuales (Nivel AA): Aborda de manera específica los requisitos de contraste para elementos no textuales, como los componentes del interfaz y los objetos gráficos.

En las siguientes secciones se describen estos criterios de accesibilidad mostrándose ejemplos concretos de errores y buenas prácticas.

El uso del color

Criterio 1.3.3. Características sensoriales (Nivel A)

La primera referencia al color y el contraste la encontramos en la pauta 1.3 sobre contenido adaptable. Esta se refiere a que los contenidos puedan ser accedidos por los usuarios de diferentes maneras, con diferentes agentes de usuario y dispositivos. En concreto, el criterio 1.3.3. se refiere a que las instrucciones ofrecidas para entender y operar contenidos no se basan solo en características sensoriales de los componentes como la forma, tamaño, localización visual, orientación, sonido o el color. Un fallo en este criterio sería incluir instrucciones del tipo “Para continuar pulse el botón azul”.

Para cumplir este criterio en lo referido al color, las WCAG dirigen al criterio más específico 1.4.1, que como veremos trata de evitar el mal uso del color no solo en las instrucciones sino también en otros elementos de la web.

Criterio 1.4.1. Uso del color (Nivel A)

Estamos acostumbrados a usar el color para comunicar información, a veces de manera inconsciente. Rojo, amarillo y verde no son solo colores del semáforo, sino que los usamos muchas veces para identificar aquello que está bien, regular y mal. También podemos usar el color para enfatizar o destacar contenidos de texto (p.ej. un subrayado amarillo) o para identificar cambios de estado (p.ej. un enlace que cambia de color cuando acercamos el puntero). También es habitual el asignar colores a diferentes variables en la visualización de datos, de forma que podemos interpretar gráficas visualmente. Pero muchos de estos códigos pueden carecer de significado para las personas que no pueden distinguir colores.

El criterio 1.4.1 de las WCAG establece que el color no debe ser el único medio visual para transmitir información, indicar una acción, pedir una respuesta o distinguir un elemento visual. Esto no significa que no usemos el color, sino que este no sea el único medio. Puede hacerse la información redundante utilizando formas, posición y texto. Una buena metáfora del uso de información redundante es la del semáforo:

En el semáforo clásico para vehículos se usa verde, amarillo y rojo para indicar cómo debe comportarse el tráfico. La información se transmite por color, pero además se comunica por la posición de las luces. Es decir, una persona que sea ciega al color podría conducir guiándose por el código de posición abajo, intermedio, arriba. Un ejemplo aún mejor es el del semáforo de peatones, que nos transmite que debemos avanzar o esperar mediante los colores verde o rojo. Aquí la persona ciega al color también podría guiarse por la posición de las luces (arriba – abajo), pero además puede basarse en que la forma de las siluetas es diferente (una representa a un peatón parado, el otro andando).

Ejemplos de buen y mal uso del color

Mensajes de estado

Muchas veces utilizamos el color rojo, verde, azul o amarillo para indicar diferentes estados del sistema o para comunicar un error. Este no debería ser el único medio, e idealmente debería poderse usar medios redundantes de comunicación. Por ejemplo, el siguiente mensaje de error se comunica en color rojo:

Podría pensarse que el texto del mensaje ya es suficiente explícito para indicar lo que ha pasado, pero el color se utiliza también aquí para llamar la atención sobre una acción crítica. A una persona ciega al color podría pasarle desapercibida. 

Una mejor forma de comunicar este error sería la siguiente:

En este caso se ha indicado de forma explícita mediante texto que se trata de un error, y además hemos incluido un símbolo indicativo que no depende tanto del color para llamar la atención.

Instrucciones para interactuar basadas en el color

El siguiente ejemplo muestra una situación muy común, en la que la persona debe seleccionar los asientos que desea ocupar para un evento o en un medio de transporte. Muy a menudo, el patrón de diseño UX/UI utilizado muestra una imagen como la de la izquierda, en la que la disponibilidad se comunican sólo mediante el color, indicando instrucciones como “Elija su asiento entre aquellos coloreados en verde. Los asientos rojos ya están ocupados”. Una solución accesible es utilizar algún símbolo que también los distinga, como muestra la imagen de la derecha. En ese caso pueden darse las instrucciones “Elija su asiento entre aquellos libres coloreados en verde. Los asientos rojos marcados con una X ya están ocupados.”

Gráficas y representación de datos

En la representación de datos en gráficas el color se usa para diferenciar variables y comunicar magnitudes, lo cual puede causar que algunas personas no puedan comprender la información. Por ejemplo, una persona con ceguera al color puede tener dificultades para relacionar la leyenda con cada color del siguiente gráfico circular: 

Para solucionarlo, pueden usarse dos técnicas:

1. Asegurarse de que la información también se presenta en texto. En la gráfica inferior, a la izquierda, se muestra el mismo gráfico donde se han añadido los nombres de cada categoría junto a cada sector.
2. Usar patrones o tramas además del color. En la gráfica inferior, a la derecha, los colores sólidos se han sustituido por tramas. 

Contraste de texto

Uno de los aspectos más importantes en un sitio web es la legibilidad del texto, para lo cual debe haber un buen contraste entre el color de la fuente y el fondo. Las WCAG establecen dos niveles de conformidad, contraste mínimo (Nivel AA) y contraste mejorado (Nivel AAA).

Criterio 1.4.3. Contraste mínimo (Nivel AA) 

El criterio 1.4.3 establece que la presentación de textos e imágenes de texto debe tener un ratio de contraste de al menos 4.5:1, con las siguientes excepciones:

• Texto grande: Para el texto grande (o imágenes de texto grande), es suficiente un ratio de 3:1. ¿Qué se entiende por texto grande? Es aquel con al menos 18 puntos de tamaño o 14 puntos si está en negrita. Esto es así porque se considera que un texto grande con caracteres más amplios puede leerse aunque tenga un contraste menor. 
• Texto e imágenes accesorias: No hay requisitos de contraste si el texto o las imágenes del texto forman parte de componentes inactivos del UI (por ejemplo, un botón de enviar que está deshabilitado hasta que se rellena el formulario), son puramente decorativas, no son visibles para ningún usuario o forman parte de imágenes con muchos otros contenidos visuales.
• Logotipos: Si el texto forma parte de un logotipo o nombre de marca, no hay requisitos de contraste. 

Criterio 1.4.6. Contraste mejorado (Nivel AAA)

La presentación de textos e imágenes de texto debe tener un ratio de contraste de al menos 7:1, con las siguientes excepciones:

• Texto grande: Para el texto grande (o imágenes de texto grande), es suficiente un ratio de 4.5:1.
• Texto e imágenes accesorias: No hay requisitos de contraste si el texto o las imágenes del texto forman parte de componentes inactivos del UI, son puramente decorativas, no son visibles para nadie o forman parte de imágenes con muchos otros contenidos visuales.
• Logotipos: Si el texto forma parte de un logotipo o nombre de marca, no hay requisitos de contraste.

Ejemplos de buen y mal contraste de texto

Contraste texto – fondo

Como ya se ha indicado, el que un texto cumpla los criterios de contraste mínimo y mejorado no solo dependerá de su ratio de contraste, sino también de su tamaño y de si el texto está en negrita o no. La siguiente tabla ofrece algunas muestras.

Imágenes de texto

Siempre que sea posible hay que evitar ofrecer información textual dentro de una imagen. Pero cuando el texto es parte de anuncios u otro material gráfico hay que cumplir los mismos ratios de contraste que si fuese texto normal. Esto puede ser complicado cuando el texto se superpone a un gradiente de color o una fotografía como en la siguiente imagen:

Una solución para ello es añadir un fondo sólido a la parte donde se presenta el texto, de forma que el contraste sea mayor:

Contraste de componentes de la interfaz y objetos gráficos

Criterio 1.4.11. Contraste de elementos no textuales (AA)

La presentación visual de los componentes del UI y los objetos gráficos deben tener al menos un ratio de 3:1 frente a los colores adyacentes: 

• Componentes del interfaz de usuario (UI): La información visual requerida para identificar a los componentes y estados del interfaz de usuario, excepto para componentes inactivos o donde la apariencia de componente esté determinada por el agente de usuario y no modificada por el autor.

• Objetos gráficos: Partes de los objetos gráficos requeridos para comprender el contenido, excepto cuando una presentación particular de los gráficos sea esencial a la información que se comunica. Esto afecta a iconos, infografías y visualizaciones de datos. 

Ejemplos de contraste de elementos no textuales

El contraste en los componentes del UI

Algunos de los componentes más frecuentes son los que encontramos en los formularios, como campos de texto, casillas de verificación, botones, etc. Todos estos deben cumplir un ratio de contraste de 3:1, aunque hay algunas particularidades en cómo deben hacerlo:

Botones

Un botón es un componente que solía consistir en un área activable de un color diferente al fondo, delimitado por un borde y que incluye en su interior un texto indicando una acción. Pero esto ya no es así, y puede haber botones que consistan en solo una palabra, que tengan o no tengan borde, o que contenga o no texto. Todos los siguientes pueden considerarse botones:

Aunque el usuario pueda beneficiarse de un buen contraste entre el área activable y el fondo, lo que realmente es importante es el contraste entre el texto o icono y su contexto más inmediato.

Hay una excepción al cumplimiento del ratio 3:1 en los botones, y es cuando estos están inactivos o deshabilitados (disabled). Por ejemplo, si el botón no puede activarse hasta que se rellenen los campos de un formulario, no existen requisitos de contraste. Para el resto de estados posibles (hover, active, focused, etc.) deben mantenerse el ratio 3:1.

Campos de texto 

El contraste se aplica sobre el borde del campo o indicador visual, o entre el interior del campo y el fondo oscuro cuando esta es la forma de diferenciarlos.

Otros componentes y controles:

En diferentes controles como desplegables, casillas de verificación, conmutadores, etc. debe prestarse especial atención al elemento que indica la interacción o que permite conocer su estado. Por ejemplo, debe poder distinguirse que hay una casilla de verificación vacía, pero también si está marcada o no, lo cual implica que la marca (check) tenga suficiente contraste con el interior de la casilla.

El contraste en los objetos gráficos

Los iconos y otros elementos gráficos son cada vez más usados, no solo como recursos estéticos sino también para transmitir información. ¿Cómo asegurarnos de que se cumplen los criterios de accesibilidad sin limitar la creatividad? Algo importante es que un icono o recurso gráfico no debe cumplir la ratio de contraste en su totalidad, sólo aquellas parte o elementos necesarios para comprender su significado. Veamos un ejemplo:

En la imagen anterior (izquierda), el icono que representa una moneda de euro tiene una sombra que no cumple el ratio de contraste con el fondo. Sin embargo, esta no es relevante ya que lo importante para comprender el significado es el símbolo €, que si tiene suficiente contraste. En el ejemplo de la derecha se representa un carrito de la compra con una flecha y tres frutas. El contraste de una de las frutas con el fondo no es suficiente, pero no éste no es necesario para comprender el icono ya que su significado está claro si solo vemos el carrito y dos de las frutas.

Respecto a gráficas y otras visualizaciones de datos, una recomendación básica es cumplir en primer lugar el criterio 1.4.1 sobre uso del color. Por ejemplo, gráficos de barras o circulares deberían incluir etiquetas de texto, y no distinguir las variables solo por el color, sino usar también otras pistas como tramas o patrones. Pero además, hay que conseguir un contraste suficiente entre segmentos adyacentes. Por ejemplo, el siguiente gráfico cumple 1.4.1 porque no se usa solo el color para transmitir la información, pero no cumple 1.4.11 porque algunos de los sectores no tiene el suficiente contraste con los sectores adyacentes o el fondo:

Para cumplir el criterio 1.4.11, podemos usar dos técnicas que se ilustran en las siguientes imágenes:

En la gráfica anterior (izquierda), se han cambiado los colores de los sectores para que tengan suficiente contraste unos con otros y con el fondo. En la gráfica de la derecha se mantienen los colores, pero se añade un línea negra que separa los diferentes sectores que sí tiene suficiente contraste con cada uno de los colores. 

Referencias

[1] Campbell,A., Cooper,M. y Kirkpatrick, A. (2018). Understanding WCAG 2.1. 

[2] Coady, G. (2017). Color accessibility workflows. New York: A Book Apart.

[3] Horton, S., y Quesenbery, W. (2014). A web for everyone: Designing accessible user experiences. New York: Rosenfeld Media.

[4] Revilla, O, y Carreras, O. (2018). Accesibilidad web. WCAG 2.1 de forma sencilla

En un próximo artículo de esta guía describiremos una serie de herramientas que ayudan a cumplir los requisitos de contraste en las WCAG 2.1.

¿Te gusta este artículo? Compártelo