Quand une couleur transmet une information sur la page, cette information est-elle aussi communiquée d'une autre façon ?
Critère officiel 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 ?
Pourquoi c'est important
Une personne daltonienne ne perçoit pas certaines couleurs ou les confond. Si la couleur est le seul moyen de distinguer une information — un jour férié dans un agenda, une erreur dans un formulaire, une catégorie dans un tableau — cette information lui est totalement invisible.
Exemples concrets
Ce qui est conforme
Dans le calendrier des événements communaux, les jours fériés sont affichés en rouge ET accompagnés de la mention « Jour férié » en texte. Une personne qui ne distingue pas le rouge comprend tout de même l'information.
Ce qui pose problème
Le même calendrier utilise uniquement le rouge pour les jours fériés, sans texte ni icône complémentaire. Pour une personne daltonienne, ces jours sont visuellement identiques aux autres.
Comment agir
Parcourez votre site en cherchant les endroits où une couleur seule transmet une information : agenda, formulaires (champs obligatoires en rouge), tableaux, graphiques. Pour chacun, demandez à votre prestataire d'ajouter un texte ou une icône complémentaire. Les formulaires WordPress peuvent souvent être corrigés directement dans les réglages du plugin.
Règles clés
- La couleur peut être utilisée — elle doit simplement être accompagnée d'un autre vecteur : texte, icône, forme, motif, position, soulignement.
- Pour les liens dans le corps de texte : soit soulignement permanent, soit différence de contraste d'au moins 3:1 entre la couleur du lien et la couleur du texte environnant ET indicateur au survol/focus (critère 10.6).
- Pour les graphiques : chaque série doit être identifiable par son label, sa forme ou un motif — pas uniquement sa couleur.
- Le test pratique : convertir la page en niveaux de gris. L'information est-elle toujours lisible ?
Erreurs fréquentes
- Champ obligatoire indiqué uniquement par une bordure rouge ou un fond rosé
- Message d'erreur identifiable uniquement par sa couleur (rouge) sans icône ni mention textuelle 'Erreur'
- Lien dans un texte courant différencié du texte uniquement par la couleur (sans soulignement ni autre indicateur)
- Légende de graphique (camembert, courbe) sans étiquettes textuelles — seules les couleurs distinguent les séries
- Indicateur de disponibilité (vert = disponible, rouge = épuisé) sans texte ou icône complémentaire
- Bouton désactivé signalé uniquement par son gris — sans mention 'désactivé' ni attribut disabled/aria-disabled
Exemples de code
champ obligatoire — couleur seule
✗ Non conforme<label for="nom" style="color: red;">Nom</label>
<input type="text" id="nom" style="border: 2px solid red;">La couleur rouge signale le caractère obligatoire, mais un utilisateur daltonien ne perçoit pas cette distinction. Aucun autre vecteur n'est présent.
champ obligatoire — couleur + texte
✓ Conforme<label for="nom">
Nom
<span aria-hidden="true" style="color: red;"> *</span>
<span class="sr-only">(obligatoire)</span>
</label>
<input type="text" id="nom" aria-required="true">L'astérisque rouge est complété par la mention '(obligatoire)' pour les AT, et aria-required communique le caractère obligatoire programmatiquement. La couleur est un renfort visuel, pas le seul signal.
message d'erreur — couleur seule
✗ Non conforme<p style="color: #cc0000;">Veuillez saisir une adresse e-mail valide.</p>Texte rouge sans icône ni mention 'Erreur'. Un daltonien rouge-vert lisant un texte foncé sur fond blanc pourra ne pas percevoir la différence avec le texte normal.
message d'erreur — couleur + icône + rôle
✓ Conforme<p role="alert" style="color: #cc0000;">
<svg aria-hidden="true" focusable="false"><!-- icône erreur --></svg>
<strong>Erreur :</strong> Veuillez saisir une adresse e-mail valide.
</p>L'icône (forme), la mention textuelle 'Erreur :' (texte) et role="alert" (annonce AT) s'ajoutent à la couleur. Un daltonien accède à l'information par au moins deux vecteurs non-couleur.
lien dans du texte courant — non conforme
✗ Non conformep a {
color: #0066cc;
text-decoration: none;
}
p { color: #333333; }Le lien n'est distingué du texte environnant que par sa couleur. Un utilisateur daltonien ou en affichage monochrome ne peut pas l'identifier.
lien dans du texte courant — conforme
✓ Conforme/* Option 1 : soulignement permanent (le plus robuste) */
p a {
color: #0066cc;
text-decoration: underline;
}
/* Option 2 : contraste lien/texte >= 3:1 + indicateur hover/focus */
p a {
color: #0044aa; /* ratio vs #333333 : ~3.2:1 */
text-decoration: none;
}
p a:hover, p a:focus {
text-decoration: underline;
}Option 1 : le soulignement est un vecteur non-couleur suffisant. Option 2 : si pas de soulignement permanent, le ratio de contraste entre la couleur du lien et celle du texte doit être >= 3:1, ET un indicateur visuel doit apparaître au survol/focus.
Référence WCAG : 1.3.1, 1.4.1