Accesibilidad web: Daltonismo y baja visión

Después de la entrada de los colores dejo aquí una demostración de cómo perciben el mundo las personas daltónicas.

Pruebas de color con simulador de daltonismo

Usando la herramienta Color Blidness Simulator, he decidido poner a prueba diferentes colores con respecto a los problemas de daltonismo que hay, para que tengáis un ejemplo visual de cómo se ven los colores. Este tampoco es mi caso.

He escogido una lista de los colores más problemáticos para el daltonismo. En este caso, he escogido (varios colores sobre blanco para visión normal). Hay que partir de ahí.

Aquí hay un ejemplo para cualquier persona sin problemas de visión respecto al color:

Amarillo, azul, rojo, verde, celeste, lila y naranja.

 

Una persona con protanomalia ve los colores así.

protanomalia

Una persona con deuteranomalia ve los colores así:

daltonismo: deuteranopia

Vamos con la tritanomalia:

daltonismo: tritanomalia

Así se perciben los colores con deuteranopia:

Daltonismo: deuteranopia

Vamos con la tritanopia. En este caso, rojo y verde se percibe igual:

daltonismo: protanopia

Hay personas que no perciben el color, y que tienen la visión monocromática.

daltonismo: visión monocromática

Monocroma de cono azul:

Daltonismo: monocromo de cono azulVuelvo a insistir, he escogido algunos, no todos, los daltónicos tienen su paleta de colores específica. Es importante decir que no se pueden poner un verde y un rojo porque un daltónico los ve iguales. Aunque algunos requieren un rojo vivo, porque lo identifican mejor.

En base a esto, que lo he puesto para que lo veais visualmente, he llegado a una conclusión:

  • El azul y el lila, como ya dije, una persona daltónica los ve muy parecidos. El rojo y el verde también.
  • A nivel general para las personas con ceguera al color, se recomienda utilizar un color intermedio: secundarios o terciarios.

Por otra parte, con la herramienta No Coffee Visión Simulator, disponible para Google Chrome, también podemos hacemos una idea de cómo ven las personas daltónicas un sitio web y se visibiliza mejor los colores que percibe. Es una herramienta que se debería poder usar en todos los navegadores. También se puede comprobar cómo lo verían las personas que tienen baja visión, (cataratas, glaucoma y otros), y es recomendable usar un contraste de blanco sobre negro. Así obtenemos un documento claro y legible para este grupo de personas a la hora de imprimirlo. Y para todos, claro.

Herramienta No Coffee Vision Simulator.

Usando la herramienta de Contrast Ratio barajando varios contrastes, por ejemplo:

Azul sobre blanco. Es un contraste perfectamente accesible. Cumple el máximo y el mínimo:

azul blanco: buen contraste

Blanco sobre verde

contraste de blanco y verde

Blanco y rojo:

contraste de blanco y rojo

Un negro sobre azul no cumple contraste

negro y azul es mal contraste

Blanco y naranja, tampoco cumple contraste.

Mal contraste: blanco y naranja

Negro sobre naranja sí cumple contraste para los dos niveles: el doble A y el triple A.

buen contraste: naranja y negro

También se puede usar la herramienta Color Contrast Analyser, de The Pacciello Group, que es una herramienta muy útil. Federico Toledo ha compartido un artículo muy interesante y nos da unas buenas indicaciones para usar la herramienta. Está disponible para Windows y para MacOS.

También se puede usar la herramienta WCAG Contrast checker, para Firefox.

Como estamos hablando de accesibilidad y es para todo, es importante saber que a nivel de tecnología también entran los videojuegos: aquí he encontrado la historia de una persona daltónica que cuenta cómo es disfrutar de un videojuego, y las opciones de accesibilidad que tiene que tener: ellos lo agradecerán.

Hay que tener en cuenta que si son enlaces tienen que estar subrayados, porque no se debe transmitir información sólo con el color.

Filtros para la dislexia y estudios.

He descubierto un estudio que se ha realizado por investigadores brasileños y francesesde la la revista Research in Developmental Disabilities, en la que cuenta que un filtro de color verde podría mejorar la velocidad lectora de los niños disléxicos.

En el estudio se utilizaron filtros de color amarillo y verde, y se pidió a los 36 niños que leyeran libros infantiles adecuados para su edad. Los textos se mostraron en una pantalla de ordenador con un filtro amarillo, con otro verde y sin ningún filtro. Se seleccionaron 18 niños con dislexia y 18 sin ella.

En general, un niño con dislexia, tiene que fijar su mirada en las palabras durante más tiempo para comprender un texto, por lo que su velocidad de lectura es menor.

Sin embargo, el dispositivo de seguimiento ocular detectó una diferencia significativa para los niños con dislexia, que leían más rápido con el filtro verde, fijando su mirada en grupos de palabras durante 500 milésimas de segundo, en comparación con las 600 milésimas de segundo que utilizaban con filtro amarillo o cuando la lectura no tenía filtro.

En este sentido, los autores del estudio señalan que la mejora en el tiempo de lectura con la utilización del filtro verde podría deberse a cambios en los estímulos visuales disponibles para el procesamiento del sistema nervioso central.

En un estudio de 2015, una resonancia magnética mostró una activación significativa de la corteza cerebral durante la lectura con filtros en comparación a la lectura sin filtros. Los autores plantearon entonces la hipótesis de que los filtros pudieran reducir el estrés visual y la distorsión.

Ahora bien, ahora que conocemos un poco todo esto del color, he reflexionado que ahora la cosa está un poco más fácil a la hora de diseñar un logotipo porque conocemos las necesidades respecto al color: esa eterna pregunta de las personas que se dedican al diseño «¿Y qué color cojo?». En base a todo esto, ya tenéis una idea, a no ser que alguien requiera algo específico según su patología si la tiene. Para facilitarles la vida. Y por supuesto, algo que no puse en la entrada correspondiente que se me pasó, el logotipo también tiene que cumplir el contraste entre el color y fondo, que establece el criterio 1.4.11.

Por otro lado, decir que hay que tener en cuenta el gradiente que puede hacer que dificulte la legibilidad si se le pone un texto, un eslogan y no es recomendable.

Tipografía

También es importante tener en cuenta la tipografía que se lee en pantalla, porque las serifas no se leen tan bien como las Sans Serif. Todo depende del tamaño, peso o grosor de la tipografía y la tipografía en cuestión.

En cuanto a características de la tipografía, hay tipografías más legibles si se aumenta un poco el grosor. Se recomienda un tamaño entre 12 y 18 puntos. Es muy importante la legibilidad de la tipografía, el trazado, peso o grosor de la tipografía y el ancho del texto, ya que si tiene un ancho muy grande puede hacer muy difícil la lectura porque se hace pesado leer frases largas.

No se recomienda abusar de las mayúsculas porque pueden dificultar la lectura, sobre todo, para las personas ciegas, o dislexia.

Tipografías legibles

Varios ejemplos de tipografías legibles son aparte de las ya conocidas o mejor dicho, más utilizadas porque estamos acostumbrados a leerlas y las identificamos fácilmente, como son la Arial, Verdana, son las siguientes: Roboto, Open Sans, Ubuntu, PT Sans… A mí personalmente me gusta mucho la Roboto. Es una tipografía muy legible.

No se recomiendan algunas tipografías serifas porque en pantalla pueden dar problemas de legibilidad. Por ejemplo, EB Garamond, incrementada en pantalla un 170%, sigue sin leerse bien. Se ve pixelada.

Tipografía serifa no recomendada: EB Garamond

O  por ejemplo, esta otra:

Tipografía no legible

Tampoco se recomiendan tipografías que tengan un trazado díficil de leer o que las letras estén muy juntas, tipo Curlz, o Playbill y la Comic Sans.

Tipografías no recomendadas por su estilo

Hay algunas características que pueden ayudar a la legibilidad. Así que hay que tener en cuenta lo siguiente:

  • Prominentes ascendentes (por ejemplo la línea vertical en d).
  • Descensores prominentes (por ejemplo, la línea hacia abajo en y).
  • Una combinación d/b o p/q que no son una imagen exacta del espejo de uno a otro.
  • I, l minúsculas, mayúsculas y 1 debe tener diferentes características entre sí.
  • Evita fuentes que tienen espaciado de letra apretada, para no dificultar la lectura.

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *