Contrastes et couleurs : les règles d'accessibilité RGAA

Les 3 critères couleurs du RGAA

La thématique 3 du RGAA comporte 3 critères fondamentaux liés aux couleurs et aux contrastes :

Critère 3.1 — L'information par la couleur

L'information ne doit jamais être transmise uniquement par la couleur. Si un élément utilise la couleur pour transmettre une information, un autre indice visuel doit être présent (texte, icône, motif, bordure...).

Exemples courants de non-conformité

• Formulaires : champ en erreur signalé uniquement par une bordure rouge
• Graphiques : données différenciées uniquement par couleur
• Liens : liens distingués du texte uniquement par la couleur
• Statuts : « En ligne » en vert, « Hors ligne » en rouge sans texte

<!-- MAUVAIS : info par couleur seule -->
<span style="color: red;">●</span> Serveur

<!-- BON : couleur + texte -->
<span style="color: red;">●</span> Serveur — Hors ligne

<!-- BON : couleur + icône -->
<span style="color: red;">✗</span> Serveur
<span style="color: green;">✓</span> Base de données

Critère 3.2 — Contraste du texte

Le ratio de contraste entre le texte et son arrière-plan doit être suffisant :

Exemples de contrastes

• Noir (#000) sur blanc (#FFF) — Ratio 21:1 ✓
• Gris (#767676) sur blanc (#FFF) — Ratio 4.54:1 ✓ (juste conforme)
• Gris (#999) sur blanc (#FFF) — Ratio 2.85:1 ✗ (insuffisant)
• Blanc sur jaune (#FFD700) — Ratio 1.29:1 ✗ (très insuffisant)

Critère 3.3 — Contraste des composants d'interface

Les éléments graphiques et composants d'interface porteurs d'information doivent avoir un ratio de contraste minimum de 3:1 avec leur environnement :

• Bordures de champs de formulaire
• Icônes porteuses d'information
• Focus des éléments interactifs
• Indicateurs graphiques (barres de progression, graphiques)

Comment vérifier les contrastes

Plusieurs outils permettent de vérifier les ratios de contraste :

• RGAA Test — Vérifie automatiquement les contrastes de votre site
• DevTools navigateur — L'inspecteur de Chrome/Firefox affiche les ratios de contraste
• Contrast Checker en ligne — WebAIM, Colour Contrast Analyser
• Extensions navigateur — axe DevTools, WAVE

Bonnes pratiques design

1. Testez vos maquettes avant le développement
2. Utilisez des variables CSS pour gérer une palette accessible
3. Prévoyez le mode sombre avec des contrastes vérifiés
4. Ne vous fiez pas qu'à l'esthétique : un gris clair élégant peut être illisible
5. Testez avec le simulateur daltonisme des DevTools Chrome

/* Palette accessible - variables CSS */
:root {
  --text-primary: #1a1a2e;     /* sur blanc: 15.4:1 ✓ */
  --text-secondary: #4a4a5a;   /* sur blanc: 7.2:1 ✓  */
  --text-muted: #6b6b7b;       /* sur blanc: 4.6:1 ✓  */
  --accent: #2563eb;           /* sur blanc: 4.6:1 ✓  */
  --error: #dc2626;            /* sur blanc: 5.9:1 ✓  */
  --success: #16a34a;          /* sur blanc: 3.9:1 ✓ (large text) */
}