Information par la couleur seule : ce qu'exige l'accessibilité (WCAG 1.4.1)

Information par la couleur seule : que dit le critère WCAG 1.4.1 ?

Le texte du critère est court : la couleur n'est pas utilisée comme seul moyen visuel de transmettre une information, d'indiquer une action, de solliciter une réponse ou de distinguer un élément visuel. Le document « Comprendre 1.4.1 » du W3C résume l'objectif en une phrase : la couleur ne doit pas être la seule façon de distinguer une information. Ce qu'il faut faire : utiliser, en plus de la couleur, une autre information, comme une forme ou du texte, pour transmettre le sens.

Le W3C donne des exemples très parlants des trois premiers cas. Information transmise par des différences de couleur : « les champs obligatoires sont en rouge », « l'erreur est affichée en rouge », « les ventes de Mary sont en rouge, celles de Tom en bleu ». Indication d'une action : utiliser la couleur pour signaler qu'un lien s'ouvrira dans une nouvelle fenêtre ou qu'une entrée de base de données a bien été mise à jour. Sollicitation d'une réponse : surligner des champs de formulaire pour indiquer qu'un champ obligatoire a été laissé vide.

Le W3C précise que ce critère ne doit en aucun cas décourager l'usage de la couleur sur une page, ni même le codage couleur, dès lors qu'il est complété par une autre indication visuelle.

Pourquoi la couleur seule exclut une partie des utilisateurs

L'intention du critère est que tous les utilisateurs voyants puissent accéder à une information véhiculée par des différences de couleur. Or certaines personnes ont des difficultés à percevoir les couleurs, et d'autres utilisent des écrans monochromes ou à couleurs limitées. Le W3C cite notamment :

• les personnes malvoyantes, qui ont souvent une vision des couleurs limitée ;
• de nombreux utilisateurs âgés, qui ne voient pas bien les couleurs ;
• les personnes ayant un déficit de la vision des couleurs, qui ne distinguent pas certaines couleurs entre elles ;
• les personnes qui utilisent des écrans ou navigateurs monochromes ou à couleurs limitées, qui ne peuvent pas accéder à une information présentée uniquement en couleur.

Ce que le critère couvre, et ce qu'il ne couvre pas

Le critère 1.4.1 porte spécifiquement sur la perception des couleurs. Il ne traite pas directement des besoins des utilisateurs de technologies d'assistance : il vise les personnes voyantes qui ne distinguent pas certaines couleurs. La manière dont l'information est transmise aux technologies d'assistance relève d'autres critères, notamment 1.1.1 (contenu non textuel), 1.3.1 (information et relations) et 4.1.2 (nom, rôle, valeur).

Attention au raisonnement inverse : une information transmise par la couleur peut être correctement restituée aux technologies d'assistance et pourtant échouer au critère, car une personne qui ne distingue pas certaines couleurs n'utilise pas forcément de technologie d'assistance. Le critère exige une alternative visible à la couleur.

Le critère ne s'applique pas non plus quand la couleur n'est pas utilisée pour transmettre une information, indiquer une action, solliciter une réponse ou distinguer un élément visuel. Le W3C prend l'exemple d'un lien stylé exactement comme le texte voisin : il n'échoue pas au critère, puisqu'aucune différence de couleur ne le distingue, même si ce manque de différenciation peut nuire à l'utilisabilité pour tout le monde.

Enfin, l'état « visité » des liens fait l'objet d'une exception. Le W3C relève plusieurs contraintes techniques : les navigateurs restreignent l'accès à l'état visité des liens, pour des raisons de confidentialité ; seule la couleur peut être modifiée via la pseudo-classe CSS :visited ; la gamme de couleurs ne permet pas, avec la seule couleur, de tenir à la fois un contraste de 3:1 entre liens et texte, un contraste de 3:1 entre liens visités et non visités, et un contraste de 4.5:1 pour tout le texte ; enfin, l'auteur ne peut pas définir lui-même l'état visité d'un lien. Le W3C en conclut que signaler l'état visité n'est pas une responsabilité de l'auteur : distinguer liens visités et non visités par la seule couleur n'est pas un échec, même sous un contraste de 3:1 entre les deux couleurs. Les liens textuels doivent en revanche toujours respecter les contrastes minimaux avec le fond de la page (critère 1.4.3).

Différence de luminosité : quand elle suffit, quand elle ne suffit pas

Une nuance importante figure dans les notes du W3C. Si deux couleurs diffèrent non seulement par leur teinte mais aussi nettement par leur luminosité, cela compte comme une distinction visuelle supplémentaire, à condition que l'écart de luminance relative donne un rapport de contraste d'au moins 3:1. Exemple donné : un vert clair et un rouge foncé diffèrent par la teinte et par la luminosité ; ils passent si le rapport de contraste atteint au moins 3:1. De même, distinguer un contenu en inversant les couleurs de premier plan et d'arrière-plan d'un élément est accepté, si ces couleurs ont un contraste suffisant.

En revanche, si le contenu repose sur la capacité de l'utilisateur à percevoir ou différencier une couleur précise, un indicateur visuel supplémentaire est nécessaire quel que soit le contraste. L'exemple du W3C : savoir si un contour est vert pour « valide » ou rouge pour « invalide ». Ici, la signification est portée par la teinte elle-même, et le contraste n'y change rien.

Liens, champs en erreur, graphiques : les échecs types et leurs solutions

Le W3C recense trois erreurs courantes considérées comme des échecs du critère. En regard de chacune, nous indiquons les techniques suffisantes du W3C qui s'y appliquent : le W3C les classe par situation (couleur de mots ou d'arrière-plans, couleur dans une image) et non par échec.

• Liens dans un texte (échec F73) : créer des liens qui ne sont pas visuellement identifiables sans la vision des couleurs. Techniques utiles : prévoir des indices visuels supplémentaires lorsque des différences de couleur du texte transmettent une information (G182), ou utiliser un rapport de contraste d'au moins 3:1 pour distinguer les liens du texte environnant (G183).
• Champs obligatoires ou en erreur (échec F81) : identifier les champs obligatoires ou en erreur uniquement par des différences de couleur. Technique utile : ajouter un indice textuel aux libellés de champs colorés (G205). Autre exemple du W3C, avec une icône comme indice visuel supplémentaire : des instructions en haut du formulaire expliquent que les champs obligatoires ont un libellé en rouge et une icône ; une personne qui ne distingue pas les libellés rouges des autres libellés voit toujours l'icône.
• Graphiques (échec F13, qui concerne aussi les critères 1.1.1 et 1.3.3) : un graphique qui transmet l'information par la couleur, des instructions qui ne font référence qu'à la couleur et une alternative textuelle qui n'inclut pas l'information portée par les couleurs. Techniques utiles : combiner couleur et motif (G111) et rendre l'information également disponible en texte (G14).
• Le W3C donne aussi l'exemple, pour une image, d'un examen où des élèves identifient les éléments d'un composé chimique dans une image SVG grâce aux couleurs et à des numéros placés à côté de chaque élément, avec une légende donnant la couleur et le numéro de chaque type d'élément.

Méthode pour vérifier vos pages

Pour chaque élément coloré de votre interface, posez-vous la question que pose le critère : la couleur transmet-elle une information, indique-t-elle une action, sollicite-t-elle une réponse ou distingue-t-elle un élément ? Si oui, cherchez l'autre indice visible. Points de contrôle pratiques :

• Liens dans un paragraphe : sont-ils repérables autrement que par leur teinte, par un indice visuel supplémentaire ou un contraste d'au moins 3:1 avec le texte voisin ?
• Formulaires : les champs obligatoires et les erreurs sont-ils signalés par du texte ou une icône, en plus du rouge ?
• Graphiques et cartes : chaque série est-elle identifiable par un motif, un libellé ou un numéro, et l'information figure-t-elle aussi en texte ?
• Consignes : vos instructions évitent-elles de renvoyer uniquement à une couleur, du type « cliquez sur le bouton vert » ?
• Statuts (succès, échec, validation) : le sens est-il compréhensible sans percevoir la teinte ?

Tester et surveiller dans la durée

Ces points de contrôle sont à revoir à chaque évolution de vos gabarits, de vos formulaires et de vos graphiques. Conformly propose un test gratuit de vos pages et une surveillance continue. Pour aller plus loin, consultez les ressources ci-dessous.

Questions fréquentes

À lire aussi sur Conformly

• Corriger les liens dans un bloc de texte en HTML
• Fiche du critère RGAA 3.1
• Fiche du critère RGAA 10.6

Sources

Article appuyé sur les sources officielles citées en fin de page.

• W3C — Comprendre 1.4.1