Chapitre 7.2 — Ne pas se fier à la couleur

⏱️ TL;DR — La couleur est un excellent renfort, mais un mauvais unique messager. Le critère 1.4.1 (niveau A) interdit de transmettre une information par la seule couleur. Un lien reconnaissable uniquement parce qu’il est bleu, un champ « en rouge », un statut « au vert » : tout ça disparaît pour une personne daltonienne, un utilisateur de lecteur d’écran, ou quelqu’un en niveaux de gris. La règle est simple : couleur + un second signal (soulignement, icône, forme, texte, motif).

🎯 Objectifs

• Comprendre pourquoi la couleur seule exclut une partie des utilisateurs.
• Appliquer le critère 1.4.1 aux quatre cas les plus fréquents : liens, erreurs, statuts, graphiques.
• Ajouter systématiquement un second signal perceptible.
• Comprendre pourquoi le daltonisme est le cas type — mais pas le seul.

La règle, en une phrase

La couleur ne doit jamais être le seul moyen visuel de transmettre une information, d’indiquer une action ou de distinguer un élément.

Ça ne veut pas dire « pas de couleur ». La couleur reste utile — elle doit juste être doublée par autre chose que l’œil (ou le cerveau, ou le lecteur d’écran) peut percevoir indépendamment de la teinte.

Le daltonisme comme cas type

Environ 8 % des hommes et 0,5 % des femmes ont une forme de déficience de la vision des couleurs. La plus courante est la confusion rouge/vert (deutéranopie, protanopie) — précisément le couple qu’on adore utiliser pour « erreur » et « succès ». Pour ces personnes, un point rouge et un point vert peuvent paraître identiques.

Mais le daltonisme n’est que le cas le plus visible. La couleur seule échoue aussi pour :

• une personne aveugle : le lecteur d’écran n’annonce pas « ce texte est rouge » ;
• un écran en niveaux de gris, un mode sombre qui écrase les teintes, une impression noir et blanc ;
• une lecture en plein soleil, où les nuances de couleur s’effacent.

♿ Côté utilisateur — Pour un utilisateur de lecteur d’écran, la couleur n’existe pas dans le flux vocal. Si ton seul indice « ce champ est en erreur » est un bord rouge, il n’entendra rien. Le rouge est une information réservée aux voyants — et encore, pas à tous.

Cas n°1 : les liens dans un texte

Un lien au milieu d’un paragraphe, distingué uniquement par sa couleur bleue, est invisible pour qui ne distingue pas le bleu du noir environnant.

/* ❌ Le lien ne se distingue que par la couleur */
p a {
  color: #1a56c4;
  text-decoration: none;
}
 
/* ✅ Couleur + soulignement : deux signaux indépendants */
p a {
  color: #1a56c4;
  text-decoration: underline;
}

Le soulignement est le second signal le plus naturel pour un lien en pleine ligne. Dans une barre de navigation, où la position et le contexte suffisent déjà à identifier des liens, tu peux t’en passer — mais dès qu’un lien est noyé dans du texte courant, souligne-le.

Cas n°2 : les champs en erreur

Border rouge, et c’est tout. Classique, et non conforme.

<!-- ❌ La seule indication d'erreur est la couleur de la bordure -->
<input class="input-erreur" type="email" />
 
<!-- ✅ Icône + message texte explicite, en plus de la couleur -->
<label for="email">E-mail</label>
<input
  id="email"
  type="email"
  aria-invalid="true"
  aria-describedby="email-err"
/>
<p id="email-err" class="message-erreur">
  <span aria-hidden="true">⚠️</span>
  L'adresse e-mail n'est pas valide.
</p>

Le texte de l’erreur est l’essentiel : il dit quoi corriger, il est lu par le lecteur d’écran (relié via aria-describedby), et il ne dépend d’aucune couleur. L’icône renforce visuellement, la couleur attire l’œil — mais l’information vit dans le texte. On approfondit la gestion des erreurs de formulaire en Partie 9.

Cas n°3 : les statuts et badges

« Commande verte = livrée, orange = en cours, rouge = annulée. » Pour beaucoup de gens, ces trois pastilles se ressemblent. Ajoute toujours un libellé texte, et éventuellement une forme différente.

<!-- ❌ Le statut n'est qu'une pastille de couleur -->
<span class="pastille pastille--rouge"></span>
 
<!-- ✅ Forme + couleur + libellé texte : lisible par tous -->
<span class="badge badge--annulee">
  <span aria-hidden="true">✕</span> Annulée
</span>

Le texte « Annulée » règle tout : il est perçu par les daltoniens, lu par les lecteurs d’écran, visible en niveaux de gris. La couleur et la croix ne font qu’accélérer la lecture pour ceux qui les perçoivent.

Cas n°4 : les graphiques et data-viz

Un camembert ou des courbes qui ne se distinguent que par la teinte sont un piège classique. Deux séries rouge et verte sur un même graphe peuvent fusionner.

Doubler la couleur, ici, veut dire :

• des motifs ou textures différents pour chaque zone (hachures, points) ;
• des étiquettes directes posées sur ou à côté de chaque série, plutôt qu’une légende lointaine reliée par la seule couleur ;
• des formes de marqueurs distinctes sur des courbes (rond, carré, triangle) ;
• des contrastes de valeur (clair/foncé) et pas seulement de teinte.

⚠️ Piège — Le rouge/vert des états. C’est le réflexe le plus ancré du développeur : rouge = échec, vert = succès. Pour près d’un homme sur douze, ces deux couleurs sont proches ou identiques. Ne les supprime pas — double-les systématiquement : icône (✓ / ✕), mot (« Réussi » / « Échec »), ou position. La couleur devient un bonus, jamais le message.

🧭 Sur A11yLearn — Le tableau de bord d’A11yLearn affichait la progression des cours avec une seule pastille : verte « Terminé », rouge « À reprendre ». Un testeur daltonien nous a dit voir « des points gris tous pareils ». On a ajouté un libellé (« Terminé » / « À reprendre ») et une icône (✓ / ↻) à côté de chaque pastille. La couleur est restée — comme accélérateur, plus comme unique porteuse de sens. Les mêmes pastilles, mais l’information ne dépend plus de l’œil.

✏️ Exercices

Exercice 1 — Audite ce composant. Une liste de tâches affiche chaque échéance ainsi : le texte de la tâche passe en rouge quand elle est en retard, en vert quand elle est à l’heure. Rien d’autre ne change. Pourquoi est-ce non conforme, et comment corriger ?

Exercice 2 — Les champs obligatoires. Un formulaire indique les champs obligatoires en colorant leur label en rouge, avec en haut la mention « les champs en rouge sont obligatoires ». Qu’est-ce qui cloche et que proposes-tu ?

🧠 Quiz de révision

Chapitre suivant : Contraste non textuel — les bordures, icônes et indicateurs de focus ont eux aussi un seuil de contraste.