Il y a quelques jours, je vous ai présenté le menu d’un site que l’on m’a demandé d’auditer. Ce site présente des articles classés par catégories. Dans le menu, les catégories sont distinguées par des couleurs, que l’on retrouve sur le cadre des articles présentés (sur les différentes pages). Dans un premier article, je vous montrais les ratios de contraste de ce menu (lien de l’article). Aujourd’hui, je vous montre comment les daltoniens voient ce site.

Qu’est-ce que le daltonisme ?

La dyschromatopsie, couramment appelée le daltonisme, est une anomalie génétique de la perception des couleurs. Sur la rétine de l’œil, il y a 3 types de cônes photorécepteurs permettant de percevoir le bleu, le vert et le rouge. Chez les daltoniens, entre 1 et 3 types de cônes sont absents ou dysfonctionnent.

En France, il y a environ 8% d’hommes daltoniens et environ 0,4% de femmes.

Des personnes voyant les couleurs de naissance, peuvent aussi ne plus les voir suite à un choc cérébral, à des lésions oculaires ou nerveuses.

Les types de daltonisme

Selon le type de daltonisme, un seul type de cône, ou deux, ou les trois sont déficients.

• Deutéranopie : absence des cônes verts. Les personnes ne peuvent distinguer le vert du rouge.
• Deutéranomalie : sensibilité au vert diminué. Ça entraine une confusion des gammes de couleur du vert, jaune et de l’orange.
• Protanopie : absence des cônes rouges. Les personnes ne voient pas les rouges et les roses. Les jaunes, les verts et les rouges peuvent être confondus.
• Protanomalie : sensibilité au rouge diminué. Les rouges et les roses sont moins bien perçus.
• Tritanopie : absence des cônes bleus. Les bleus, verts et jaunes peuvent être confondus avec les cyans.
• Tritanomalie : sensibilité au bleu diminué. Les bleus sont moins bien vus. Les jaunes et verts peuvent être confondus.
• Achromatopsie : absence totale de la perception des couleurs.

Notre exemple de menu vu par les daltoniens

Le menu de notre exemple se compose d’un ensemble de boutons colorés représentant les catégories d’articles. Lors du calcul du ratio de contraste, on avait noté que les boutons 2, 3, 5, 6, 7 et 9 ont un ratio trop faible entre leur écriture et leur couleur de bouton, mais aussi un ratio trop faible entre la couleur du bouton et le bandeau gris.

On constate que pour chaque type de daltonisme, plusieurs couleurs sont similaires et ne permettent pas de distinguer les catégories.

Aussi pour chaque type de daltonisme présenté, plusieurs titres paraissent presque identiques, et il n’est pas possible de les distinguer.

Seul le titre 1, qui est un bouton sur fond noir, est perçu de la même manière par tout le monde.

La protanopie

Pour la protanopie : le rouge et le vert disparaissent du menu, le cyan est altéré aussi. Le menu apparaît noir, gris, bleu et jaune. Les titres 5 et 6 apparaissent similaires et proches des titres 3 et 7. Il est impossible de reconnaître la catégorie grâce aux couleurs. De plus, le titre 9 a une couleur un peu plus foncée que le fond gris, et ne s’en détache pas. On remarque que tous les titres évoqués ici ont un problème de contraste, comme expliqué dans mon article Couleurs et contrastes.

La deutéranopie

Pour la deutéranopie : là aussi le rouge et le vert disparaissent du menu, et certaines couleurs se modifient. Le fond gris apparaît rose. Les titres sont noir, bleu, gris et jaune. Mais ils sont vus différemment de la protanopie. Les titres 3, 5, 6 et 7 sont presque identiques et peu différentiables. Comme dans le daltonisme précédent le titre 9 est un peu plus foncé que le bandeau, et parait similaire.

La tritanopie

Pour la tritanopie : le jaune, vert, bleu foncé disparaissent. Le menu est ici noir, rouge, et dans des dégradés de bleu cyan et des dégradés de rose. Le fond apparait violet au lieu de gris. Dans ce cas, les titres 5 et 9 paraissent identiques. Les titres 3 et 7 se ressemblent, ainsi que les titres 2 et 6.

L’achromatopsie

Pour l’achromatopsie : les couleurs disparaissent. Le menu est en blanc, noir et niveaux de gris. Les titres 2, 4, 5, 6, 8 sont presque identiques. Les titres 7 et 9 sont presque similaires au fond du menu.

Mes recommandations 

Pour résumer, on remarque que les couleurs sont perçues différemment par les daltoniens. Pour eux, il n’est pas possible de distinguer plusieurs titres de couleurs trop proches.

Comme on peut le voir à travers cet exemple, l’information donnée à l’aide d’un code couleurs n’est pas visible par tous. D’ailleurs le WCAG recommande de ne pas donner des informations uniquement grâce à la couleur.

Pour aider tous les utilisateurs dans leur navigation, il serait intéressant de repenser le système de catégorisation.

Dans mon précédent article, je présente des maquettes simplifiées de modifications possibles. Ces propositions sont adaptées pour les utilisateurs daltoniens car elles s’appuient beaucoup moins sur les couleurs.

Vous souhaitez faire un audit UX de votre site pour améliorer la navigation ou vous voulez des conseils pour la création de votre site,

N’hésitez pas à me contacter !