Dans chaque page web, l’information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?
8 % des hommes ont une forme de daltonisme. Pour eux, un champ de formulaire affiché en rouge ressemble exactement à un champ normal si c’est la seule différence. Si votre interface communique « ce champ est obligatoire » uniquement par la couleur rouge, une partie de vos utilisateurs ne reçoit pas cette information.
Ce critère impose qu’à chaque information véhiculée par la couleur corresponde au moins un autre indice visuel : une icône, un texte explicite, un effet typographique (gras, italique, soulignement), une forme géométrique, ou un attribut title. La couleur peut rester présente, elle aide ceux qui la perçoivent. Mais elle ne peut pas être le seul canal.
Le critère couvre six types de contenus : les mots mis en couleur, les textes, les images, les propriétés CSS, les médias temporels (vidéos, animations) et les médias non temporels (infographies, SVG statiques). Pour chaque occurrence, la question est simple : si vous supprimez les couleurs, l’information est-elle encore compréhensible ? Si non, le critère est violé.
Méthode de vérification rapide : désactivez les feuilles de style CSS dans votre navigateur (via l’extension Web Developer ou les DevTools) et parcourez la page. Tout contenu devenu incompréhensible sans la couleur est un défaut à corriger.
6 tests pour détecter si l'information repose uniquement sur la couleur
Information couleur dans un mot ou groupe de mots
- Repérez tous les mots ou groupes de mots dont la couleur transmet une information (ex. : un mot en rouge pour signaler une erreur, un terme en vert pour indiquer un statut valide).
- Pour chacun, vérifiez qu’un autre indice visuel est présent : attribut
title, icône adjacente, mise en forme typographique (<strong>,<em>, soulignement), forme ou position distincte. - Si chaque mot informationnel dispose d’un indice alternatif, le test passe. Un seul mot sans autre indice que la couleur suffit à faire échouer le test.
Information couleur dans un passage de texte
- Identifiez les passages de texte (phrases, paragraphes) dont la couleur du fond ou du texte communique une information (ex. : fond jaune pour un avertissement, texte bleu pour distinguer des liens dans du contenu courant).
- Pour chacun, vérifiez la présence d’un indice complémentaire : icône, libellé textuel explicite, attribut
title, effet typographique. - Si tous les passages ont un indice alternatif, le test passe. Sinon, il échoue.
Information couleur dans une image
- Repérez les images (PNG, JPG, SVG exporté…) dont le contenu utilise la couleur pour transmettre une information (ex. : graphique en courbes différenciées uniquement par couleur, carte géographique avec zones colorées).
- Pour chacune, vérifiez qu’un autre moyen est présent dans l’image elle-même ou dans son contexte : étiquette textuelle sur les données, forme différente, motif de remplissage, hachures, ou description complète dans l’attribut
alt. - Si chaque image dispose d’un indice alternatif, le test passe.
Information couleur via propriété CSS
- Identifiez les effets visuels générés par CSS qui transmettent une information par la couleur : fond coloré d’un élément actif, bordure colorée d’un champ en erreur, couleur de fond d’une ligne sélectionnée dans un tableau.
- Pour chacun, vérifiez qu’un autre indice visuel est présent (texte explicite, icône, forme, épaisseur de bordure différente, motif).
- Si chaque propriété CSS informationnelle a un indice alternatif, le test passe.
Information couleur dans un média temporel
- Visionnez les médias temporels présents (vidéos, animations) et repérez les moments où la couleur seule communique une information (ex. : une courbe rouge dans un graphique animé, un indicateur de statut qui change de couleur).
- Vérifiez que chaque information colorée dispose d’un équivalent : sous-titres, audio-description, libellé textuel visible à l’écran simultanément.
- Si chaque occurrence dispose d’un indice alternatif, le test passe.
Information couleur dans un média non temporel
- Examinez les médias non temporels : infographies, diagrammes SVG statiques, illustrations exportées. Repérez les informations transmises uniquement par la couleur (ex. : camembert avec légende colorée sans étiquettes sur les parts).
- Vérifiez que chaque information colorée a un équivalent visuel non coloré : étiquette textuelle directement sur les données, forme ou motif de remplissage distincts, ou description dans l’attribut
altouaria-label. - Si chaque média dispose d’un indice alternatif pour chaque information colorée, le test passe.
Exemples
❌ Non conforme : Champs obligatoires signalés uniquement par la couleur
<form>
<label for="nom" style="color: red;">Nom</label>
<input type="text" id="nom" name="nom">
<label for="email" style="color: red;">Adresse e-mail</label>
<input type="email" id="email" name="email">
<label for="tel">Téléphone</label>
<input type="tel" id="tel" name="tel">
</form>Les labels rouges sont censés indiquer que les champs sont obligatoires. Un utilisateur daltonien rouge-vert, ou quelqu’un qui consulte la page sans CSS (lecteur d’écran, mode contraste élevé, impression), ne reçoit pas cette information. Il ignore quels champs remplir en priorité avant de soumettre le formulaire.
✅ Conforme : Champs obligatoires signalés par couleur ET astérisque
<form>
<p>Les champs marqués d’un astérisque (<abbr title="obligatoire">*</abbr>) sont obligatoires.</p>
<label for="nom" style="color: red;">Nom <abbr title="obligatoire">*</abbr></label>
<input type="text" id="nom" name="nom" required aria-required="true">
<label for="email" style="color: red;">Adresse e-mail <abbr title="obligatoire">*</abbr></label>
<input type="email" id="email" name="email" required aria-required="true">
<label for="tel">Téléphone</label>
<input type="tel" id="tel" name="tel">
</form>L’information « obligatoire » est transmise par la couleur rouge ET par l’astérisque accompagné d’une légende en début de formulaire. Même sans CSS, le symbole * et l’instruction textuelle permettent de comprendre quels champs sont requis.
❌ Non conforme : Tableau de suivi où le statut critique est codé par la couleur de fond uniquement
<table>
<caption>Suivi des serveurs</caption>
<thead>
<tr>
<th>Serveur</th>
<th>Adresse IP</th>
<th>Charge CPU</th>
</tr>
</thead>
<tbody>
<tr style="background-color: #ffcccc;">
<td>srv-prod-01</td>
<td>192.168.1.10</td>
<td>94 %</td>
</tr>
<tr style="background-color: #ccffcc;">
<td>srv-prod-02</td>
<td>192.168.1.11</td>
<td>12 %</td>
</tr>
</tbody>
</table>Le fond rouge signale un serveur en surcharge critique, le vert un serveur en bonne santé. Aucune colonne, aucun texte ni aucune icône ne l’indique explicitement. Un utilisateur daltonien rouge-vert voit deux lignes visuellement identiques et ne détecte pas l’alerte. La couleur de fond seule est l’unique vecteur d’information.
✅ Conforme : Graphique en secteurs avec données accessibles via alt et figcaption
<figure>
<img
src="camembert-budget-2025.png"
alt="Répartition du budget 2025 : Marketing 40 %, R&D 35 %, Support 25 %"
>
<figcaption>
<ul>
<li>Marketing : 40 %</li>
<li>R&D : 35 %</li>
<li>Support : 25 %</li>
</ul>
</figcaption>
</figure>L’attribut alt décrit les données du graphique dans leur intégralité. La figcaption en fournit une version textuelle structurée, lisible même sans voir les couleurs des parts. Un utilisateur daltonien ou aveugle accède aux mêmes informations que celui qui distingue les couleurs du camembert.
Astuces et pièges
⚠️ Le tableau zébré sans colonne de statut textuel
Un tableau où les lignes critiques sont colorées en rouge sans aucune colonne de statut explicite est l’erreur la plus fréquente en audit de ce critère. Le correctif est minimal : ajouter une colonne « Statut » avec les valeurs textuelles (« Critique », « Normal »). La couleur de fond peut rester, elle devient alors un renforcement visuel plutôt que l’unique information.
💡 <strong> et <em> valident le critère, même s’ils ne sont pas lus par les lecteurs d’écran
Le RGAA précise explicitement que les balises <strong> et <em> constituent un autre moyen de récupérer une information donnée par la couleur, même si ces éléments ne sont pas systématiquement annoncés par les technologies d’assistance. Écrire <strong style="color: red;">champ obligatoire</strong> suffit à valider le test 3.1.1. C’est un des rares cas où le RGAA accepte une solution sémantique non perçue par les lecteurs d’écran.
⚠️ Les graphiques exportés en image sans étiquettes directes sur les données
Un PNG de graphique en courbes avec une légende colorée en dehors du graphique ne répond pas au test 3.1.3 si les courbes elles-mêmes ne portent pas d’étiquettes textuelles. La légende colorée sans autre distinction ne suffit pas. Solutions : étiqueter directement les courbes dans l’image, fournir les données dans un tableau HTML adjacent, ou décrire l’intégralité des données dans l’attribut alt.
⚠️ SVG inline : utiliser formes et motifs en plus des couleurs
Pour les médias non temporels en SVG inline (test 3.1.6), combiner des formes différentes (carré, cercle, triangle) et des motifs de remplissage (hachures, pointillés, plein) avec les couleurs est la solution la plus robuste. Elle bénéficie aussi aux utilisateurs qui impriment en noir et blanc ou qui travaillent sur un écran en mode monochrome.
⚠️ Un message d’erreur en rouge respecte le critère si le texte décrit l’erreur
Un message d’erreur textuel affiché en rouge sous un champ de formulaire n’est pas une violation. Le texte porte l’information ; la couleur n’est qu’un renforcement. Ce qui constituerait une violation : une simple icône rouge sans texte, ou une bordure rouge autour du champ sans aucun message d’erreur associé. La couleur seule ne peut pas être l’unique signal.
Questions fréquentes
Pourquoi une erreur signalée uniquement par la couleur rouge viole-t-elle le critère RGAA 3.1 ?
Oui, si le texte lui-même décrit l’erreur. Le texte est l’information ; le rouge est un renforcement visuel. Ce qui violerait le critère : une icône rouge sans texte, ou une bordure rouge autour d’un champ sans message d’erreur visible. Les tests 3.1.1 et 3.1.2 s’appliquent aux cas où la couleur est l’unique vecteur d’information, pas aux cas où elle l’accompagne.
Comment auditer un graphique en image PNG ou JPG pour le critère RGAA 3.1 ?
Appliquez le filtre CSS filter: grayscale(100%) sur l’image via les DevTools et vérifiez si les données restent lisibles. Si vous ne distinguez plus les séries d’un graphique ou les zones d’une carte, c’est une violation du test 3.1.3. Vérifiez ensuite l’attribut alt : s’il contient les données complètes, le critère est respecté même si l’image elle-même n’a pas de solution interne.
Comment évaluer les états hover et focus CSS dans le cadre du critère RGAA 3.1 ?
Oui, si ces états transmettent une information au sens du critère. Un bouton dont le fond seul passe au vert au survol pour indiquer « action disponible » viole le test 3.1.4. Ajouter un changement de forme, une icône ou un libellé supplémentaire au survol corrige le problème. Le focus est davantage couvert par le critère 10.7 (visibilité du focus), mais si la couleur de focus est le seul indice d’une information spécifique, 3.1 s’applique également.
Comment corriger une vidéo codant des données par la couleur lorsqu'on ne peut la modifier ?
L’audio-description ou les sous-titres peuvent mentionner explicitement l’information colorée (« la courbe rouge représente les ventes, la bleue les dépenses »). Pour un graphique animé sans narration, ajouter un tableau HTML adjacent avec les mêmes données répond au test 3.1.5 sans toucher au fichier vidéo. C’est souvent la solution la plus rapide en contexte d’audit de l’existant.
Pourquoi les liens distingués par la couleur seule dans le texte courant violent-ils RGAA 3.1 ?
C’est couvert par le test 3.1.2. Un lien identifié uniquement par sa couleur dans du texte courant est acceptable à deux conditions cumulatives : le rapport de contraste entre la couleur du lien et celle du texte environnant est d’au moins 3 :1, ET un indice visuel supplémentaire apparaît au survol ou au focus (soulignement, encadrement). Si l’une de ces deux conditions manque, c’est une violation.