Information donnée uniquement par la couleur

Un champ entouré de rouge, un lien qui ne change que de couleur, une légende qui dit « la courbe verte »… Ces signes reposent sur la couleur seule, un défaut classique d’accessibilité numérique. Or une partie du public ne les perçoit pas : personnes daltoniennes ou malvoyantes, écran en niveaux de gris, soleil sur un téléphone, impression en noir et blanc.

La règle est simple : une information ne doit jamais passer par la couleur seule. Ce guide l’explique avec des exemples avant et après, puis montre comment la vérifier. Le ratio de contraste est un nombre de 1 : 1 à 21 : 1 qui mesure l’écart de clarté entre deux couleurs (voir Comprendre le contraste WCAG). Les ratios cités sont calculés avec le même moteur que nos outils gratuits.

Que dit la règle sur l’information donnée par la couleur seule ?

Le critère 1.4.1 des WCAG 2.2, les règles internationales d’accessibilité du web, se nomme « Utilisation de la couleur ». Il est de niveau A, le premier niveau de conformité. Le RGAA 4.1.2, le référentiel français, le reprend dans son critère 3.1.

La couleur ne doit pas être le seul moyen visuel de transmettre une information, d’indiquer une action, de demander une réponse ou de distinguer un élément. Voici un exemple pour chacune de ces situations.

• Transmettre une information : « les champs obligatoires sont en rouge ».
• Indiquer une action : une couleur différente signale qu’un lien s’ouvre dans une nouvelle fenêtre.
• Demander une réponse : un champ obligatoire resté vide est simplement surligné.
• Distinguer un élément : les ventes de Marie sont en rouge, celles de Tom en bleu.

Un test simple repère le problème : retirez mentalement la couleur. Si le sens disparaît, il manque un second signe. Ce second signe doit être visible. Un texte réservé aux lecteurs d’écran ne suffit pas.

Erreurs de formulaire et champs obligatoires

C’est le cas le plus fréquent. Un champ invalide est entouré de rouge, un champ obligatoire a son libellé en rouge, et rien d’autre ne change.

Ajoutez donc un message écrit à côté du champ, avec une icône. Dites ce qui ne va pas plutôt que de signaler seulement une erreur. Pour un champ obligatoire, écrivez « (obligatoire) » dans le libellé, ou utilisez un astérisque expliqué en haut du formulaire.

Liens dans un texte : ne pas les distinguer par la couleur seule

Dans un paragraphe, un lien sans soulignement qui ne diffère du texte que par sa couleur est un autre cas classique. Pour une personne qui distingue mal les couleurs, il se confond avec le texte qui l’entoure.

La solution la plus sûre est de garder le soulignement. C’est le style par défaut des navigateurs et le signe que tout le monde connaît. Cette exigence vise les liens au milieu d’un texte : un menu ou une liste de liens se reconnaît à sa place dans la page.

Et si l’on veut retirer le soulignement ?

Les WCAG admettent une autre voie, décrite par une technique du W3C. Deux conditions s’ajoutent :

1. le lien a un ratio d’au moins 3 : 1 avec le texte qui l’entoure ;
2. le lien et le texte atteignent chacun 4,5 : 1 avec le fond, comme tout texte (critère 1.4.3).

Avec un texte presque noir #222222 (15,90 : 1 sur blanc), la marge est étroite : le lien doit être assez clair pour se distinguer du texte, mais assez foncé pour rester lisible sur le fond.

Le premier bleu se lit très bien sur blanc, mais il se distingue trop peu du texte. Le second réussit les deux tests, avec 3,30 : 1 et 4,81 : 1. Même dans ce cas, le W3C conseille d’ajouter un soulignement ou du gras, surtout avec des couleurs foncées.

Pastilles d’état, onglets et consignes

Pastilles et badges d’état

Un point vert pour « en ligne » et un point rouge pour « hors ligne » sont un classique du tableau de bord. Notre rouge #c62828 et notre vert #2e7d32 se lisent bien sur blanc (5,62 : 1 et 5,12 : 1), mais leur ratio entre eux n’est que de 1,09 : 1 : ils ont presque la même clarté.

Dans notre simulateur, l’écart perçu entre ces deux couleurs (0 si elles sont identiques, et sous 10 elles se confondent) tombe à 6,8 sous deutéranopie, le daltonisme du vert. Il est de 14,9 sous protanopie et de 47,5 sous tritanopie. Les types de daltonisme sont détaillés dans notre guide Daltonisme : concevoir un site lisible par tous.

Onglet ou filtre sélectionné

Un onglet actif qui change seulement de couleur de fond pose le même problème. Ajoutez un signe qui ne dépend pas de la teinte (la couleur elle-même, comme le rouge ou le vert) : un soulignement épais, une coche, un texte en gras ou une forme différente.

Consignes qui citent une couleur

« Cliquez sur le bouton vert » ne dit rien à qui ne distingue pas le vert. Nommez le bouton à la place : « Cliquez sur le bouton Valider ».

Graphiques, légendes et cartes

Les graphiques sont le terrain où la couleur seule pose le plus de problèmes, car la légende oblige à associer une teinte à une série. Les cartes, qui colorent des régions selon une catégorie, ont le même défaut.

• Écrivez le nom de la série directement sur la courbe ou sur la barre.
• Variez le tracé (plein, pointillé), la forme des marqueurs (cercle, carré, triangle) ou le remplissage (hachures, points).
• Affichez les valeurs en chiffres, ou proposez la même donnée dans un tableau. Sur une carte, ajoutez un motif par catégorie.

Les éléments d’un graphique doivent aussi être assez contrastés avec leur fond : voir Contraste des boutons, champs et icônes. Pour choisir des couleurs distinctes, suivez notre guide Créer une palette de couleurs accessible.

Ce qui n’est pas un défaut

Le critère ne demande pas de supprimer la couleur. Trois cas ne posent pas problème.

• Une couleur décorative. Un bandeau ou un fond de section qui ne porte aucune information n’est pas concerné.
• Une couleur qui double un autre signe. Un message d’erreur rouge qui dit « Erreur » et porte une icône est conforme : la couleur renforce sans remplacer.
• Un lien visité. Les navigateurs limitent ce que l’auteur peut faire, donc un lien visité qui ne change que de couleur n’est pas un échec. Le texte du lien doit tout de même rester assez contrasté.

Comment tester l’utilisation de la couleur

Trois vérifications rapides suffisent à repérer l’essentiel.

1. Passez la page en niveaux de gris. Les outils de développement de Chrome et d’Edge (F12) émulent plusieurs déficiences visuelles, dont l’achromatopsie, dans le panneau « Rendering ». Les systèmes d’exploitation proposent aussi un filtre en niveaux de gris dans leurs réglages d’accessibilité.
2. Simulez les types de daltonisme. Notre simulateur affiche vos couleurs ou une capture d’écran comme les voient les personnes daltoniennes.
3. Relisez la page sans la couleur. Pour chaque élément coloré, demandez-vous quel autre signe porte le sens.