Information donnée par la couleur
L'information donnée par la couleur désigne toute situation où une différence de couleur est le seul moyen de transmettre un sens dans une interface web. Un champ en rouge pour signaler une erreur, un lien non souligné, un graphique sans étiquettes : autant de cas où les daltoniens perdent l'information. Le critère WCAG 1.4.1 (niveau A) et le critère RGAA 3.1 imposent de toujours doubler la couleur par un autre indice visuel.
Un champ de formulaire entouré de rouge pour signaler une erreur. Pas de texte, pas d'icône. Juste du rouge. Les daltoniens représentent 8 % de la population masculine. Pour eux, cette bordure n'existe pas. Et ils ne sont pas les seuls concernés : un écran sous le soleil, un mode monochrome, une impression noir et blanc. La couleur n'est jamais garantie.
#Ce que la règle exige
Le critère WCAG 1.4.1 (niveau A, le minimum) tient en une phrase : la couleur ne doit pas être le seul moyen visuel de transmettre une information, d'indiquer une action ou de distinguer un élément. Le RGAA reprend cette exigence au critère 3.1.
La règle ne dit pas « n'utilisez pas de couleur ». Elle dit : doublez-la. Texte, icône, motif, soulignement, forme. N'importe quel indice supplémentaire suffit.
#Trois pièges que vous croisez tous les jours
Les formulaires. Champs obligatoires signalés par une bordure rouge, erreurs de validation indiquées par un fond coloré. La correction tient en quelques attributs :
<!-- Non conforme : couleur seule -->
<input style="border-color: red;" />
<!-- Conforme : couleur + texte + attribut -->
<input aria-invalid="true" aria-describedby="err-email" />
<span id="err-email">Adresse e-mail invalide.</span>Les liens dans le texte. Un lien de la même police que le texte environnant, distingué uniquement par sa teinte bleue. Sans soulignement, un daltonien ne voit qu'un mot parmi d'autres. Le détail que beaucoup ignorent : même avec une couleur différente, il faut un ratio de contraste d'au moins 3:1 entre le lien et le texte autour pour que la différence soit perceptible.
Les graphiques. Des courbes ou des barres différenciées uniquement par la couleur, avec une légende tout aussi colorée. Ajoutez des motifs (hachures, pointillés) ou des étiquettes directes sur chaque série. C'est le seul moyen de rendre un graphique lisible pour tous.
#L'analogie du feu tricolore
Un feu de signalisation fonctionne pour les daltoniens. La raison n'a rien à voir avec les couleurs : c'est la position qui parle. Rouge en haut, orange au milieu, vert en bas. Votre interface devrait offrir le même type de redondance.
#En résumé
Passez votre page en niveaux de gris. Si une information disparaît, il manque un indice visuel. Texte, icône ou forme, le choix vous appartient.