RGAA Lab

RGAA 4.1.2 · Couleurs · 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 ?

« Les champs en rouge sont obligatoires » ne dit rien à qui ne distingue pas le rouge — et une personne sur douze, chez les hommes, ne le distingue pas.

Ce que dit le référentiel

Transcription du RGAA 4.1.2, sans interprétation. C’est ce texte qui fait foi, et celui que vous citez dans un rapport.

  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 ?
  2. 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. 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 ?
  4. 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 ?
  5. 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 ?
  6. 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 ?

Comment le vérifier

  1. Parcourir la page en cherchant les endroits où une couleur classe, distingue ou alerte : champs en erreur, statuts, légendes de graphique, lien dans un paragraphe, ligne surlignée d'un tableau.
  2. Pour chacun, se demander ce qui reste si l'on retire la couleur : un mot, un symbole, un soulignement, un motif, une position. S'il ne reste rien, le critère échoue.
  3. Vérifier aussi les consignes qui nomment une couleur (« cliquez sur le bouton vert ») : elles supposent qu'on la voit, et doivent s'accompagner d'un autre repère.
  4. Ne pas oublier les images, les graphiques et les vidéos : le critère porte sur toute la page, pas seulement sur le texte stylé en CSS.
  5. Un affichage en niveaux de gris — ou une simulation de daltonisme — donne un premier tri rapide, mais ne remplace pas la lecture : certains repères survivent au gris et restent illisibles pour un daltonien.

Ce que notre outil fait

Jugement humain

Aucune machine ne tranche ce critère. L’outil vous présente les éléments et enregistre votre constat.

Rien dans le code ne distingue une couleur décorative d'une couleur porteuse de sens : color: red sur un message peut être une charte graphique ou la seule marque d'une erreur. L'outil vous laisse la question entière, et la pose en un seul bloc, avec pour toute aide deux exemples — liens soulignés, champs en erreur. Les autres situations à balayer (consignes qui nomment une couleur, images, graphiques, médias) ne sont rappelées nulle part : c'est la méthode ci-dessus qu'il faut dérouler, pas la question de l'assistant.

Comment nous mesurons ce que l'outil sait faire · ce critère s'audite dans l'extension RGAA Lab.

Les pièges

Les erreurs qu’on rencontre vraiment, relevées au fil des audits.

  • Le cas le plus fréquent : les champs de formulaire en erreur, entourés de rouge et rien d'autre. Le message d'erreur en texte est la correction attendue, et elle sert aussi le critère 11.10.
  • Les liens dans un corps de texte, distingués de la seule couleur, sont l'autre grand classique. Le RGAA accepte un autre repère visuel qu'un soulignement, mais il en faut un — ou un rapport de contraste suffisant entre le lien et le texte qui l'entoure, doublé d'un repère au survol et au focus.
  • Une légende de graphique qui associe une couleur à une série sans étiquette, motif ni valeur adjacente échoue, même si le graphique est par ailleurs joli.
  • Ce critère ne parle jamais de contraste : un texte gris très pâle sur blanc relève du 3.2, pas du 3.1.

À lire avec