Blog IDA Chile | Estrategia para el éxito de tu negocio

Accesibilidad en el Diseño: Color y Contraste

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:

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

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

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)

Color Contrast Analyser 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. 

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

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, complementándose 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: