Guide RGAA · Thème 3
Couleurs
Les 3 critères du thème « Couleurs » du RGAA 4.1, expliqués et accompagnés de pistes de correction et d'exemples de code.
Critère 3.1Dans chaque page web, l’information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?
Ce que ça vérifie — Aucune information ne doit être transmise uniquement par la couleur. Les personnes daltoniennes, malvoyantes ou utilisant un affichage monochrome doivent pouvoir percevoir la même information par un autre moyen (texte, forme, motif, soulignement).
Comment corriger — Doublez toute indication colorée par un repère non chromatique : un libellé texte, une icône, un motif, un soulignement ou une bordure. Par exemple, ne signalez pas un champ obligatoire ou en erreur par la seule couleur rouge.
<!-- À éviter : l'erreur n'est signalée que par la couleur -->
<label style="color:red">E-mail</label>
<input type="email" />
<!-- Recommandé : couleur + texte + icône -->
<label>E-mail <span class="erreur">⚠ Adresse invalide</span></label>
<input type="email" aria-invalid="true" aria-describedby="err-email" />
Critère 3.2Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?
Ce que ça vérifie — Le texte doit se détacher suffisamment de son arrière-plan pour rester lisible par les personnes malvoyantes ou en cas de faible luminosité. On mesure le rapport de contraste entre la couleur du texte et celle du fond.
Comment corriger — Assurez un contraste d'au moins 4.5:1 pour le texte normal, et 3:1 pour le grand texte (au moins 24px, ou 18.66px soit environ 14pt en gras). Vérifiez les valeurs avec un outil de contraste (Colour Contrast Analyser, DevTools) et ajustez les couleurs CSS en conséquence.
/* À éviter : gris clair sur blanc, ratio 2.3:1 */
.texte { color: #999999; background: #ffffff; }
/* Recommandé : ratio 7.4:1 pour du texte normal */
.texte { color: #595959; background: #ffffff; }
/* Grand texte (≥ 24px) : 3:1 suffit */
.titre { font-size: 24px; color: #767676; background: #ffffff; }
Critère 3.3Dans chaque page web, les couleurs utilisées dans les composants d’interface ou les éléments graphiques porteurs d’informations sont-elles suffisamment contrastées (hors cas particuliers) ?
Ce que ça vérifie — Les composants d'interface (boutons, champs de formulaire, cases à cocher) et les éléments graphiques porteurs d'information (icônes, courbes d'un graphique, parts d'un diagramme) doivent être suffisamment contrastés pour être perçus par tous.
Comment corriger — Garantissez un rapport de contraste d'au moins 3:1 entre ces éléments et les couleurs adjacentes (arrière-plan ou couleurs voisines). Cela concerne notamment la bordure d'un champ de saisie, l'état d'une case à cocher ou les traits d'un graphique.
/* À éviter : bordure de champ trop pâle, ratio 1.4:1 */
input { border: 1px solid #dddddd; }
/* Recommandé : bordure contrastée à 3.1:1 sur fond blanc */
input { border: 1px solid #767676; }
/* Icône informative : viser au moins 3:1 avec le fond */
.icone-alerte { color: #b32d00; } /* sur fond blanc */
← Tous les thèmes du guide