Quel est le ratio de contraste minimum exigé par le RGAA ?

4.5:1 pour le texte normal et 3:1 pour le texte agrandi (≥ 24px, ou ≥ 18.5px en gras). C'est le niveau AA du WCAG 2.1, repris tel quel par les critères 3.2 et 3.3 du RGAA. Le niveau AAA (7:1) n'est pas obligatoire.

Le noir pur sur blanc pur est-il obligatoire ?

Non. #000 sur #FFF donne 21:1, le maximum possible, mais un gris foncé comme #333 (12.6:1) ou #595959 (7:1) reste largement conforme et fatigue moins l'œil. L'exigence est un seuil minimal, pas un contraste maximal.

La couleur peut-elle suffire à distinguer un lien ou une erreur ?

Non : le critère 3.1 interdit de transmettre une information uniquement par la couleur. Un lien dans un paragraphe doit être souligné (ou porter un autre repère), un champ en erreur doit afficher un texte ou une icône en plus de la bordure rouge.

Un texte gris clair « élégant » peut-il être refusé ?

Oui. #999 sur blanc plafonne à 2.85:1, sous le seuil de 4.5:1 : c'est l'un des échecs les plus fréquents en audit. Vérifiez chaque gris avant de le valider en maquette avec le vérificateur de contraste.

Le contraste s'applique-t-il aux icônes et aux bordures ?

Oui, via le critère 3.3 : les composants d'interface et éléments graphiques porteurs d'information (icônes, bordures de champ, indicateur de focus, barres de progression) doivent atteindre 3:1 avec leur environnement.

Faut-il revérifier les contrastes en mode sombre ?

Oui. Une palette conforme en mode clair ne l'est pas automatiquement en mode sombre : les mêmes couleurs de texte sur fond foncé donnent des ratios différents. Testez les deux thèmes séparément.

Contraste des couleurs et accessibilité : ratios WCAG AA/AAA

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. Le RGAA vise le niveau AA ; le niveau AAA est plus exigeant et facultatif, mais utile à connaître pour les contenus critiques (santé, administration, notices).

Type de texte	AA (exigé RGAA)	AAA (renforcé)
Texte normal (< 24px ou < 18.5px gras)	4.5:1	7:1
Texte agrandi (≥ 24px ou ≥ 18.5px gras)	3:1	4.5:1
Texte incidentiel (décoratif, inactif)	Aucun	Aucun
Logo et marque	Aucun	Aucun

La bascule « texte agrandi » se déclenche à 24px (18pt) en graisse normale, ou 18.5px (14pt) en gras : au-delà, le seuil AA tombe de 4.5:1 à 3:1. C'est le seul cas où agrandir un texte peut suffire à passer un contraste limite, sans toucher aux couleurs.

Comment se calcule un ratio de contraste ?

Le ratio n'est pas une différence de couleurs, c'est un rapport de luminance relative. On calcule la luminance de chaque couleur, puis le ratio vaut (L_clair + 0.05) / (L_sombre + 0.05). Résultat compris entre 1:1 (deux couleurs identiques) et 21:1 (noir pur sur blanc pur). La luminance elle-même pondère les canaux R, V, B (0.2126 / 0.7152 / 0.0722) après linéarisation gamma : le vert pèse beaucoup plus que le bleu, ce qui explique qu'un texte bleu sur fond noir contraste moins qu'on ne l'imagine. Notre vérificateur de contraste applique exactement cette formule WCAG dans le navigateur.

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 :

Vérificateur de contraste RGAA — Saisissez deux couleurs (ou extrayez-les d'une URL) et lisez le verdict AA/AAA, avec une couleur corrigée suggérée si le ratio est insuffisant
Scan complet du site — Notre test RGAA repère automatiquement les contrastes texte insuffisants page par page
DevTools navigateur — L'inspecteur de Chrome/Firefox affiche le ratio de contraste directement sur l'élément sélectionné
Contrast Checker de référence — WebAIM Contrast Checker, Colour Contrast Analyser (TPGi)
Extensions navigateur — axe DevTools, WAVE

Bonnes pratiques design

Testez vos maquettes avant le développement
Utilisez des variables CSS pour gérer une palette accessible
Prévoyez le mode sombre avec des contrastes vérifiés
Ne vous fiez pas qu'à l'esthétique : un gris clair élégant peut être illisible
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) */
}

Questions fréquentes sur le contraste des couleurs

Quel est le ratio de contraste minimum exigé par le RGAA ?: 4.5:1 pour le texte normal et 3:1 pour le texte agrandi (≥ 24px, ou ≥ 18.5px en gras). C'est le niveau AA du WCAG 2.1, repris tel quel par les critères 3.2 et 3.3 du RGAA. Le niveau AAA (7:1) n'est pas obligatoire.
Le noir pur sur blanc pur est-il obligatoire ?: Non. #000 sur #FFF donne 21:1, le maximum possible, mais un gris foncé comme #333 (12.6:1) ou #595959 (7:1) reste largement conforme et fatigue moins l'œil. L'exigence est un seuil minimal, pas un contraste maximal.
La couleur peut-elle suffire à distinguer un lien ou une erreur ?: Non : le critère 3.1 interdit de transmettre une information uniquement par la couleur. Un lien dans un paragraphe doit être souligné (ou porter un autre repère), un champ en erreur doit afficher un texte ou une icône en plus de la bordure rouge.
Un texte gris clair « élégant » peut-il être refusé ?: Oui. #999 sur blanc plafonne à 2.85:1, sous le seuil de 4.5:1 : c'est l'un des échecs les plus fréquents en audit. Vérifiez chaque gris avant de le valider en maquette avec le vérificateur de contraste.
Le contraste s'applique-t-il aux icônes et aux bordures ?: Oui, via le critère 3.3 : les composants d'interface et éléments graphiques porteurs d'information (icônes, bordures de champ, indicateur de focus, barres de progression) doivent atteindre 3:1 avec leur environnement.
Faut-il revérifier les contrastes en mode sombre ?: Oui. Une palette conforme en mode clair ne l'est pas automatiquement en mode sombre : les mêmes couleurs de texte sur fond foncé donnent des ratios différents. Testez les deux thèmes séparément.