Designer pour l’humain : les couleurs – Critère 3.1 du RGAA 4.1

Novembre 2022
UX / UI design

Des problèmes de vision

Une proportion non négligeable de notre population a besoin de lunettes, cela ne date pas d’hier et cela ne s’arrange pas vraiment avec l’âge.
Si on se focalise sur la couleur uniquement : environ 9% des hommes et 1,5% des femmes ont une déficience de perception des couleurs !
La plupart des daltonismes sont héréditaires. Comme certains des gènes liés à la perception de la couleur sont portés par le chromosome X, il faut savoir que les hommes sont plus sujets à cela. Ci-dessous, vous pouvez observer la version officielle du logo Firefox au milieu de visions de personnes daltoniennes :Montage de plusieurs logo Firefox vus par des personnes daltoniennes

Application aux interfaces numériques

Un logo n’est pas porteur d’une information déterminante pour l’utilisateur.
En revanche, en remplissant un formulaire ou en consultant un article sur une page web, l’utilisateur daltonien doit avoir accès exactement au même niveau d’information que les autres.

Ce point est vérifié par le RGAA via le critère suivant :

« Critère 3.1. Dans chaque page web, l’information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ? »

Par exemple, si je ne perçois pas correctement la couleur , comment savoir que le mot « chromosome » ci-dessous est un lien hypertexte vers une page externe  ?

C’est tout simplement impossible !
Il faut donc avoir un deuxième critère de différenciation en plus de la couleur : effet de graisse, de soulignement, ou ajout d’un autre élément qui marquera une différenciation formelle :

 

Autre cas : dans une carte interactive, si l’information n’est portée que par la couleur, nous risquons de ne pas être bien compris. Sur l’exemple ci-dessous, sommes-nous certains que tout l’auditoire verra bien la délimitation entre toutes ces zones ?

Pour que l’utilisateur comprenne bien que chaque zone est délimitée et cliquable, une solution peut être d’ajouter un contour :

Bon à savoir : 1 ou 2 critères de différenciation suffisent, car 3 c’est souvent trop pour un design élégant !

 

Nos projets web ayant fait l’objet d’un travail spécifique d’accessibilité :

Fondation Inria
Métropole Toulon Provence Méditerranée
Fonds d’art contemporain – Paris Collections
Métropole Grand Lyon
Abbaye de Fontevraud