Critère 3.1
Information par la couleur
L'information ne doit pas être donnée uniquement par la couleur.
En Bref : L'essentiel à retenir
- Les utilisateurs daltoniens peuvent manquer des informations cruciales si celles-ci sont uniquement transmises par la couleur.
- Pour rendre le contenu accessible, utilisez des indicateurs visuels ou textuels supplémentaires en plus de la couleur.
- Distinguez les liens, les messages d'erreur et les données graphiques non seulement par la couleur, mais aussi par d'autres éléments comme le soulignement, des icônes ou des étiquettes.
- L'objectif est d'assurer que l'information soit compréhensible par tous, indépendamment de leurs capacités visuelles.
Objectif
Les utilisateurs daltoniens ou malvoyants peuvent ne pas percevoir certaines couleurs. Si une information (état, erreur, lien) est indiquée uniquement par une couleur, elle sera perdue pour eux.
Solution Technique
Ajoutez toujours un autre indicateur visuel ou textuel en plus de la couleur.
1. Liens dans le texte
Les liens ne doivent pas être distingués du texte environnant uniquement par la couleur.
/* ❌ Mauvais : Seule la couleur change */
a { color: blue; text-decoration: none; }
/* ✅ Bon : Soulignement (par défaut ou ajouté) */
a { color: blue; text-decoration: underline; }
2. Messages d'erreur
Ne vous fiez pas qu'au rouge.
<!-- ❌ Mauvais -->
<p style="color: red;">Email invalide</p>
<!-- ✅ Bon : Icône + Texte explicite -->
<p class="error">
<span aria-hidden="true">⚠️</span> Email invalide
</p>
3. Graphiques
Dans un camembert ou une courbe, n'utilisez pas que la couleur pour différencier les séries. Utilisez des motifs (hachures) ou des étiquettes directes.