Designer pour l’humain : les couleurs – Critère 3.1 du RGAA 4.1
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 :
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
Sylvain Hourany est le fondateur de Perméable.
Diplômé ingénieur de l’Université de Technologie de Compiègne en 2001, puis du mastère Multimédia – hypermédia ENSBA / ENST en 2002, Sylvain a fondé l’agence Perméable en 2003. Il a plus de 20 ans d’expérience dans l’accompagnement d’acteurs institutionnels, publics et privés dans la conception et la réalisation de leurs outils de communication.
Prêt à passer à l’étape suivante ?
On commence par un appel de 30 minutes, gratuit, sans engagement. Vous repartez avec un diagnostic clair des axes d’amélioration prioritaires de votre site internet.
Questions fréquentes
Oui. Un graphique en camembert ou en courbes qui distingue ses segments uniquement par la couleur ne satisfait pas le critère 3.1. Les solutions : ajouter des patterns ou textures différents à chaque segment, inclure des étiquettes directement sur les données, ou proposer un tableau de données alternatif. Les visualisations de données sont particulièrement concernées car elles sont souvent conçues par des équipes data qui ne sont pas formées à l’accessibilité.
Oui. Un message d’erreur sur un formulaire signalé uniquement par une couleur rouge ne respecte pas le critère 3.1. C’est l’un des cas les plus courants dans les interfaces non auditées : le champ devient rouge, mais un utilisateur daltonien ne le perçoit pas différemment d’un champ normal. La solution : combiner la couleur avec une icône (croix, point d’exclamation) et un message textuel explicite.
Oui, plusieurs. Coblis permet de simuler 8 types de déficiences chromatiques sur une image uploadée. L’extension Chrome « Colorblindly » applique ces simulations directement sur n’importe quelle page web en temps réel. Figma propose nativement un mode de simulation de la deutéranopie et de la protanopie dans son panneau d’accessibilité. Ces outils permettent de tester visuellement si une interface reste lisible sans reposer sur la distinction des couleurs.
Oui, dans la mesure où la couleur serait le seul moyen de distinguer ce texte du reste. Un texte mis en évidence uniquement par sa couleur (sans gras, sans italique, sans encadré) peut poser problème si cette mise en évidence porte une information (par exemple, les mots importants d’une consigne, les prix barrés dans un comparatif, ou les termes définis dans un glossaire). En revanche, un texte simplement stylisé pour des raisons esthétiques sans valeur informationnelle n’est pas concerné par ce critère.
Oui, dans le périmètre des obligations RGAA pour les organisations concernées. Les emails transactionnels et les newsletters HTML sont considérés comme des services numériques et entrent dans le périmètre d’audit. Un email qui signale le statut d’une commande, l’approbation d’une demande ou une alerte uniquement par la couleur d’un bloc ou d’un texte ne respecte pas le critère 3.1.
