Paletas de color accesibles para tu interfaz con la WCAG

La accesibilidad promueve buenas prácticas y guías de realización para ampliar la puerta de acceso a todos los tipos de usuario dentro de un entorno, ya sea físico o digital, y las paletas de color accesibles son una de las formas de mejorar el acceso en general. 

En internet, este se manifiesta por la WCAG o Directrices de Accesibilidad para el Contenido Web, una guía de recomendaciones y normas enfocado en el desarrollo web accesible con el fin de promover la misma experiencia positiva para la amplia variedad de usuarios, contando siempre con las divergencias físicas, sensoriales o cognitivas. Proporciona a los profesionales del mundo digital todo lo necesario para crear webs que no supongan un límite de entrada a ninguno, ya sea por divergencias visuales y/o cognitivas. 

El acceso principal a la información digital se hace visualmente, existiendo unos actores principales que condicionan el cómo se muestra una interfaz: el color en las interfaces como motivo diferenciador de lo que vemos depende enormemente del uso que pueda darle el diseñador o el desarrollador de una página web. 

Hemos de considerar que no todo el mundo accede a la información de la misma manera, y al respecto del acceso visual, nos encontramos con esa misma situación: divergencias visuales como la ceguera parcial, daltonismo y variantes (como la acromatopsia, tritanopia, protanopia…) condicionan la vida actual de muchos usuarios que mantienen dificultades varias a la hora de poder desempeñar acciones normales en internet. 

Es por esto, que la WCAG y su última actualización de directrices (2.2, publicada en octubre de 2023), agrupa una serie de indicaciones sobre el color que deben de ser tenidas en cuenta por todos los profesionales que intervienen en la experiencia de usuario.

Dando un repaso a la WCAG como directriz matriz de la accesibilidad en Web, los 4 principios en los que se basa para indicar qué debe de perseguir una web accesible son:

• Perceptible
• Operable
• Comprensible
• Robusta

Al respecto de la perceptibilidad, esta promueve la idea de que toda la información de nuestra web pueda ser perceptible por el usuario en el contexto en el que se encuentre, separado por el fondo. En cuestiones del color, es de vital importancia este punto puesto que junto al contraste son los pilares en los que se cimienta el éxito de este principio. 

El contraste de colores distinguidos por su matiz, y aplicados conformemente uno para cada parte de la interfaz (elemento o fondo) puede ser medido por la ratio de contraste, unidad de medida basado en la diferencia de la luminancia (brillo de un color) entre aquellos elementos encontrados en primer plano y el fondo, y que se expresa en una escala que va desde el 1:1, para expresar cero contraste (texto blanco sobre fondo blanco), y el 21:1, para expresar el mayor contraste posible (texto negro sobre fondo blanco). 

Obviamente, el contraste se puede conseguir seleccionando dos colores bien diferenciados por su matiz, es decir, cualidad mínima por la que diferenciamos un color u otro; sin embargo, los contrastes también pueden darse para dos colores de un mismo matiz cuya luminancia diferencia uno del otro. Por ejemplo, un fondo verde muy claro, con un elemento en primer plano de un color verde muy oscuro.

La WCAG recoge algunas indicaciones claves sobre qué y qué no hacer con el color y el contraste en su uso dentro de la creación de páginas accesibles. Estas indicaciones vienen divididas en una escala de tolerancia o conformidad AAA indica un alto nivel accesibilidad, AA un nivel moderado y AA bajo. 

Hagamos un repaso a algunas de estas indicaciones según su nivel de tolerancia:

AAA – Contraste mejorado 

El criterio 1.4.6 sobre el contraste mejorado indica que los textos y sus respectivas imágenes deben de tener una ratio de contraste mínimo de 7:1, con ciertas excepciones. El texto grande (mínimo 4.5:1), el texto con imágenes de acompañamiento (siempre y cuando sean decorativas, o no sean visibles para nadie) o logotipos, donde no hay ningún tipo de requisito.

AA – Contraste mínimo

El criterio 1.4.3 señala que el contraste mínimo que pase una accesibilidad moderada será a partir de una ratio de contraste de 4.5:1, en el caso de textos grandes con un tamaño de letras en 18 puntos (o 14 puntos en negrita), es suficiente con una ratio de 3:1. 

AA – Contraste de elementos no textuales

El criterio 1.4.11 señala ciertas especificaciones sobre requisitos de contraste para aquellos componentes del UI o elementos gráficos que puedan formar:

• Sobre los componentes de la interfaz, debe de tener una ratio mínima de contraste del 3:1 para aquellos elementos que requieran o puedan ser interactuaras por el usuario; esto no engloba por ende a los componentes en estados de inactivos, o en aquellos donde su apariencia pueda ser modificada por el usuario.
• Componentes visuales, siempre y cuando sean necesarios para comprender el contenido, mantienen una ratio mínima de 3:1. Esto suprime la necesidad de ratio mínima a aquellos elementos únicamente decorativos. 

Obviamente esto nos funciona para paletas cromáticas variadas y amplias sin ningún tipo de problema, encontrando con facilidad combinaciones balanceadas y con gran posibilidad de ser de alta accesibilidad. Sin embargo, siempre puede ocurrir todo lo contrario: nuestra paleta cromática limitada con los que seguir unos colores de marca que no pasan accesibilidad. En esos casos, contamos con varias opciones que nos pueden salvar de limitar nuestras interfaces a usuarios con divergencias visuales.

Tips para conseguir paletas de color accesibles

Utilizar colores similares de los que partimos

En aquellos casos en donde nos podemos encontrar por muy poco a pasar accesibilidad, podemos seleccionar colores con matices y luminancias parecidos y trabajar en contrastarlos lo suficiente para que generen una ratio de contraste accesible. Siempre y cuando el punto de inicio tenga una ratio de contraste cerca de ser accesible, el cambio a colores similares será imperceptible. 

Reutilizar colores aplicados a textos grandes

Si dentro de tus paletas de color accesibles la combinación para los textos grandes cumple con el requisito de 3:1, puede ser usado para unos cuantos elementos de nuestra interfaz, por lo que nos puede salvar en parte elementos en los que no encontramos combinaciones válidas: elementos como los títulos o elementos gráficos grandes pueden aplicar los colores de los textos grandes. 

Esto también aplicaría para responsive: los textos grandes al ser reducidos a móvil, siempre y cuando sean lo suficientemente grandes aún en esas pantallas, aplicarían sus colores en esta norma. 

Aplica acentos a tu paleta

Para aquellos colores de marca que no nos puedan servir para ningún requisito de ratio de contraste aplicado a texto, tienen la posibilidad de poder ser usados como acentos. Estos colores, al ser aplicados en elementos decorativos, no necesitarán de ser pasados por accesibilidad, y se mantendrán en nuestra interfaz como elementos de marca. 

Para terminar, queremos recalcar que existen múltiples herramientas que nos pueden ayudar no solo a descubrir si la paleta por la que partimos sería accesible, sino también saber para qué elementos serviría una combinación de colores o que optativas existen para llegar a un determinado grado de accesibilidad, como Stark, Color Contrast de la WCAG, o el área de accesibilidad de Adobe Colors. 

---

Foto de portada de Quinten Braem en Unsplash.