Pattern UI : Vision des couleurs et daltonisme

En France, la proportion de daltoniens est d'environ 8% chez les hommes et 0,45% chez les femmes.

Le daltonisme, décrit il y a deux siècles par le physicien anglais John Dalton, est un déficit visuel dont la forme la plus connue se manifeste par une perception déficiente du rouge (protanopie), du vert (deutéranopie) ou plus rarement du bleu (tritanopie).

En gros, lorsqu’un daltonien (deuteranope ou tritanope) observe l’infographie sur les couleurs des géants du web, il voit ça :

Lorsque la plupart d’entre nous voit ceci :

Pourquoi surtout les hommes ? Les anomalies de la vision des couleurs sont portées par le chromosome X. La femme a deux chromosomes X, l’homme un X et un Y. Par conséquent, si une femme hérite d’un défaut de la vision dans un de ses chromosomes X, il y a des chances que le gène normal de son autre chromosome compense l’anomalie. En revanche, un homme qui hérite d’un chromosome X porteur de l’anomalie n’a pas le recours d’un autre chromosome X...

Description

Même s’il est compliqué de tenir compte de l’ensemble des dyschromatopsies, exclure environ 10 % de la population mondiale est juste inenvisageable !

--> 2 règles ultra simples à suivre lorsque l’on travaille sur une infographie, de la dataviz ou sur les pages d’une application de manière générale.

1/ Tester les contrastes en passant en niveaux de gris.

sur cet exemple , interface Windows :

• Chaque tuile de couleur est suffisamment contrastée avec le fond de l'écran (noir).
• Chaque zone de couleur est illustrée par un pictogramme dont la couleur (blanche) est suffisamment contrastée avec le fond coloré de la tuile.

2/ Simuler la vision des daltoniens

Pour vérifier "l'efficacité du contraste" entre la couleur du texte et la couleur de fond, utilisez un outil permettant de simuler l'apparence de la page vue par une personne qui a un problème de vision des couleurs.

• VisCheck simule les handicaps relatifs à la couleur et permet de voir ce que les personnes touchées par ce problème voient. Vous pouvez vérifier une image seule ou toute une page web.
• Color Vision montre le spectre de couleur tel que vu par les personnes avec différents types de problèmes de vision de couleurs. http://www.iamcal.com/toys/colors/

Chez qui ça fonctionne ?

• Interface Windows.

Même si le rouge, le vert et le orange sont confondus pour les protanopes et les deuteranopes, l'utilisateur peut discerner les zones de couleur (bon contraste tuile/fond d'écran) et les comprendre (pictogramme accompagné de texte dont le contraste est suffisant avec la couleur de la tuile). Pour les tulipes, en revanche....

Antipattern

• Sur une infographie : http://blog.websourcing.fr/infographie-internet-tue-la-planete/

Les contrastes sont insuffisants, le choix des couleurs n'est pas judicieux (orange et rouge non discernable pour un deuteranope)

• Sur un graphique de datavisualisation : http://bl.ocks.org/mbostock/1256572

Graphique D3.js --> D3 Show reel

Dans ce graphique, les couleurs utilisées ne sont pas discernables par la majorité des daltoniens (protanopes et deuteranopes), le vert et le rouge se confondent pour les deuteranopes, le vert et l'orange se confondent pour les protanopes.

• Sur un site internet : http://www.rougevert.fr/

La page ne présente pas de contrastes pour un deuteranope (et un protanope)

• Sur un site e-commerce : http://www.bonbon-foliz.com/

La page ne présente pas de contrastes pour un deuteranope (et un protanope)

Un petit test ISHIHARA?

Ce test, inventé en 1917 par Shinobu Ishihara, est un recueil de 38 planches utilisé pour dépister les anomalies de la vision des couleurs.

1. Tout le monde doit voir le chiffre 12.
2. Vision normale : 57. Déficience rouge-vert : 35.
3. Vision normale : 5. La plupart des dyschromates ne voit rien, ou de façon erronée.

Sources

https://blog.octo.com/les-couleurs-des-geants-du-web-2/

Color Vision :  http://www.iamcal.com/toys/colors/

Outil Vischeck : http://www.vischeck.com/vischeck/

http://www.alsacreations.com/astuce/lire/811-couleurs-accessibilite-contraste.html

http://gmazzocato.altervista.org/fr/colorwheel/wheel.php

Ishihara Test for Color Blindness contient une série d'images illustrant ce que voient ou ne voient pas les personnes daltoniennes.

http://daltonien.free.fr/daltonien/article.php3?id_article=6#nb5