Índice
1 – Introducción
El color tiene significado. Estamos acostumbrados a usar ese código en el día a día. Los semáforos, las señales de tráfico, las banderas en la playa… Hasta los animales utilizan este código para advertir de que son peligrosos.
Sin embargo, no deberíamos utilizar sólo este código cuando diseñemos un producto accesible. No sólo tenemos usuarios que no pueden ver, sino que también hay usuarios que pueden hacerlo, pero padecen algún tipo de ceguera cromática. Para ellos, el color no significa nada.
En esta píldora vamos a ver algunas cosas que deberíamos tener en cuenta cuando utilicemos el color para transmitir mensajes.
2 – El color nunca es suficiente
No se trata de desechar la paleta de colores y diseñar en blanco y negro. Simplemente, el color no es suficiente para indicar el propósito de un texto o de cualquier otro control de nuestra aplicación. Hay que tener en cuenta que hay gente que padece trastornos como el daltonismo y puede confundirlos. Incluso esto puede hacer elementos de nuestra página invisibles, y muchas veces recurren a tecnologías de asistencia que plasman el contenido en escala de grises.
Siempre que queramos dar significado a un mensaje con el color, debemos recordar indicar este propósito de alguna otra forma. Podemos introducir un prefijo como «error» o «advertencia», o también podemos utilizar algún icono representativo (siempre con su correspondiente texto alternativo).
También deberíamos procurar que los enlaces de nuestro sitio se diferencien del resto del texto por algo más que el color. Es fácil identificar que un elemento es un enlace si se encuentra en la barra de navegación. Podemos confirmarlo colocando el puntero sobre él y viendo cómo cambia. Sin embargo, en medio de un texto puede ser más complicado. Probar en cada palabra que pueda ser susceptible de contener un enlace es más que frustrante. Debería haber algún otro rasgo para poder distinguirlos a simple vista.
Muchas veces, también usamos el color para representar el estado de un control, como un botón que está pulsado o no. La mayoría de las veces, esto está acompañado de otros efectos visuales que permiten distinguirlo aun sin tener en cuenta el color. Sin embargo, una persona que no puede ver no apreciará ninguno de estos cambios. Es necesario añadir las propiedades de WAI-ARIA apropiadas en cada caso, como aria-pressed, aria-expanded o aria-selected.
Para los campos de formulario, cuando la entrada sea inválida, debemos indicarlo de alguna otra forma además del color. No sólo sirve con un mensaje en este caso. La validación de HTML 5 o, en su defecto, la propiedad aria-invalid, permiten conocer a todo el mundo el estado del campo en cuestión.
3 – Conclusiones
El color es un código muy extendido y fácil de comprender al instante. No obstante, no es un código universal. Debemos ofrecer siempre alguna otra vía adicional para transmitir la misma información.
