Accesibilidad en el Diseño: Color y Contraste - Blog IDA Chile | Estrategia para el éxito de tu negocio
Accesibilidad Web

Accesibilidad en el Diseño: Color y Contraste

Queremos que cada experiencia sea funcional, única y de valor. Por eso, hemos creado esta serie de artículos sobre accesibilidad en el diseño. Aquí proporcionaremos herramientas y conceptos que nos permitirán abordar diferentes aspectos de accesibilidad en cada proyecto. Incluye opciones de color y contraste para personas invidentes, con estos consejos y herramientas.

Un ojo de diversos colores representa la importancia del color y contraste en las plataformas digitales. Blog IDA.

Hoy hablaremos sobre opciones de color y contraste accesibles en el diseño web. Para ello, profundizaremos en algunas herramientas útiles tanto para diseñadores como desarrolladores. Inclusive podremos conversar sobre el uso de algunas aplicaciones útiles para usuarios con discapacidades visuales. La que se utilizan para lograr consolidar la accesibilidad considerando el uso de la tecnología y el diseño.

Pero para lograr esto es imprescindible hacernos las siguientes preguntas:

¿Cómo podemos aplicar el diseño accesible en plataformas digitales?

¿Cuál es el real uso y comportamiento de la accesibilidad en el diseño?

En este artículo encontrarás algunas respuestas para esas preguntas que más de alguna vez te has hecho al momento de diseñar. Ya sean plataformas, aplicaciones, páginas web o softwares, incluso para algún proyecto que no necesite de tecnología. Porque no debemos olvidar que el color y contraste se percibe en todas las cosas, materialidades y texturas. En resumen, en todo lo tangiblemente existente.

El color es uno de los elementos que más causa impacto en una plataforma. Sin embargo, puede ser percibido de diferentes maneras por la persona receptora del contenido. Por esta razón, debemos tener especial cuidado si queremos implementar accesibilidad en nuestros diseños. 

Herramientas de color y contraste

Hoy existen muchas herramientas que nos ayudan en la validación de un producto accesible. Y podemos utilizarlas desde las etapas más tempranas del proceso de diseño. Muchas veces transformándose en el mejor aliado de un diseñador. Por eso, te aseguro que una vez que las conozcas, no dejarás de usarlas. 

A continuación verás algunas herramientas que te ayudarán en la creación de sistemas completamente accesibles:

Paletton

Todos los diseñadores deberíamos conocer o tener nociones sobre esta herramienta online. Si no la conoces, ¡Revísala! De seguro no te arrepentirás. 

Paletton es una web app de mucha utilidad a la hora de diseñar para diferentes espectros de la discapacidad visual. Puedes elegir la paleta de colores más pertinente para tu proyecto y luego, Paletton te ayudará a elegir las opciones más accesibles. Para ello, incluye un simulador de diferentes tipos de ceguera al color (daltonismo), como podemos ver a continuación:

Ejemplo del uso de paletton para Blog IDA.

Además te da la posibilidad de crear tu paleta de colores en 5 modalidades diferentes:

  •  Monochromatic
  • AdjacentColors
  • Triad
  • Tetrad
  • Free-Style.

Detalle de paleta de colores proporcionada por Paletton en Blog IDA.

De esta forma, esta herramienta abarca diferentes opciones de visualización para:

  • Protanopia 
  • Deuteranopia 
  • Tritanopia 
  • Protanomalía 
  • Deuteranomalía 
  • Tritanomalía 
  • Discromatopsia 
  • Acromatopsia completa  

Opciones según tipo de ceguera en Paletton.

Como alternativa, Paletton permite exportar la paleta de colores individual en diversos formatos. Los más destacados son CSS, LESS, SASS, XML o swatches para Photoshop. Así puedes exportar colores e incluso probar tu paleta de colores en diferentes gráficos de ejemplo. ¿Te animas a probarla?.

Color Contrast Analyser (CCA)

Es un software que deberás descargar e instalar en tu computador. Disponible para Windows y Mac, sin duda te ayudará a determinar la legibilidad de tu contenido y el contraste de los elementos visuales que componen tu interfaz. 

Ejemplo del uso de Colour Contrast Analyser (CCA) en Blog IDA.

Basado en el criterio de las pautas de accesibilidad para el contenido web WCAG 2.0; esta herramienta comprueba combinaciones de colores de primer plano y fondos, para determinar si tus colores seleccionados tienen una buena visibilidad.

Una de las grandes maravillas de este software es que simula la ceguera al color y verifica la legibilidad para personas con daltonismo u otras discapacidades asociadas a la visión. Lo que permite visualizar los resultados para diferentes tipos de daltonismo

  • Normal
  • Protanopia (carencia de sensibilidad al color rojo)
  • Deuteranopia (carencia de sensibilidad al color verde)
  • Tritanopia (carencia de sensibilidad al color azul)

Es muy importante mencionar que esta funcionalidad sólo está vigente para Windows. Además esta grandiosa herramienta te permitirá comprobar los controles gráficos y los indicadores visuales de tu paleta de colores.

Ceguera total

La manera en que creamos y diseñamos la composición del contenido web a nivel gráfico y aún más en cuanto a color, debe ser capaz de ser comprendido por la mayor cantidad de usuarios posibles. Esto es uno de los principios básicos de la accesibilidad. Sin embargo, ¿Qué pasa con las personas con ceguera total? 

Se han creado aplicaciones que funcionan como una alternativa totalmente válida para los usuarios con esta discapacidad. Su función es ayudarlos a percibir el color y la forma de un elemento u objeto con ayuda de la tecnología. Logrando mejorar significativamente su calidad de vida. 

Es el caso de la app TapTapSee, totalmente accesible y gratuita. Actualmente está vigente para sistemas operativos Android e iOS, complementandose con los lectores de pantalla Talkback y Voice Over respectivamente. Esta app ayuda a personas con limitaciones visuales y con ceguera total a reconocer objetos y colores. 

Su modo de uso es simple: el usuario sólo debe tomar una fotografía y el software instantáneamente reconocerá el contexto de la imagen. Su funcionamiento e interfaz es fácil e intuitiva y su objetivo principal es aportar a la independencia de personas no videntes en sus actividades cotidianas.

Incluir y entender la ceguera

De seguro ustedes se preguntarán: ¿Cómo representa el color una persona que es invidente de nacimiento? y claramente esta interrogante no es menor. Porque todos entendemos que nunca han visto un color, por lo que es difícil de imaginar. Sin embargo, el reconocimiento y la asociación de colores no se transmite sólo desde los sentidos, también se hace desde la comunicación.

Las personas invidentes de nacimiento tienen gran conocimiento sobre el color. Por ejemplo, una persona no vidente puede escuchar o leer (con tecnología de asistencia) que una manzana es roja o que la sangre es roja. También saben que el rojo está asociado con el calor o con la ira; de modo que tienen bastante información sobre los colores al igual que las personas son capaces de ver. 

Es por esto que ellos pueden percibir inmediatamente el color a través del lenguaje. Gracias a que lo han leído o escuchado, de modo que hay bastante información que sí se comparte entre las personas invidentes y las que sí ven. Lo único que las personas ciegas no poseen, es obviamente la información puramente visual que nos entrega la visión. 

Referencias:

Valentina Galleani - Diseñadora UX
Soy diseñadora de experiencia e interfaz de usuario, especializada en comunicación visual. Mi enfoque creativo está basado en la creación de sistemas digitales que ayudan a mejorar la calidad de vida de las personas por medio de la tecnología, plasmando experiencias significativas basadas en conceptos claves como lo son la accesibilidad, usabilidad e innovación.

Comentarios