Modo daltónico en Wordle

El juego Wordle dispone de un modo daltónico en sus opciones de configuración.

En la siguiente imagen se muestran el modo por defecto:

Y en la siguiente imagen el modo daltónico:

Colorblindly

Colorblindly es una extensión para el navegador Google Chrome que simula diferentes tipos de ceguera al color:

Simulates colorblindness in your web browser.
Colorblindly is an extension that helps developers create websites for the people with colorblindness by allowing them to simulate the experience those users have on websites.
There are 8 different settings to experience:
-Blue Cone Monochromacy / Achromatomaly
-Monochromacy / Achromatopsia
-Green-Weak / Deuteranomaly
-Green-Blind / Deuteranopia
-Red-Weak / Protanomaly
-Red-Blind / Protanopia
-Blue-Weak / Tritanomaly
-Blue-Blind / Tritanopia

Requisitos de WCAG sobre el contraste y el color

En Understanding WCAG 2 Contrast and Color Requirements, se explican los requisitos de WCAG relacionados con el contraste y el color.

Un mal uso de los colores que crea un problema de accesibilidad para las personas con ceguera al color

En ATG Event Ticketing Website se explica un problema de accesibilidad que presenta el sitio web de venta de entradas más importante del Reino Unido.

Voy a usar la herramienta Coblis — Color Blindness Simulator para simular diferentes tipos de ceguera al color. Como se verá en las siguientes imágenes, hay combinaciones de colores que no se pueden diferenciar claramente.

Claro, cuando los dos colores que no se distinguen claramente están juntos, se pueden diferenciar porque su luminosidad es diferente (uno es más claro/oscuro que el otro). Pero cuando están separados, es muy difícil saber cuál es cual.

RED-BLIND/PROTANOPIA

GREEN-BLIND/DEUTERANOPIA

BLUE-BLIND/TRITANOPIA

MONOCHROMACY/ACHROMATOPSIA

BLUE CONE MONOCHROMACY

Cómo una persona con ceguera al color trabajo con el color

Muy interesante lo que se explica en Cómo interpretar los códigos hexadecimales de color incluso siendo daltónico:

David DeSandro de Metafizzy explica en esta presentación de las dotConferences cómo desarrollar el superpoder de interpretar los códigos de color hexadecimales que habitualmente se usan en HTML/CSS/Photoshop. La técnica no es complicada, aunque requiere conocer algunos detalles. En el caso del propio DeSandro tiene más mérito porque además es daltónico: "No puedo fiarme de mi percepción visual del color a la hora de trabajar con los diseños, así que desarrollé esta habilidad como una forma de cubrir esa necesidad".

Simuladores en línea de daltonismo (ceguera de color)

Hace un par de meses se publicó en microsiervos el artículo Simuladores en línea de ceguera de colores. En el artículo se comentan dos simuladores:

• Vischeck
• Coblis

Y también un simulador de visión de bebé, Tiny Eyes.

Ejemplos de problemas para los usuarios con ceguera al color (daltonismo)

Muy interesante la página Colorblind Accessibility on the Web – Fail and Success Cases que presenta varios ejemplos de problemas de accesibilidad por un uso incorrecto de los colores.

El siguiente ejemplo de un partido de fútbol es muy ilustrativo:

Unas gafas que mejoran la visión de las personas con ceguera al color o daltonismo

En EnChroma’s Accidental Spectacles Find Niche Among the Colorblind podemos leer que unas gafas que se inventaron para que los cirujanos estuvieran protegidos de la luz del láser y pudieran diferenciar mejor el tejido humano ayudan también a las personas con ceguera al color o daltonismo a diferenciar los colores.

Pero cuidado, estas gafas no producen milagros, no ayudan ni a todas las personas ni en todas las situaciones:

Mr. Dykes countered that the glasses were not meant to be a cure, in the same way that reading glasses don’t cure farsightedness. He also acknowledged that the glasses don’t work for all types of colorblindness and said the company had a 30-day return policy for that reason. “It works in some cases and not others,” he said. “It’s not a magical cure or a cheat.”

Un alumno en cada clase

La iniciativa #1ineveryclassroom de Colour Blind Awareness tiene como objetivo concienciar a la gente del hecho de que la ceguera al color o daltonismo es más frecuente de lo que se cree. Según explican:

Statistically speaking one child in every classroom has a colour vision deficiency so we hope, having watched the animation, teachers will question which of the children they are currently teaching might be affected. 

We also want the animation to make parents to question whether their own children might be colour blind. 1 in 12 boys and 1 in 200 girls have a colour vision deficiency but 80% are undiagnosed when they reach secondary school. 

Y un vídeo asociado a esta iniciativa:

Un vídeo sobre el daltonismo o ceguera al color

Un pequeño vídeo sobre el daltonismo o ceguera al color:

El daltonismo es un defecto genético que ocasiona dificultad para distinguir los colores. La palabra daltonismo proviene del químico y matemático John Dalton que padecía este trastorno. El grado de afectación es muy variable y oscila entre la falta de capacidad para discernir cualquier color (acromatopsia) y un ligero grado de dificultad para distinguir algunos matices de rojo, verde y ocasionalmente azul . A pesar de que la sociedad en general considera que el daltonismo pasa inadvertido en la vida diaria, supone un problema para los afectados en ámbitos tan diversos como: valorar el estado de frescura de determinados alimentos, identificar códigos de colores de planos o elegir determinadas profesiones para las que es preciso superar un reconocimiento médico que implica identificar correctamente los colores (militar de carrera, piloto, capitán de marina mercante, policía, etc.). Puede detectarse mediante test visuales específicos como las cartas de Ishihara.

Simulador de ceguera al color

Spectrum es un complemento para Google Chrome que permite simular diferentes tipos de ceguera al color.

Página normal:

Protanopia:

Tritanopia:

ColorADD, código de color para daltónicos

Hace unos días se publicó en el periódico El País la noticia El código ‘braille’ para daltónicos se inventa en el siglo XXI. La noticia dice:

Unos 350 millones de personas en el mundo (alrededor del 10 % de la población masculina y 0,5% de la población femenina) sufren de algún grado de daltonismo teniendo dificultad para interpretar los colores. Estando un 90% de toda la comunicación actual basada en el color, es sorprendente que hasta ahora nadie se haya planteado atajar este problema.
Es difícil imaginarse pintar un dibujo en el colegio si no distingues el color de los lápices que usas, vestirse cada mañana sin que alguien comente tu indumentaria después, identificar las líneas del metro, ir a comprar ropa, distinguir pastillas, interpretar señales o planos, y un sinfín de cosas más.
No ser capaz de distinguir los colores supone una gran pérdida de independencia y autoconfianza para la persona que lo sufre. Un 90% de estas personas necesitan asistencia a la hora de comprar, un 88% necesitan que le ayuden a seleccionar lo que ponerse, un 73% se han sentido excluidos socialmente, un 64% reconoce que la confusión de colores es su mayor problema, un 50% se sienten avergonzados por el color elegido y un 42% tiene dificultades de integración en el trabajo. Esto supone muchos millones de personas…
Uno de los principales lugares de exclusión de este colectivo es en la escuela. ¿Quién no ha visto la cinta roja cosida en la manga izquierda del babi del cole y la verde en la derecha para aprender derecha e izquierda? ¿Cómo será el dibujo de una persona que ve los lápices de colores como en la foto?
Pero incluso puede llegar a suponer un problema de ámbito público o seguridad vial al no poder reconocer por ejemplo el color de un semáforo. Como me cuenta un daltónico, “si el semáforo es normal sabemos si está en rojo o verde por la posición de la luz, pero si tiene un semáforo lateral adicional para ir a la derecha o a la izquierda es muy complicado interpretarlo, ¿Cómo saber cuándo está en rojo o verde?”.
Hasta ahora el problema del daltonismo se había quedado en un mero escrutinio del colectivo en las escuelas, y una necesidad constante de ayuda por parte de los daltónicos.

La solución a esto es ColorADD, un código gráfico que ayuda a entender los colores. Personalmente, para mí es más fácil entender un código RGB que los pictogramas de este código.

Daltónicos que pueden ver colores

Daltónicos viendo algunos colores por primera vez explica que se han desarrollado unas gafas para que los daltónicos puedan ver los colores, ¿será verdad?

Libro sobre la accesibilidad de los colores

Hace unos meses se publció el libro A Pocket Guide to Colour Accessibility, que trata el tema de la ceguera al color o daltonismo. En Web industry urged to embrace colour accessibility podemos encontrar una entrevista que le hicieron a su autora.

En esta entrevista podemos leer:

I don’t think most people realise how common conditions like colour-blindness really are. Close to five percent of the population have some degree of reduced colour vision, and that’s not counting the even larger percentage of people who have poor vision in general. Design trends these days are all about subtle details and many websites feature text or other page elements that have insufficient contrast or inappropriate colour combinations. Designers are designing for what they can see, not realising that it may be incredibly difficult to read for others.

It’s understandable how such topics can be forgotten, though. There are an overwhelming number of things for designers to think about. New technologies are popping up daily and our list of tools to learn is always growing. Many of us who are comfortable in our design workflow are spending more time learning new coding techniques or worrying about how to use Git. We need to step back and think more about colour choices and make sure such consideration doesn’t get lost amongst our tools.

Chromanope, otra herramienta para simular el daltonismo

Chromanope es un herramienta online que permite simular diferentes tipos de daltonismo.

Su funcionamiento es muy sencillo, simplemente se introduce la URL del sitio web que se quiere analizar y sólo hay que esperar unos segundos para ver la simulación.

Por ejemplo, aquí tenemos la simulación de una página de la Bolsa de Madrid:

Y aquí el detalle de las cuatro imágenes, podemos ver cómo los colores rojo y verde (el daltonismo más común, pero no el único) se confunden en algunas simulaciones, por lo que si las variaciones de precio no estuvieran también indicadas con un signo, sería imposible para una persona daltónica percibir la variación de un título de la bolsa.

Normal Vision:

Protanope:

Deuteranope:

Tritanope: (el rojo y el verde se pueden distinguir, tienen problemas con el azul)

Qué es el daltonismo y algunos problemas

Jorge Torregrosa y Tomás Alemañ, dos alumnos de la asignatura "Programación Hipermedia I" del Grado en Ingeniería Multimedia han realizado el vídeo Daltonismo: Problemas de accesibilidad, en el que explican qué es el daltonismo o ceguera al color, detallan los diferentes tipos de daltonismo que existe y muestran algunos ejemplos reales de páginas web con problemas que afectan a las personas con daltonismo.


Transcripción del audio:

Hola y  bienvenido al video Daltonismo y problemas de accesibilidad.

Este video forma parte de una colección, todos ellos relacionados con la accesibilidad web en general.

Ha sido realizado por Tomás Alemañ Baeza y Jorge Torregrosa LLoret. Ambos somos estudiantes de Grado en Ingeniería Multimedia, impartida en la universidad de Alicante.

Puede contactar con nosotros a través de nuestro correo electrónico.

Unas de las metas seguidas o que deberían de seguirse con más asiduidad, es poder expandir la web y llegar a cuantas más personas mejor. Hasta aquí todos estaremos de acuerdo. Pero, ¿Qué pasa si estas personas poseen dificultades para consumir los contenidos web? Recae sobre nosotros, los desarrolladores, la tarea de diseñar dichos contenidos para que sean de fácil acceso a todas las personas.

En este video abarcaremos las anomalías de la visión, en especial, las relacionadas con el daltonismo. Pero, ¿qué es el daltonismo?

Según la RAE, el daltonismo es el defecto de la vista, que consiste en no percibir determinados colores o en confundir algunos de los que se perciben.

En la Wikipedia podemos encontrar más información al respecto para ampliar conocimientos.

¿Confusión en los colores? Sí, ¿pero de qué tipo de defecto específico estamos hablando?

Antes de continuar, hare una breve explicación muy genérica sobre la composición de la retina en un ojo humano. Esta posee una serie de células foto receptoras, los bastones, encargados de percibir el contraste; y los conos que se encargan de que podamos distinguir los colores. Existen tres tipos de conos,  cada uno sensible a un tipo de luz, roja, verde o azul.

Continuando con  el daltonismo, existen varios tipos, dependiendo de dónde y en qué grado se establezca el defecto de visión. Tenemos el daltonismo acromático, dicromático y tricromático anómalo.

Ahora, vemos como una persona normal visualizaría esta imagen. Dicha persona puede apreciar toda la gama de colores.

A su vez, una persona con daltonismo acromático tendría imposibilidad de visualizar dicha gama.

Dentro del daltonismo, existe otro tipo llamado daltonismo dicromático, en el que las personas que lo padeces sufren defectos en un tipo de cono.

Dentro de este tipo, existe un subtipo llamado protanopía, que es la imposibilidad de visualizar la luz roja.

La deuteranopía, que es la imposibilidad de visualizar la luz verde.

Y la tritanopía que es la dificultad, o mejor dicho, la imposibilidad de visualizar la luz azul.

Existe también otro tipo de daltonismo, el tricromático anómalo, que es el más común en la población. También tiene tres subtipos.

El primero de ellos es la protanomalía, que es la dificultad para visualizar el color rojo. La Deuteranomalía, que es la dificultad para visualizar la luz verde y la tritanomalía que es la dificultad para percibir el color azul.

Ahora hablaremos del daltonismo en la web. Hay que añadir que normalmente  los problemas derivados en este campo no suelen ser demasiado graves. Pero claro, ¡esto no significa que no existan!

Ahora vamos a ver una serie de pautas a seguir para intentar minimizar los problemas que la gente con defectos en la visión tengan al navegar.

Existen una serie de pautas de accesibilidad web que el organismo del W3C recomienda seguir.

En la recomendación 1.0, se nos indica que nos aseguremos de que los textos y gráficos son comprensibles cuando se vean sin color. Esto implica que tengamos especial cuidado a la hora de diseñar y que tanto imágenes como textos contengan suficientes contraste para permitir su distinción en entornos monocromáticos.

Si no se siguiera esta pauta, los usuarios con problemas graves de distinción de colores  o aquellos con monitores que no admitan estos, tendrían serias dificultades para visualizar correctamente nuestra web.

La siguiente revisión de las pautas de accesibilidad, la 2.0, nos indica que no debemos utilizar el color como único medio para transmitir información, sino que debe ser un apoyo para resaltar dicha información.

A continuación veremos  una serie de problemas comunes que suelen aparecen al no tener en cuenta dichas pautas.

No debemos utilizar el color como único medio informativo. Vemos como en los formularios web, tenemos que añadir información textual que se verá apoyada del uso del color, pero nunca dejar al color como único responsable.

Este es un ejemplo del mismo tipo que el anterior. Vemos unas imágenes que muestran información de bolsa. En la primera, la información se muestra codificada con colores y acompañada de una flecha que nos indica si el valor ha aumentado o disminuido. En la segunda imagen vemos como, a parte de tener también esta codificación de colores y las imágenes de las flechas, también se acompaña el signo del valor.

En el siguiente caso, vemos como una mala elección de la gama de colores, puede ocasionar una navegación bastante tediosa para los usuarios con deficiencias visuales. Puesto que los elementos de navegación son de importancia crítica en una aplicación web, debemos de pensar con detenimiento su diseño, con el fin de evitar estos problemas. Elegir colores contrastados y que no generen confusión para usuarios daltónicos es el camino a seguir.

En el siguiente ejemplo, observamos como en la página de una empresa de transporte público, se muestran mediante un callejero las diferentes rutas.

Hasta aquí todo perfecto. Pero, ¿y si una persona con una deficiencia visual grave quisiera visualizar las rutas? Pues nos encontraríamos frente a un mapa monocromático donde no se distinguen para nada las rutas. Muchas de ellas se entremezclan y hacen imposible o casi su seguimiento.

Y ya como último ejemplo, vemos la generación de gráficas. Una gráfica puede ser un importante apoyo para difundir una información. Pero es un arma de doble filo. Si no ponemos la suficiente atención en su diseño y en su gama de colores, podemos encontrarnos frente a gráficas ambiguas.

Vemos que un daltónico visualizaría varias barras con el mismo color y no sabría distinguir en la leyenda, a que datos se refiere.

Para subsanar estos problemas, podemos o bien cambiar la disposición y la estructura de la gráfica o dotar a las barras y leyendas con patrones que las diferencien por contraste.

Existen multitud de herramientas para ayudarnos a diseñar teniendo en cuenta a las personas con alguna deficiencia visual. Irían desde ruedas de color a filtros en tiempo real que simulan como visualizaría una persona daltónica cierta web.

Y aquí daríamos por finalizado este video que nos consciencia un poco sobre la situación de muchas personas daltónicas.

Muchas gracias por su atención.

Un nuevo punto de vista para el daltonismo

Muy interesante el artículo Un nuevo punto de vista para el daltonismo, publicado en la versión española de The Wall Street Journal.

Algunas de las cosas que se comentan:

• Existen videojuegos con modos para daltónicos.
• Se están desarrollando pruebas genéticas para detectar el tipo exacto de daltonismo.
• Se está desarrollando una cura genética para el daltonismo (ya existe y se ha probado en monos ardilla, pero ahora hay que verificar su seguridad).
• De las personas que padecen daltonismo, alrededor de 75% de ellos tiene deficiencia de verde; otro 20% es deficiente en rojo, pero ambos se consideran del mismo tipo. El daltonismo azul-amarillo es menos común.
• Existen aplicaciones para teléfonos móviles que enfatizan los rojos y verdes para que sean más fáciles de distinguir a través de la cámara del teléfono.
• Existen lentes de contacto para los daltónicos que realizan una función similar.

El daltonismo y WCAG 2.0

Hace un par de años escribí la entrada Mitos y malentendidos sobre la ceguera al color, en la que señalaba los puntos de verificación de WCAG 1.0 que hacían referencia al color y, por tanto, eran de interés para el daltonismo o ceguera al color.

¿Y qué dice WCAG 2.0 sobre este tema? Lo más importante lo encontramos en la pauta 1.4:

Pauta 1.4 Distinguible: Facilitar a los usuarios ver y oír el contenido, incluyendo la separación entre el primer plano y el fondo.
1.4.1 Uso del color: El color no se usa como único medio visual para transmitir la información, indicar una acción, solicitar una respuesta o distinguir un elemento visual. (Nivel A)

Lo anterior es lo más importante de cara al daltonismo: no se tiene que emplear sólo el color para transmitir información, ya que si, por ejemplo, se emplea un código de colores como el rojo y el verde para indicar cierta información, las personas con daltonismo que no puedan diferenciar esos dos colores no podrán recibir la información transmitida.

También pueden ser de interés los puntos 1.4.3 y 1.4.6:


1.4.3 Contraste (mínimo): La presentación visual de texto e imágenes de texto tiene una relación de contraste de, al menos, 4.5:1, excepto en los siguientes casos: (Nivel AA)

• Textos grandes: Los textos de gran tamaño y las imágenes de texto de gran tamaño tienen una relación de contraste de, al menos, 3:1.
• Incidental: Los textos o imágenes de texto que forman parte de un componente inactivo de la interfaz de usuario, que son simple decoración, que no resultan visibles para nadie o forman parte de una imagen que contiene otros elementos visuales significativos, no tienen requisitos de contraste.
• Logotipos: El texto que forma parte de un logo o nombre de marca no tiene requisitos de contraste mínimo.

1.4.6 Contraste (mejorado): La presentación visual de texto e imágenes de texto tiene una relación de contraste de, al menos, 7:1, excepto en los siguientes casos. (Nivel AAA)

• Textos grandes: Los textos de gran tamaño y las imágenes de texto de gran tamaño tienen una relación de contraste de, al menos, 4.5:1.
• Incidental: Los textos o imágenes de texto que forman parte de un componente de la interfaz de usuario inactivo, que son simple decoración, que no resultan visibles para nadie o forman parte de una imagen que contiene otros elementos visuales significativos, no tienen requisitos de contraste.
• Logotipos: El texto que forma parte de un logo o nombre de marca no tiene requisitos de contraste mínimo.

Chrome Daltonize!

El daltonismo o ceguera al color es un defecto genético que afecta principalmente a los hombres y que produce como resultado una incapacidad para distinguir algunos colores entre sí. Aunque el problema principal y más conocido es la imposibilidad para distinguir el rojo y el verde, también existen otros tipos de combinaciones, aunque mucho más raras.

Chrome Daltonize! es una excelente extensión para el navegador Google Chrome que permite simular diferentes tipos de daltonismo sobre la página web que se está visualizando. Ofrece un menú muy sencillo en el que se puede seleccionar el tipo de ceguera al color y si se desea que se simule esa ceguera o si se desea que se filtren los colores para que una persona con esa deficiencia los pueda distinguir correctamente.

Por ejemplo, aquí tenemos la página del periódico El Mundo, con "la roja", y la bandera de Italia que es muy apropiada para comprobar el daltonismo, ya que tiene rojo y verde:

Cuando se simula el daltonismo, se obtiene este imagen:

El cambio es evidente: en la bandera de Italia es imposible distinguir el rojo y el verde, y "la roja", ya no es "la roja". Este simulador no logra cambiar todos los colores de la página, parece que sólo actúa sobre las imágenes.

Además, tiene un modo para ayudar a las personas daltónicas a distinguir mejor los colores que les puede producir confusión. Por ejemplo, esta es la misma página con los colores rojo y verde diferenciados para una persona daltónica:

¿Por qué el logo de Facebook es azul?

Hace unos días, en el artículo La historia del logo más famoso del siglo publicado en el periódico El País nos contaron la razón:

Más de 800 millones de usuarios lo ven cada día en sus móviles, sus tabletas y sus ordenadores y otros cuantos millones más lo reconocen. El logotipo de Facebook, una nítida pastilla azul con el nombre de la red social inscrito en blanco en una variante de la tipografía Klavika, es probablemente el más ubicuo de los nacidos en lo que va de siglo.

[...]

El color, en cambio, ese característico azul Facebook, lo escogió Zuckerberg, porque es daltónico y es el tono que mejor distingue.

En este blog he escrito varias veces sobre el daltonismo (también llamado ceguera al color) y sobre herramientas que se pueden emplear para elegir una buena paleta de colores que no cause problemas a las personas daltónicas. Algunas de las entradas más interesantes son:

• Otra herramienta para simular la ceguera al color: Color Oracle (20/06/2011)
• Mitos y malentendidos sobre la ceguera al color (22/11/2010)
• ¿Los daltónicos tienen problemas para navegar por la Web? (26/07/2008)