Accesibilidad web a través del diseño: el contraste de color

¿Qué son los contrastes de color accesible?

El contraste de color es un elemento vital al hablar de accesibilidad en diseño de producto digital. Por accesible nos referimos a que el texto o la interfaz va a poder ser utilizada con eficiencia por todos los usuarios, aunque tengan algún defecto visual. ¿Y cómo medimos esto? Para ello hay unos estandares llamados W3C/WCAG en el que se detallan unas guías donde podemos comprobar cuanto contraste debe haber entre nuestros colores para ser más o menos accesible.

En estas guías se delimitan a través unos niveles de accesibilidad en los que nuestros colores pueden tener más eficiencia accesible en función a una puntuación marcada por un ratio de contraste. Este ratio, además, es crucial e importantísimo para elementos claves de la interfaces que se pueden convertir en posibles pain points para nuestros usuarios. No obstante, hay que tener en cuenta que estas guías no siempre funcionan en aplicacion práctica, por lo que es importante usarlas como referencia, pero no como algo dictatorial. Tu diseño debe ayudar a las personas, y para ello muchas veces el ojo humano no funciona como el de un robot.

Por ejemplo, en el caso de muchos botones con sus CTA, visualmente tenemos mas contraste visual a primera vista con el texto en blanco sobre el fondo de color pero las herramientas con las que medimos el ratio de accesibilidad nos muestran lo contrario.

1

¿Por qué es importante?

En el panorama digital en el que vivimos la mayoría las personas tienen acceso a información, y sus dispositivos pueden ser de resoluciones diferentes. Esto, unido a que el % de personas tienen deficiencias visuales (daltonismo,....) hace que preparar unas interfaces accesibles para todos no sólo sea un deseo si no una obligación.

Cabe recordar el sonado caso con Domino’s pizza, por lo que ya no hay excusa ni justificación para no hacer nuestros diseños accesibles. Esto no debería de ser ni comentado, pero desgraciadamente los diseñadores siempre lo dejamos para lo último, o directamente no le prestamos atención. Es una de los principales debilidades de muchos diseñadores. Para ello es clave el tener empatía con los usuarios y pensar que no todos los usuarios tienen su agudeza visual.

¿Como pruebo si mi contraste de color es accesible?

Como comentábamos antes, se delimitan a través unos niveles de accesibilidad en los que nuestros colores pueden tener más eficiencia accesible en función a una puntuación marcada por un ratio de contraste. Los diferentes niveles de accesibilidad son:

Fallo - Cuando nuestra puntuación es menos de un 3.0

AA - Cuando tenemos al menos un contraste de 4.5

AAA - Con una exposicion de al menos 7.0
 

¿Qué herramientas puedo utilizar para comprobar el ratio de contraste de mi diseño?

WebAim - Una herramienta online donde podemos añadir los colores con los que estamos trabajando y ver si son accesibles, qué ratio de contraste tenemos y si pasa los certificados WCAG AA o AAA.

Colorable - Otra herramienta online donde podemos añadir el color y el fondo que estamos utilizando, y ver el ratio de contraste que tenemos.

Herramientas de diseño - Todos los softwares de diseño de interfaces actuales tienen herramientas para hacer la comprobación de contraste entre colores. Algunos lo incluyen internamente como es el caso de Adobe Photoshop o en forma de plugins, como sería el caso de Stark, disponible para Sketch, Figma, XD….

Conclusiones

Si estás realizando un proyecto, dedica y planea un hueco en tu proceso de diseño para realizar un test de contraste. Es importante testearlo en las fases iniciales del proceso de diseño, una vez que está preparado el look and feel de las primeras pantallas, así evitaremos futuras iteraciones y demoras en nuestro trabajo.

No obstante, siempre hay que tener sentido común en caso de que claramente haya mejor visibilidad aún teniendo peor ratio de contraste y tener cuidado cuando hay que elaborar nuevos diseños que no parten de unas guidelines ya testadas anteriormente.