Un lien rouge dans un texte noir pour signaler un lien externe. Un champ de formulaire qui devient rouge pour indiquer une erreur. Une carte avec des zones vertes et rouges pour montrer des niveaux de service. Ces solutions graphiques semblent claires et intuitives, jusqu’à ce qu’on les regarde avec les yeux d’une personne daltonienne.
Le critère 3.1 du RGAA est catégorique : l’information ne doit pas être transmise uniquement par la couleur. La couleur peut participer à la communication visuelle, mais jamais être le seul vecteur d’une information.
Les types de daltonisme : chiffres et réalité
Le daltonisme n’est pas un phénomène rare ou marginal.
8% des hommes et 0,5% des femmes présentent une forme de daltonisme. En France, c’est environ 2,4 millions d’hommes et 150 000 femmes. Sur un site de commune avec 5 000 visiteurs par mois, c’est potentiellement 400 personnes qui ne perçoivent pas les couleurs comme les autres.
Les formes les plus courantes :
Deutéranopie et deutéranomalie (~5% des hommes) : perception réduite ou absente du vert. La distinction rouge/vert devient difficile ou impossible. C’est la forme la plus répandue.
Protanopie et protanomalie (~1% des hommes) : perception réduite ou absente du rouge. Le rouge apparaît comme du brun foncé ou du noir.
Tritanopie (rare, ~0,001%) : perception réduite du bleu. Confusion entre bleu et jaune, vert et violet.
Achromatopsie (très rare) : vision en niveaux de gris uniquement. Toutes les couleurs apparaissent comme des nuances de gris.
La deutéranopie est la forme à garder en tête en conception : si une distinction rouge/vert est lisible pour un deutéranope, elle l’est pour l’immense majorité des utilisateurs.
Ce que voient les daltoniens
Pour une personne avec une deutéranopie, une carte des transports avec des lignes rouge, orange et verte devient une carte avec des lignes de teintes brunes-orangées presque indistinguables. Un formulaire avec des champs valides en vert et invalides en rouge montre des champs de couleur similaire.
Ce n’est pas une perception “dégradée”, c’est une perception différente. Le problème n’est pas dans les yeux de l’utilisateur, il est dans un design qui suppose que tout le monde voit les mêmes couleurs.
Ce que “information par la couleur seule” signifie en pratique
La règle n’interdit pas d’utiliser la couleur pour transmettre une information. Elle interdit de s’appuyer sur la couleur comme seul moyen.
Situation problématique : un lien qui se distingue du texte environnant uniquement par sa couleur (bleu sur noir, sans soulignement ni autre indicateur).
Situation conforme : le même lien avec un soulignement, ou un picto, ou une indication textuelle, la couleur contribue mais n’est pas le seul vecteur.
Les pièges les plus fréquents
Les liens dans le corps de texte
Le cas le plus courant. Un lien de la couleur primaire du site (bleu, vert, rouge…) intégré dans un paragraphe de texte noir ou gris foncé. Pour un utilisateur avec une anomalie de perception des couleurs, ou en vision dégradée (faible contraste, affichage noir et blanc), ce lien est invisible en tant que lien.
/* ✗ La couleur seule distingue le lien du texte */
a {
color: #1A56A0;
text-decoration: none;
}
/* ✓ Soulignement comme second vecteur */
a {
color: #1A56A0;
text-decoration: underline;
}
/* ✓ Ou soulignement au hover/focus si le lien est dans un contexte clairement identifiable */
nav a {
color: #1A56A0;
text-decoration: none;
}
nav a:hover, nav a:focus {
text-decoration: underline;
}Note sur les liens de navigation : les liens dans un <nav>, dans une liste explicitement présentée comme navigation, dans un bouton, sont dans un contexte suffisamment identifiable. Ils n’ont pas besoin d’un soulignement si leur nature de lien est évidente par le contexte. En revanche, les liens dans un corps de texte (article, paragraphe, description) doivent toujours avoir un indicateur non coloriel.
Les messages d’état dans les formulaires
Un champ de formulaire valide affiché en vert, un champ invalide affiché en rouge. Si la seule différence est la couleur du contour ou du fond, un utilisateur daltonien ne peut pas distinguer les deux états.
<!-- ✗ Seule la couleur indique l'erreur -->
<input type="email" class="champ-erreur">
<style>
.champ-erreur { border-color: red; }
</style>
<!-- ✓ Couleur + icône + texte d'erreur -->
<div class="champ-wrapper champ-erreur">
<input type="email" aria-invalid="true" aria-describedby="msg-email">
<span class="icone-erreur" aria-hidden="true">⚠</span>
<p id="msg-email" class="msg-erreur">
Format invalide. Exemple : nom@domaine.fr
</p>
</div>L’icône ⚠ et le texte explicite transmettent l’information indépendamment de la couleur.
Les indicateurs de statut (badges, pastilles)
Un badge vert pour “disponible”, rouge pour “complet”, orange pour “limité”. Si seule la couleur distingue les trois états, les daltoniens ne peuvent pas les différencier.
<!-- ✗ Information uniquement dans la couleur -->
<span class="badge badge-vert">●</span>
<!-- ✓ Texte + couleur -->
<span class="badge badge-disponible">Disponible</span>
<span class="badge badge-complet">Complet</span>
<span class="badge badge-limite">Places limitées</span>Ou avec une icône distinctive pour chaque état :
<span class="statut statut-dispo">✓ Disponible</span>
<span class="statut statut-complet">✗ Complet</span>
<span class="statut statut-limite">! Places limitées</span>Les graphiques et visualisations de données
Les graphiques à secteurs, les graphiques en barres, les cartes choroplèthes, toute visualisation qui utilise la couleur pour distinguer des catégories.
Si deux secteurs d’un graphique circulaire ne se distinguent que par leur couleur (pas de label, pas de texture, pas de hachure), un utilisateur daltonien ne peut pas les identifier.
Alternatives :
- Étiquettes directes sur chaque élément (pas seulement dans la légende)
- Textures ou hachures pour les éléments en plus des couleurs
- Palettes de couleurs testées pour le daltonisme (voir outils dans l’article suivant)
- Tableau de données accessible en complément du graphique
Les calendriers et agendas
Un agenda municipal qui code les événements par couleur (fête → rose, réunion → bleu, marché → vert). Sans texte alternatif ou étiquette sur chaque événement, la signification de la couleur est perdue.
<!-- ✗ Type d'événement uniquement dans la couleur CSS -->
<div class="event event-fete">14h — Concert</div>
<!-- ✓ Type d'événement dans le texte ou dans un label accessible -->
<div class="event event-fete">
<span class="event-type">Fête</span>
14h — Concert de l'harmonie municipale
</div>Les alternatives non-colorielles
Pour chaque situation où la couleur transmet une information, un des cinq vecteurs alternatifs suivants doit l’accompagner :
1. Le texte : le plus robuste. “Erreur”, “Succès”, “Disponible”, “Complet”, etc. Une étiquette textuelle ne dépend d’aucune perception visuelle particulière.
2. L’icône : efficace si l’icône est universellement reconnaissable (✓ pour succès, ✗ pour erreur, ⚠ pour avertissement). Toujours accompagner d’un texte alternatif ou d’un texte sr-only pour les AT.
3. La forme : des formes distinctes (cercle vs triangle vs carré) permettent de distinguer des éléments indépendamment de leur couleur. Utile dans les graphiques et les cartes.
4. La position : placer les informations positives à gauche et négatives à droite, ou valides en haut et invalides en bas. Peu fiable seul, mais contribue à la distinction.
5. Le motif ou la texture : hachures, pointillés, lignes — permettent de distinguer des zones dans les graphiques sans couleur. Particulièrement utile pour les documents imprimés en noir et blanc.
WordPress Full Site Editing (FSE) : les situations à risque
Les blocs de boutons
Les thèmes FSE génèrent souvent des boutons “primaire” (couleur pleine) et “secondaire” (contour ou gris). Si ces boutons véhiculent une information de priorité ou de type d’action, la distinction couleur seule peut être insuffisante pour les daltoniens.
Vérifier : est-ce que le texte du bouton explicite suffisamment son action ? “Envoyer la demande” vs “Annuler”, le texte seul suffit à distinguer les actions, la couleur est redondante.
Les blocs de notification et alertes
Les plugins de notification (WP Notice, Simple Notices) génèrent souvent des blocs colorés : bleu pour info, vert pour succès, rouge pour erreur, orange pour avertissement. Si seule la couleur de fond distingue les types, le critère 3.1 est en échec.
Correction : ajouter une icône et un texte de type en début de bloc.
<!-- ✓ Bloc d'alerte conforme -->
<div class="notice notice-erreur" role="alert">
<span class="notice-icone" aria-hidden="true">⚠</span>
<strong class="notice-type">Erreur :</strong>
Le fichier ne peut pas être téléchargé.
</div>Le bloc Navigation : liens actifs
Le bloc Navigation de WordPress FSE indique souvent le lien actif uniquement par une couleur différente. Sans aria-current="page" (géré automatiquement depuis WordPress 6.1) et sans indicateur visuel supplémentaire (soulignement, bold, bordure), le lien actif n’est identifiable que par la couleur.
Vérifier : en affichant la page en niveaux de gris (filtre CSS filter: grayscale(1) dans les DevTools), le lien actif est-il encore distinguable des autres ?
Le test des niveaux de gris
Le test le plus rapide pour détecter les informations transmises uniquement par la couleur :
/* Dans les DevTools, ajouter temporairement sur <html> ou <body> */
html { filter: grayscale(1); }En quelques secondes, la page passe en niveaux de gris. Tout ce qui était distinctif uniquement par sa couleur devient identique. Les liens invisibles, les états impossibles à distinguer, les graphiques illisibles, tout apparaît clairement.
Ce n’est pas un test complet (le daltonisme n’est pas une vision en niveaux de gris), mais c’est un bon indicateur rapide des cas les plus flagrants.