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

Les couleurs des géants du web

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

5 commentaires sur “Pattern UI : Vision des couleurs et daltonisme”

  • Très intéressant et souvent oublié, y compris par les graphistes WEB. J'ai eu un cas concret: quand j'ai commencé à travailler comme développeur mon chef de projet m'a dit: "Je ne vois rien. Change les couleurs!" Depuis je suis attentif au problème. Voici un bon logiciel (pour MacOS): http://colororacle.org/ (permet d'appliquer un filtre afin de vérifier le rendu).
  • merci William! très bon outil, facile et rapide à utiliser. je suis fan
  • Il y a une nouvelle application pour l'iPhone qui peut aider les personnes souffrant de daltonisme: https://itunes.apple.com/fr/app/colorsay/id605398028?mt=8
  • N'oubliez pas qu'une personne daltonienne n'a pas nécessairement à voir le monde en noir et blanc, mais certaines couleurs changent d'apparence. Il existe de nombreux types de daltonisme, et chacun est différent. Voici quelques photos illustrant les différentes variantes. Pour la plupart, ce sont les tons rougeâtres ou verdâtres qui sont affectés, tandis que pour la plupart, les couleurs bleues restent ce qu'elles sont. Vous pouvez essayer à quoi ressemble votre interface utilisateur dans divers daltoniens cet outil par exemple. Les directives relatives à l'expérience utilisateur Windows couvrent également la couleur en ce qui concerne le daltonisme.: https://www.colorblindnesstest.org/fr/
  • Dommage que le site de https://www.colorblindnesstest.org/fr/ soit cassé... On ne peut pas faire le test (en tout cas sur Chrome). Avant d'être gentil avec les daltoniens, c'est bien d'avoir un site qui marche tout court :-)
    1. Laisser un commentaire

      Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *


      Ce formulaire est protégé par Google Recaptcha