RGAA 3.1 — Dans chaque page web, l'information ne doit pas être donnée uniquement par la couleur.

Information donnée uniquement par la couleur

Le problème

Ce problème survient lorsque la couleur est le seul moyen de transmettre une information, d'indiquer une action, de solliciter une réponse ou de distinguer un élément visuel. Le critère RGAA 3.1 (correspondant au WCAG 1.4.1, niveau A) exige qu'un moyen complémentaire (texte, forme, motif, position, épaisseur de trait) soit utilisé pour véhiculer la même information.

Les exemples les plus fréquents incluent : les champs de formulaire obligatoires identifiés uniquement par un astérisque rouge, les liens distingués du texte environnant uniquement par la couleur (sans soulignement), les graphiques dont les séries de données ne sont différenciées que par la couleur, les indicateurs d'état (vert = en ligne, rouge = hors ligne) sans étiquette textuelle, et les messages d'erreur ou de succès identifiés uniquement par un fond coloré.

C'est un critère de niveau A, donc fondamental, mais il est très fréquemment enfreint car les designers s'appuient naturellement sur la couleur comme canal d'information primaire.

Impact sur les utilisateurs

Environ 4,5% de la population mondiale est daltonienne -- 8% des hommes et 0,5% des femmes. Pour ces personnes, les informations véhiculées uniquement par la couleur sont partiellement ou totalement inaccessibles. Un graphique avec une courbe rouge « dépenses » et une courbe verte « revenus » est illisible pour une personne atteinte de deutéranopie (la forme la plus courante de daltonisme).

Les utilisateurs de lecteurs d'écran ne perçoivent aucune couleur par définition. Si un champ obligatoire est identifié uniquement par un astérisque rouge sans mention textuelle « obligatoire », le lecteur d'écran n'a aucun moyen de transmettre cette information.

Même pour les utilisateurs sans déficience, la couleur seule est insuffisante dans certaines conditions : écran noir et blanc, impression en niveaux de gris, projection avec un vidéoprojecteur de mauvaise qualité, ou consultation dans un environnement très lumineux qui altère la perception des couleurs.

Votre site a-t-il ce problème ?

106 critères RGAA analysés en 5 minutes par notre IA.

Testez votre site gratuitement

Exemple de code

Avant (non conforme)

<!-- Lien distingué uniquement par la couleur -->
<p>Consultez notre <a href="/politique"
  style="color: blue; text-decoration: none;">
  politique de confidentialité</a>.</p>

<!-- Statut indiqué uniquement par la couleur -->
<span style="color: green;">●</span> En ligne
<span style="color: red;">●</span> Hors ligne

<!-- Champ obligatoire identifié par la couleur seule -->
<label style="color: red;">Nom *</label>
<input type="text">

<!-- Graphique avec couleurs uniquement -->
<div class="legend">
  <span style="background: red;">■</span> Dépenses
  <span style="background: green;">■</span> Revenus
</div>

Après (conforme)

<!-- Lien avec soulignement en plus de la couleur -->
<p>Consultez notre <a href="/politique"
  style="color: blue; text-decoration: underline;">
  politique de confidentialité</a>.</p>

<!-- Statut avec texte en plus de la couleur -->
<span style="color: green;">●</span> En ligne (connecté)
<span style="color: red;">●</span> Hors ligne (déconnecté)

<!-- Champ obligatoire avec indication textuelle -->
<label>Nom <span aria-hidden="true">*</span>
  <span class="sr-only">(obligatoire)</span>
</label>
<input type="text" required aria-required="true">

<!-- Graphique avec motifs en plus des couleurs -->
<div class="legend">
  <span style="background: red;">///</span> Dépenses
  <span style="background: green;">■■■</span> Revenus
</div>

Comment Scrutia détecte ce problème

Scrutia analyse chaque page pour identifier les informations transmises uniquement par la couleur. Il détecte les liens sans soulignement ni autre distinction visuelle, les champs obligatoires sans indication textuelle, les messages de statut ou d'erreur codés uniquement par couleur, et les graphiques dont les séries ne sont différenciées que par la couleur. Le rapport propose des alternatives complémentaires pour chaque cas.

Questions fréquentes

Les liens doivent-ils toujours être soulignés ?

Si les liens ne sont pas soulignés, ils doivent être distingués du texte environnant par un autre moyen que la couleur : gras, icône, bordure, changement de style au survol et au focus. Le moyen le plus fiable et universellement compris reste le soulignement.

Comment rendre les graphiques accessibles aux daltoniens ?

Ajoutez des motifs (hachures, pointillés, traits) en plus des couleurs, utilisez des étiquettes directes sur les courbes ou barres, et assurez un contraste suffisant entre les couleurs utilisées. Proposez aussi une alternative textuelle (tableau de données).

Les indicateurs de formulaire « * = obligatoire » sont-ils suffisants ?

L'astérisque seul n'est pas suffisant s'il est uniquement coloré. Il doit être accompagné d'une légende « Les champs marqués d'un * sont obligatoires » et l'attribut required ou aria-required doit être présent sur les champs.

Ce critère s'applique-t-il aussi aux animations et transitions ?

Oui. Si un changement d'état est signalé par une transition de couleur (un bouton qui passe du vert au rouge), un autre indicateur doit accompagner le changement : texte, icône, changement de forme.

Votre site a-t-il ce problème ?

Scrutia audite votre site sur 106 critères RGAA en 5 minutes. Navigation clavier, composants ARIA, focus visible, contrastes, et bien plus.

Lancer un audit gratuit