Qu’est ce que l’information donnée par la couleur ?

Quel est le problème ?

La question des couleurs pose de vrais problèmes pour de nombreux utilisateurs. C’est le cas des personnes aveugles, des personnes très malvoyantes, mais aussi de celles qui ont des troubles de la perception des couleurs, comme le daltonisme, ou des difficultés à distinguer les contrastes.

Si une personne aveugle ne perçoit évidemment aucune couleur, beaucoup d’autres voient les couleurs de façon partielle ou altérée. Cela peut concerner une seule teinte, plusieurs couleurs, ou certaines associations de couleurs en particulier.

Ces troubles de la vision des couleurs sont loin d’être rares et peuvent fortement compliquer la compréhension des contenus ou l’utilisation d’un site. Dans certains cas, cela peut même rendre certaines fonctionnalités inutilisables.

Le problème devient encore plus important lorsque la couleur est utilisée comme seul moyen pour transmettre une information. Par exemple, si dans une liste vous affichez les éléments obligatoires en rouge et les éléments facultatifs en noir, une personne qui ne distingue pas ces couleurs ne pourra pas faire la différence. C’est pourquoi il est indispensable d’ajouter un autre repère, comme un texte ou un symbole, afin que l’information reste accessible à tout le monde.

Enfin, il ne faut pas oublier la question des contrastes. Pour un utilisateur ayant des difficultés visuelles, un texte dont la couleur se rapproche trop de celle du fond peut devenir très difficile, voire impossible à lire. Un contraste insuffisant nuit directement à la lisibilité et donc à l’accessibilité du contenu.

Prenons un exemple 

« Un formulaire comporte des champs obligatoires et facultatifs. Les instructions en haut du formulaire précisent que les champs obligatoires sont signalés par un texte rouge et une icône. Les utilisateurs qui ne perçoivent pas la différence entre les libellés des champs facultatifs et les libellés rouges des champs obligatoires pourront néanmoins voir l’icône à côté de ces derniers. » Source WCAG 21

Ce que disent les standards (RGAA & WCAG)

Juste pour rappel

Le RGAA (Référentiel Général d’Amélioration de l’Accessibilité) est le cadre français qui définit des règles pour rendre les sites web et services numériques accessibles aux personnes en situation de handicap. Il s’adresse principalement aux organismes publics et aux structures ayant des obligations légales en matière d’accessibilité.

Les WCAG (Web Content Accessibility Guidelines) sont les recommandations internationales publiées par le W3C. Elles fixent des principes universels pour concevoir des contenus web accessibles à tous. Le RGAA s’appuie d’ailleurs directement sur ces normes pour établir ses critères.

Ce que disent RGAA et WCAG sur l’information donnée par la couleur

RGAA 4.1 (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 ?

WCAG 2.1 (Succès 1.4.1 – Use of Color)

La couleur n’est pas utilisée comme la seule façon de véhiculer de l’information, d’indiquer une action, de solliciter une réponse ou de distinguer un élément visuel.

Définissons l’objectif de ce critère RGAA – Le Critère 3.1

Ce critère vise à s’assurer que toutes les informations transmises par la couleur soient accessibles à tous les utilisateurs. En d’autres termes, lorsque chaque couleur a une signification spécifique dans un contenu, elle ne doit pas être le seul vecteur d’information.

Par exemple, une personne daltonienne pourrait ne pas percevoir certaines différences de couleur. Fournir la même information par un autre moyen visuel — texte, symbole, motif — permet alors à ces utilisateurs de la comprendre pleinement.

La couleur reste un outil précieux dans la conception web : elle enrichit l’esthétique, facilite la navigation et peut améliorer l’accessibilité. Cependant, certaines personnes ont des difficultés à percevoir correctement les couleurs. Les personnes malvoyantes voient souvent les couleurs de manière altérée, de même que beaucoup de personnes âgées. Par ailleurs, les utilisateurs d’écrans monochromes ou de dispositifs à palette de couleurs limitée ne pourront pas accéder aux informations transmises uniquement par la couleur.

Qui est concerné ?

  • Les personnes malvoyantes perçoivent souvent les couleurs de façon limitée

  • Certaines personnes âgées peuvent avoir des difficultés à distinguer certaines couleurs.

  • Les personnes atteintes de daltonisme, qui ne perçoivent pas certaines couleurs, bénéficient lorsque les informations transmises par la couleur sont également disponibles par d’autres moyens visuels.

  • Les utilisateurs d’écrans monochromes ou à palette de couleurs restreinte peuvent ne pas accéder aux informations dépendant uniquement de la couleur.

  • Pour tous ceux qui ont des difficultés à distinguer les couleurs, les indices textuels ou sonores permettent de comprendre les informations véhiculées.

Tests du critère 3.1

  • 3.1.1 – Pour chaque mot ou ensemble de mots dont la mise en couleur est porteuse d’information, l’information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?
  • 3.1.2 – Pour chaque indication de couleur donnée par un texte, l’information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ? 
  • 3.1.3 – Pour chaque image véhiculant une information, l’information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ? 
  • 3.1.4 – Pour chaque propriété CSS déterminant une couleur et véhiculant une information, l’information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?
  • 3.1.5 – Pour chaque média temporel véhiculant une information, l’information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?
  • 3.1.6 – Pour chaque média non temporel véhiculant une information, l’information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?

Quelques cas concrets et bonnes pratiques

1. Les formulaires et messages d’erreur

Entourer un champ de saisie en rouge pour indiquer une erreur sans ajouter de texte explicatif.
La solution : Ajouter une icône d’alerte et un message textuel explicite (ex: « Le format de l’email : prenom.nom@mondomaine.fr »).

2. Les liens hypertextes

Identifier les liens dans un bloc de texte uniquement par leur couleur bleue.
La solution : Souligner les liens ou utiliser une graisse de police différente pour qu’ils se distinguent du texte environnant sans dépendre de la couleur.

3. La visualisation de données (Graphiques)

Un diagramme circulaire où la légende repose uniquement sur des carrés de couleur.
La solution : Ajouter des motifs (hachures, points), des étiquettes directement sur les portions du graphique, ou des bordures contrastées.

4. Un formulaire avec un bouton vert

Une demande de prêt en ligne explique que les boutons verts permettent de progresser dans le processus et les boutons rouges de l’annuler.
La solution : Un formulaire contient un bouton vert portant la mention « Valider » . Les instructions indiquent : « Appuyez sur le bouton “Valider” pour soumettre vos résultats et passer à l’étape suivante. » – Source WCAG

En résumé

Respecter le critère 3.1 du RGAA, c’est s’assurer que si vous passiez votre site en noir et blanc, vous ne perdriez aucune information. C’est rendre votre interface plus robuste, plus intelligente et, surtout, ouverte à tous.