Uso incluyente de los colores

Debemos recordar que 8% de los hombres y 0.5% de las mujeres a nivel mundial viven con alguna deficiencia para identificar los colores, entre ellas el daltonismo. Esto quiere decir que si comunicamos información solamente mediante el uso de colores muchas personas no van a entender nuestra información.

Es por ello fundamental evitar el uso exclusivo de color con la finalidad de transmitir información en un documento.

¿A qué nos referimos con lo anterior? El siguiente ejemplo muestra una lección de gramática que utiliza un código de color para explicar dar la información.

Morado = Artículo
Azul = Sujeto
Verde = Verbo
Naranja = Adjetivo

El perro grande salió al patio.

Las personas que utilizan lectores de pantalla no podrán identificar esos cambios de color mientras que es probable que quienes tienen una deficiencia de color tampoco lo logren. Si bien no se desalienta el uso de colores ya que resulta muy útil para ciertas discapacidades, sí se debe tener en cuenta lo siguiente:

  1. No depender únicamente del uso de colores, sino complementar con alternativas textuales.
  2. Revisar los contrastes de color.

Alternativas textuales al uso de colores

Algunas alternativas adicionales al color pueden ser:

  • Instrucciones textuales.
  • Validaciones o mensajes de errores claros y breves que transmitan al usuario la información deseada.

Ahora bien, el uso de colores y las consideraciones al respecto deben tenerse en cuenta no únicamente cuando de texto se trata sino también cuando se incluyen infografías o gráficas.

Por ejemplo, una gráfica de pastel no debe depender del color para transmitir información, ya que usuarios con alguna discapacidad visual como ceguera de color no podrán percibir la información adecuadamente. Adicional al color se puede utilizar entonces alternativas como:

  • Etiquetas textuales.
  • Formas o texturas diferentes para diferenciar contenido.
  • Líneas que lleven al texto relacionado.

El siguiente ejemplo compara una gráfica no accesible con una accesible:

Gráfica no accesible

Nota: Tenga en cuenta que, si un usuario no puede distinguir adecuadamente los colores o el tamaño de cada sección, no le será posible entender qué sección pertenece a determinado producto.

Gráfica accesible

Nota: Una gráfica accesible permite obtener toda la información sin la necesidad de reconocer los colores o el tamaño de las secciones.

En este ejemplo, además de los colores, se incluyó junto a cada sección la información en texto lo cual ayuda a que las personas con discapacidad puedan entender mejor el contenido.

Revisar contrastes de color

Debido a que el contraste entre primero y segundo plano facilita la consulta de información, es importante comprobar que los contrastes de color que se utilicen en los documentos cumplan con los criterios de accesibilidad.

Por ejemplo: Un fondo blanco (o colores claros) con letras negras (o colores obscuros) es recomendable. Por el contrario, se deben evitar colores brillantes o con poco contraste.

Para comprobar que la elección de colores es accesible, existen herramientas que nos ayudan de manera automática a revisar y cumplir con los requisitos del WCAG 2.0. También puedes utilizar la tabla de colores accesibles que incluimos en este Access Corner.

Para recordar...

  • Utilice colores pero siempre complemente con alternativas textuales si está transmitiendo información importante.
  • Diseñe tomando en cuenta a quienes no distinguen los colores o cuyas tecnologías limitan la identificación de los mismos.
  • Busque contrastes adecuados en sus diseños y documentos.
  • Utilice las herramientas automáticas para validar que los contrastes cumplen con los requisitos del WCAG 2.0, incluyendo la tabla de colores accesibles del Access Corner.