Un pequeño detalle de usabilidad del que no se salva casi nadie, es la falta de adaptación de los sitios web para personas con daltonismo.
En España lo padecen en alguna medida cerca del 10% de los hombres, y menos del 1% de mujeres. Por lo que un segmento importante de la población, queda olvidada y discriminada en la Web.
Logo de google tal y como lo vería un daltónico, más amarillento de lo habitual.
La forma más común de esta enfermedad, consiste en percibir como gris de distinta intensidad los colores rojo, verde y amarillo. Sin embargo, en algunos casos, los daltónicos pueden ver más matices del color violeta que las personas de visión normal. También hay casos en los que la incidencia de la luz puede hacer que varíe el color que ve el daltónico.
Algunos consejos:
El contraste es lo más importante para un daltónico
Hay que diferenciar en todo lo posible el primer plano y colores de fondo. Para asegurar la mejor legibilidad a tu sitio, la mejor opción es utilizar letras negras con fondo blanco. Usar fondos azules o verdes disminuye y degrada la legibilidad. De ser posible no uses el color rojo de fondo, puesto que disminuye la legibilidad sin importar el color de las letras. El uso de azules ligeros y grises claros, aumenta el stress óptico de muchos daltónicos.
Intenta Utilizar el contraste recomendado por herramientas de comprobación de color. Contrast Analyser es una estupenda herramienta, que comprueba si el contraste de nuestros sitios se ajusta a las pautas de accesibilidad. Además incorpora una funcionalidad para simular las condiciones visuales del daltonismo.
Transcribo las palabras de Daniel Flück, de cuya página hablaremos más tarde para clarificar lo importante que es el contraste para un daltónico:
“Me gustaría añadir mi lista personal de colores que a menudo no pueden distinguir. Y también me gustaría añadir algunos ejemplos para ellos, así alguien con visión normal podrá ser capaz de imaginar un poco que se siente al ser daltónico
- Contraste de color rojo oscuro a negro: Si recibo un correo electrónico con las palabras resaltadas en rojo, no puedo verlas.
- Contraste de verde hierva a naranja: no puedo detectar una naranja que caiga por el suelo de mi jardín.
- Contraste de verde hoja a rojo: para mí no hay ni flores ni manzanas rojas en los árboles.
- Contraste de verde claro a amarillo: no puedo ver si es un plátano maduro o no.
- Contraste de violeta a azul oscuro: nunca sabré cuál es la diferencia.
- Contrate de cian a gris: todos los tonos de azul-verde son incoloros para mí.
- Contrate de verde a marrón o a rojo: Por favor, no me hables de animales rojos en el bosque.”
Cuidado con los enlaces
Los vínculos no deben depender exclusivamente de un color, o por lo menos que este no sea ni rojo ni verde. Es recomendable marcar los enlaces de alguna forma, como por ejemplo con subrayado, cursiva, negrita…ect
El problema de los formularios
En un formulario se suelen incluir elementos gráficos que le indican al usuario si algún campo está incompleto y que es necesario rellenarlo. El mecanismo más utilizado es añadir un texto de aviso con letras rojas para indicar qué campos es obligatorio rellenar. Recuerda que a un daltónico le puede resultar casi imposible distinguir una letra roja de una negra, por lo tanto no van a tener forma de saber cuales campos son obligatorios.
Una buena solución seria incluir alguna forma de identificación, o un simple asterisco junto al campo que es obligatorio rellenar.
Pero la regla más importante es:
Nunca, nunca utilices el color únicamente para indicar, comunicar o diferenciar algo. Para complementar el color puedes utilizar otros elementos como formas, patrones, de texto, iconos, sonidos o incluso fotos.
Ejemplos prácticos:
We are Colorblind, es una página escrita por Daniel Flück, que se ha convertido en la referencia en cuanto al daltonismo en diseño web se refiere. En esta página, nos podemos encontrar con unos cuantos ejemplos, donde podemos aprender cómo interacciona un daltónico ante ciertos diseños. Además nos propone soluciones para evitar estas dificultades. He querido recoger aquí algunos ejemplos:
Los gráficos de líneas estadísticas:
El problema surge cuando no hay un método claro de relacionar dos o más colores de las líneas, con sus valores correspondientes y los nombres de categoría en la leyenda. Esto confunde a los daltónicos, lo que a veces hace imposible la utilización de la tabla.
Solución 1: Incorporación de una leyenda al gráfico
Al colocar las leyendas de la tabla junto a las líneas correspondientes, los daltónicos tienen una mejor conexión visual entre la tabla y los datos. El daltónico ahora puede contar con algo más que un color para entenderlo mejor.
Solución 2: Uso de diferentes formas e iconos
Mediante la inserción de formas o iconos en los trazados de las líneas, el daltónico mejorará su experiencia. Esta solución no funciona para todas las estadísticas, ya que algunas no utilizan líneas.
Iconos de status
los iconos de status tienen una amplia variedad de usos, por lo general se suelen utilizar para comunicar el estado de algo en un sitio web.
Problemas
- El problema surge cuando el color se utiliza para comunicar el estado de los iconos. El Pitch Dark de Firefox, es una herramienta ideal para usuarios daltónicos, pero aun así, la mayoría de los iconos contienen rojo y verde, lo que, en ojos daltónicos, los hace casi invisibles.
- Los Iconos aislados, sin otros cercanos para su comparación, no parecen tener un color claro. Un icono verde puede parecer de color rojo o naranja a una persona daltónica.
- Los Iconos con muy poca diferencia en la forma también son confusos. Un daltónico tendría que mirar de cerca para detectar la diferencia en la forma
Solución 1: Usa iconos que describan la acción o el estado
Eso podrá ayudar a los daltónicos a comprender los iconos, sin tener que confiar sólo en el color.
Solución 2: Usa leyendas
A veces no es posible describir una acción o estado con un simple icono. Puede que el espacio disponible sea limitado o la acción es demasiado compleja para describirla. Si la forma de los iconos no puede explicarse fácilmente, una buena solución puede ser poner una leyenda junto al icono.
Solución 3: Usa colores fáciles de distinguir
El uso de colores muy claros y con buen contraste ayuda a que se comprendan mucho mejor por personas con daltonismo. Por encima de todo, hay que tratar de evitar contrastes inapropiados.
Herramientas
Existe una herramienta llamada Colorblind Web Page Filter que nos ofrece la posibilidad de navegar por Internet a través de los ojos de un daltónico, permitiéndonos reproducir los colores de las distintas web tal y como los vería cualquier persona con daltonismo.
