Aller au contenu principal
Mynto
AccessibiliteRGAA 3.1Niveau ACouleurs

Information donnée par la couleur seule

Indiquer un champ obligatoire en rouge, colorer un lien sans autre indice, afficher une erreur sans icône... Ces pratiques excluent les personnes qui ne perçoivent pas les couleurs. C'est le critère RGAA 3.1, niveau A.

C'est quoi

Le critère RGAA 3.1 interdit de transmettre une information uniquement par la couleur. Toute information véhiculée par la couleur doit aussi être disponible via un autre moyen visuel : forme, motif, symbole, texte, soulignement...

Exemples d'erreurs courantes :

  • Champs obligatoires marqués uniquement avec un label rouge.
  • Liens identifiés seulement par leur couleur bleue, sans soulignement ni autre indice.
  • Graphiques dont les séries ne se distinguent que par leur couleur.
  • Messages d'erreur affichés uniquement en rouge, sans icône ni texte explicite.

La couleur peut rester un indice visuel complémentaire. Elle ne peut pas être le seul.

Qui est touché

  • Les personnes daltoniennes : environ 8 % des hommes et 0,5 % des femmes ont une forme de déficience de la vision des couleurs. La variante rouge-vert est la plus fréquente.
  • Les personnes utilisant un écran en mode contraste élevé ou niveaux de gris.
  • Les utilisateurs sur écran très lumineux ou en plein soleil, où les nuances de couleur s'effacent.

Impact business

Une erreur de formulaire visible uniquement en rouge passe inaperçue pour un utilisateur daltonien. Il soumet le formulaire, ne comprend pas pourquoi ça bloque, et abandonne.

Idem pour les liens non soulignés : une page dont les liens ne se distinguent du texte courant que par leur couleur est partiellement inutilisable pour une part non négligeable des visiteurs.

Le daltonisme touche jusqu'à 8 % des hommes (National Eye Institute). Sur un site à fort trafic masculin, c'est un segment significatif.

Sources des chiffres

Comment le détecter

  • Audit Mynto : le scan signale les éléments dont l'état ou le rôle semble transmis uniquement par la couleur.
  • Manuel - niveaux de gris : applique filter: grayscale(100%) sur body via les DevTools. Les liens sont-ils encore distinguables du texte courant ? Les indicateurs d'état restent-ils lisibles ?
  • Manuel - formulaires : repère tous les indicateurs visuels d'état (obligatoire, erreur, succès). Supprime mentalement la couleur. L'information reste-t-elle compréhensible ?
  • Outil : l'extension Chrome Colorblindly simule différents types de daltonisme directement sur la page.

Comment corriger

Avant - HTML
<!-- Champ obligatoire signalé uniquement par la couleur -->
<label style="color: red;">Nom</label>
<input type="text" name="nom">
Après - HTML
<!-- Champ obligatoire signalé par couleur + symbole + texte accessible -->
<label>
  Nom
  <span aria-hidden="true">*</span>
  <span class="sr-only">(obligatoire)</span>
</label>
<input type="text" name="nom" aria-required="true">

Ajoute un indice non-coloriel à chaque information transmise par la couleur :

  • Champs obligatoires : ajoute un astérisque * visible et un texte masqué visuellement (.sr-only) pour les lecteurs d'écran, plus aria-required="true" sur le champ. Pense aussi à afficher une légende en début ou fin de formulaire expliquant la signification de l'astérisque.
  • "Liens dans un bloc de texte : le RGAA accepte deux solutions. Soit un indice visuel permanent autre que la couleur (le soulignement est le cas type). Soit un contraste d'au moins 3:1 entre le lien et le texte environnant, complété par un indice visuel au survol et au focus. La graisse seule ne suffit pas."
  • Graphiques : utilise des formes, motifs ou étiquettes directes en plus des couleurs pour distinguer les séries de données.
  • Messages d'erreur : couple toujours la couleur avec une icône (croix, point d'exclamation) et un texte descriptif explicite.

Sur WordPress, vérifie les blocs natifs et les plugins de formulaire : la plupart ne passent pas ce critère par défaut. Les thèmes qui suppriment le soulignement des liens par défaut sont la cause la plus fréquente d'échec sur ce critère.

Questions fréquentes

Dois-je supprimer la couleur rouge de mes champs en erreur ?

Non. La couleur rouge peut rester - elle doit juste être accompagnée d'un autre indice visuel : une icône, un texte explicite ("Ce champ est obligatoire"), un symbole. La couleur est un complément, pas une information autonome.

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

Pas forcément soulignés, mais le RGAA est précis : soit le lien a un rapport de contraste d'au moins 3:1 avec le texte environnant ET un indice visuel supplémentaire au survol et à la prise de focus, soit il a un indice visuel permanent autre que la couleur. Le soulignement est la solution la plus simple et la plus robuste.

Ce critère s'applique-t-il aussi aux graphiques et tableaux ?

Oui. Un graphique en camembert dont les parts ne sont identifiées que par leur couleur échoue au critère 3.1. Ajoute des étiquettes textuelles directes sur les segments, ou un motif de hachure en complément de la couleur.

Mon thème WordPress supprime le soulignement des liens. Comment corriger ?

Ajoute une règle CSS ciblée sur le contenu textuel : a { text-decoration: underline; }. Si tu utilises un page builder, cherche le réglage "decoration" ou "style" des liens dans les options typographiques du thème.

À lire aussi

Cette erreur est-elle sur ton site ?

Lance un audit Mynto gratuit. Tu sauras en quelques minutes si ton site est concerné, sur quelles pages, et avec quel impact.