Cómo usamos el color en el diseño de un sitio web puede dar lugar a problemas de accesibilidad. Y aunque éstos parecen, en principio, fáciles de solucionar, pueden llevar mucho trabajo si no se tuvieron en cuenta desde el principio en el diseño.
Hay dos aspectos que son los más importantes para evaluar si tenemos problemas con el color: contraste y uso del color.
Contraste
Es la más frecuente, y podemos encontrar sitios web en los que no existe casi ninguna página sin problemas de este tipo.
El principio es muy simple: el contraste entre el texto y el fondo debe ser de 4.5:1 como mínimo para el texto base, o 3:1 para textos grandes (en general, textos de 18pt o más, o de 14pt o más si están en negrita, o tamaños equivalentes para alfabetos chino, coreano y japonés) para el nivel AA, y de 7:1 y 4.5:1 respectivamente para el nivel AAA.
Parece que sólo bastaría con elegir colores adecuados para el diseño, pero eso a veces no es tan sencillo.
El problema más fácil de solucionar es dejar de intentar esconder o disimular algunas partes del contenido. Por ejemplo, con textos legalmente obligatorios o confirmaciones de aceptación de condiciones. Creamos todo un diseño pensando en lo que queremos comunicar y podemos caer en la tentación de poner en un color que destaque menos las partes que creemos que no encajan con el tono general de nuestro sitio.
Si hacemos eso, no estamos eliminando el contenido ni la obligación de tenerlo, sólo estamos haciendo más difícil su lectura por razones estéticas. Pero debemos ser capaces de diseñar sitios web que sean, al mismo tiempo, visualmente atractivos y funcionales.
Otro problema que ocurre con frecuencia es que los colores corporativos o de la marca no tienen un buen contraste. Por ejemplo, cuando adaptamos colores de una marca que se diseñó para colores impresos a pantalla, los colores no siempre son adecuados. Los colores impresos son sustractivos, con lo que mezclar colores da un resultado más oscuro, mientras que los colores en pantalla son aditivos, y ocurre lo contrario. Por eso intentar copiar un color exactamente en pantalla no siempre funciona, aunque lo haga en papel. Este error es fácil de corregir a nivel técnico, pero requiere más trabajo desde el punto de vista del diseño.
Uso del color
Además de usar colores con buen contraste, no podemos usar el color para trasladar información o distinguir elementos.
Por ejemplo, en un formulario. Marcar en rojo un campo si hay un error está bien, porque señalamos el error donde ocurre, pero no podemos usar ese rojo como única indicación del error. Debemos usar texto u otros elementos visuales para indicarlo.
O si tenemos una lista de opciones, señalar cuáles están seleccionadas sólo con un cambio en el color del fondo no es suficiente. Debemos usar elementos como iconos adicionales (por ejemplo) para poder distinguirlo aunque no podamos percibir el color.
Esta norma suele costar un poco más de entender porque, a veces, visualmente es muy claro y fácil de percibir un cambio o información mediante el color, y parece obvio. Pero algunas personas no pueden percibir el color, o lo hacen de manera distinta, por lo que la interpretación del uso del color no es siempre tan obvia como puede parecernos.
Conclusión
El uso del color afecta la accesibilidad de un sitio web tanto por las cualidades de los colores escogidos como por la intencionalidad de su uso para mostrar la información. Y solucionarlo implica, a veces, repensar qué colores usamos y cómo; esto puede ser una tarea compleja. Pero al final siempre obtenemos un diseño mejor, más útil y adecuado para un sector más amplio de nuestro público.
Fran Rosa, Desarrollador Senior y Advocate especializado en desarrollo centrado en las personas