Guía de accesibilidad web y color (III). 10 herramientas para mejorar el contraste de color

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:

En primera parte de esta guía de accesibilidad web y color conocimos aspectos básicos sobre la percepción visual y las barreras de accesibilidad web relacionadas con el color y el contraste. En la segunda parte, abordamos los criterios de accesibilidad de las WCAG 2.1 sobre el uso del color,el contraste para texto y el contraste de elementos no textuales, con ejemplos de cómo deben aplicarse en el diseño de interfaces web. 

En esta última parte, recopilamos una conjunto de 10 herramientas de accesibilidad que pueden ayudarnos en el proceso de crear diseños con un ratio de contraste suficiente para cumplir las WCAG 2.1. 

Introducción: ¿Para qué evaluar el contraste de color?

En el proceso de diseño de cualquier producto interactivo, ya sea un sitio web, una aplicación móvil o cualquier tipo de software, llega el momento de elegir qué colores vamos a utilizar. En esta selección entran en juego cuestiones estéticas, de marca, negocio, usabilidad y, también, de accesibilidad.

Como veíamos en la primera y segunda parte de esta guía, hay muchas razones por las que una mala selección de los colores de nuestra web puede excluir a un número considerable de usuarios. Una de ellas es que el contraste entre el fondo y el primer plano (texto, iconos, gráficas, etc.) sea tan bajo que los usuarios no puedan percibir la diferencia.

Las WCAG 2.1,las recomendaciones más aceptadas en accesibilidad web, establecen unos ratios de contraste concretos de 3:1, 4.5:1 o 7:1 dependiendo de la situación. ¿Cómo podemos valorar si nuestros colores cumplen estos ratios?

En este artículo recopilamos 10 herramientas que pueden ayudar en esta parte del diseño. Las hemos ordenado en tres grupos, dependiendo de la intención con la que quieras utilizarlas:

  1. Validar el contraste de color. Imagina que quieres saber si los colores que usas o vas a usar tienen buen contraste. Estas herramientas te ayudarán a validar si tu selección cumple los criterios de las WCAG.
  2. Mejorar un contraste de color. Muchas veces partimos ya de un diseño que a priori tiene buen contraste, pero al validarlo descubrimos que alguna de las combinaciones cae debajo del umbral. ¿Cómo podemos modificar estos colores para que cumplamos el mínimo sin tener que rehacerlo todo de nuevo? Esta herramientas nos ayudarán a encontrar colores adecuado con una mínima variación respecto a los actuales.
  3. Generar una paleta de colores accesibles. En una situación ideal podremos elegir los colores cuando estamos ante nuestro programa de diseño favorito con el lienzo en blanco. Estas herramientas nos permiten crear desde 0 una paleta que nos ofrezca combinaciones de color accesibles, con buen contraste.

Herramientas para validar el contraste de color

1. Color Contrast Analyzer (CCA) 

CCA es una herramienta de The Paciello Group que puede instalarse en el equipo o descargarse como archivo ejecutable. Esta aplicación permite comprobar el contraste de textos y otros elementos visuales. Algo realmente útil es la funcionalidad de cuentagotas, que facilita el tomar muestras de color de páginas web u otros diseño. Otra funcionalidad interesante es el simulador de ceguera al color, que ofrece ejemplos de la experiencia perceptiva para monocromáticos, dicromáticos y tricrómatas anómalos.

Pantallazo del programa CCA, que permite comparar colores y simular déficits de color.
Fuente: CCA – The Paciello Group 

2. a11y color contrast accessibility validator 

¿Quieres validar el contraste de las combinaciones de color presentes en un sitio web? Esta herramienta permite realizar una comprobación automática de todos los pares de colores que pueden encontrarse en una página. Simplemente debes insertar la URL y la aplicación detectará los colores, validando el cumplimiento del criterio 1.4.3 de las WCAG 2.1.

Pantallazo de la aplicación a11y validator, que permite validar los colores de una página web.
Fuente: a11y color contrast accessibility validator  

3. Contrast checker de WebAIM 

Web AIM ofrece un simple pero efectivo medio para validar el contraste entre colores de acuerdo a las recomendaciones de las WCAG 2.1. Permite seleccionar los colores visualmente en la paleta, o introducirlos usando la notación del espacio RGB y el sistema HSL. De esta forma se obtiene el resultado de acuerdo a los niveles AA y AAA para texto normal, texto grande y objetos del interfaz de usuario. En el caso de que la combinación no ofrezca buen contraste, puede modificarse el indicador de luminancia (Lightness) del color de primer plano o el fondo hasta conseguir un resultado válido.

Pantallazo de WebAIM contrast checker, un validador de contraste simple.
Fuente: WebAIM Contrast Checker

4. Stark 

¿Cómo puedo integrar la comprobación de contraste dentro del proceso de prototipado en diseño? Un momento crítico en en la definición de las combinaciones de color es la generación de prototipos interactivos. Stark es un plugin para Adobe XD, Figma y Sketch que permite realizar comprobaciones rápidas de contraste y simulaciones de déficits de color directamente sobre los prototipos.

Ejemplo de funcionalidad que ofrece Stark para comprobar el ratio de contraste.
Fuente: Stark

Herramientas para mejorar el contraste de color

5. Colorable

¿Quieres explorar rápidamente diferentes combinaciones de color? Colorable ofrece un panel de mandos con sliders para el matiz de color (hue), saturación y luminancia de los colores. Estos pueden ajustarse para obtener un indicador del ratio de contraste y la validación del criterio de la WCAG 2.1 correspondiente.

Pantallazo de Colorable, aplicación que permite modificar los valores de un color para validar su ratio de contraste.
Fuente: Colorable de JXNBLK Brent Jackson

6. Accessible color generator 

Una de mis combinaciones de color no tiene suficiente contraste, ¿como lo arreglo sin hacer cambios en toda la paleta? Muchas veces el color está muy cerca de ser válido, basta con modificar alguno de los parámetros. Esta herramienta puede hacerlo por tí, ofreciendo la mínima variación posible de un color que permita cumplir los requisitos AA o AAA.

Pantallazo de Accessible color generator, que ofrece variaciones de colores que permiten cumplir las recomendaciones WCAG.
Fuente: Accessible color generator by Learn UI Design

Extra: Una herramienta similar a esta es la que ofrece Accessible colors.

7. Color review 

¿Hay una forma de explorar visualmente cuáles son mis alternativas de color una vez tengo decidido uno de ellos? Color review permite explorar el espacio de color dentro de los límites que marcan los ratios de contraste. Así podemos visualizar qué posibilidades hay si quiere cumplir con los requisitos AA o AAA.

Pantallazo de Color review, una herramienta que permite explorar visualmente el espacio de color para elegir un buen contraste.
Fuente: Color review

Herramientas para generar paletas de colores accesibles

8. Palett.es

¿Cómo obtener inspiración para crear paletas de colores con buen contraste? A menudo las personas que trabajan en diseño necesitan inspiración e ideas para crear paletas de colores desde cero. Hay muchas herramientas y recursos para ello, pero en muchas ocasiones los resultados son vistosos pero nada accesibles. Palett ofrece paletas a partir de un color determinado, con un análisis sobre su ratio de contraste, cumplimiento de los criterios de las WCAG 2.1 y simulaciones para diferentes déficits en la visión de color.

Pantallazo de palett, que ofrece combinaciones de colores accesibles y simuladores de ceguera al color.
Fuente: Palett

9. Colorsafe

¿Qué opciones tengo para el color del texto si ya tengo predefinido el color de fondo? En ocasiones el color del fondo ya está predeterminado en blanco (u otro color), con lo que las opciones para el primer plano son más limitadas. Esta herramienta permite explorar la gama de colores que permiten cumplir con las recomendaciones a partir de un fondo y tamaño de fuente determinado.

Fuente: Colorsafe

10. Accessible color palette builder

¿Qué ocurre cuando se utilizan varios colores en un mismo sitio web? ¿Cómo asegurarme de qué combinaciones tienen un contraste suficiente y cuáles no? Esta herramienta ayuda a los diseñadores a crear paletas de colores que sean conformes a los estándares de accesibilidad. El primer paso es seleccionar los colores a utilizar en nuestro diseño:

Pantallazo de Accessible color palette builder, que permite en un primer paso seleccionar los colores.

Una vez definidos los colores, se construye una matriz con todas las combinaciones posibles de fondos y primer plano, con indicaciones sobre cuáles de ellos cumplen un ratio mínimo de 4.5:1.

Pantallazo de accessible color palette builder, ofrece en un segundo paso una matriz con todas las combinaciones posibles y su ratio de contraste.
Fuente: Accessible color palette builder