- Vérificateur de contraste WCAG 2.1 AA et AAA

La formule de contraste W3C expliquée

Le ratio de contraste WCAG est un nombre compris entre 1:1 (aucun contraste) et 21:1 (noir pur sur blanc pur). Il se calcule à partir de la luminance relative de chaque couleur, c'est-à-dire la luminosité perçue sur une échelle linéaire qui prend en compte la sensibilité de l'œil humain aux différentes longueurs d'onde.

Calcul de la luminance relative

Pour chaque canal (Rouge, Vert, Bleu), on convertit la valeur 0–255 en sRGB linéaire :

// 1. Normaliser le canal sur 0..1
const cs = canal / 255;

// 2. Linéariser (correction gamma sRGB)
const cl = cs <= 0.03928
    ? cs / 12.92
    : Math.pow((cs + 0.055) / 1.055, 2.4);

// 3. Combiner avec les coefficients pondérés
const L = 0.2126 * Rl + 0.7152 * Gl + 0.0722 * Bl;

Les coefficients 0.2126, 0.7152 et 0.0722 correspondent à la sensibilité moyenne de l'œil humain aux composantes rouge, verte et bleue. Le vert pèse le plus car nos yeux y sont les plus sensibles.

Les niveaux WCAG 2.1 AA et AAA

WCAG 2.1 définit quatre seuils de contraste à respecter selon le type de contenu et le niveau de conformité visé :

Pourquoi viser AA au minimum ?

• ✅ Obligation légale en France (RGAA), UE (EAA 2025), USA (ADA + Section 508)
• ✅ Lisibilité pour 285 millions de personnes malvoyantes dans le monde (OMS 2023)
• ✅ Confort en plein soleil ou sur écrans bas de gamme
• ✅ SEO : Google pondère positivement l'accessibilité dans les Core Web Vitals

Quand viser AAA ?

Sites publics (administration, santé, éducation), interfaces critiques (banque, transport), applications utilisées par seniors ou personnes malvoyantes. Pour les sites grand public classiques, AA est généralement suffisant.

Texte normal vs grand texte

WCAG distingue le texte normal du grand texte (large text), qui bénéficie d'un seuil de contraste plus permissif car il est visuellement plus lisible.

Exemples concrets

• Body texte (16 px régulier) → texte normal → seuil AA = 4.5:1
• Sous-titre (16 px gras) → texte normal → seuil AA = 4.5:1
• Titre H2 (24 px régulier) → grand texte → seuil AA = 3:1
• Bouton CTA (14 px gras) → grand texte → seuil AA = 3:1
• Légende (12 px régulier) → texte normal → seuil AA = 4.5:1

Bonnes pratiques d'accessibilité couleurs

1. Tester sur tous les états interactifs

Vérifiez le contraste pour les états :hover, :focus, :active et :disabled. Un bouton désactivé en gris clair sur fond blanc est souvent en dessous de 3:1.

2. Ne jamais coder une information uniquement par la couleur

WCAG 1.4.1 exige qu'une information ne dépende pas uniquement de la couleur. Combinez toujours un indicateur visuel supplémentaire :

• ✅ Erreur de formulaire : couleur rouge + icône ⚠️ + message texte
• ✅ Lien : couleur différente + soulignement
• ✅ Graphique : couleur + motif (rayures, points) ou label direct

3. Penser au mode sombre

Les ratios de contraste doivent être validés aussi bien en light mode qu'en dark mode. Une couleur primaire #3498db parfaite sur fond blanc peut tomber sous 3:1 sur fond noir.

/* Variables CSS adaptatives */
:root {
    --color-primary: hsl(204, 70%, 35%); /* contraste AA sur blanc */
}

[data-theme="dark"] {
    --color-primary: hsl(204, 70%, 70%); /* contraste AA sur noir */
}

4. Tester avec un simulateur de daltonisme

8 % des hommes et 0,5 % des femmes sont daltoniens. Utilisez les DevTools Chrome (Rendering → Emulate vision deficiencies) pour vérifier que vos couleurs restent distinguables en deutéranopie, protanopie et tritanopie.

5. Privilégier des palettes pré-validées

Tailwind CSS, Material Design 3 et Open Color publient des palettes dont les nuances 600/700 passent généralement AA sur fond blanc. Partir d'une base validée fait gagner du temps.

Erreurs fréquentes à éviter

Texte gris clair sur fond blanc

Très courant en design "minimaliste" : color: #999 sur background: #fff → ratio = 2.85:1 → échec AA. Le minimum acceptable pour du texte body est #767676 (ratio 4.54:1).

Placeholder de formulaire trop pâle

Les placeholders color: #ccc sont quasi invisibles (ratio 1.6:1). Utilisez #6c757d minimum (Bootstrap 5) qui atteint 4.69:1.

Bouton primaire avec texte blanc sur fond saturé

Un bouton background: #ffc107 (jaune Bootstrap) avec color: white donne un ratio de seulement 1.63:1. Toujours utiliser color: #000 (ratio 12.6:1) sur les fonds jaunes/oranges.

Lien dans un paragraphe sans soulignement

Si vous supprimez le text-decoration: underline, le contraste entre la couleur du lien et la couleur du texte environnant doit atteindre 3:1 minimum (WCAG 1.4.1). C'est rarement le cas.

Tester uniquement avec ses propres yeux

Le ressenti subjectif est trompeur. Toujours utiliser un outil de mesure objectif comme celui de cette page, complété par un audit Lighthouse ou axe DevTools.

WCAG, RGAA et obligations légales

Le RGAA (Référentiel Général d'Amélioration de l'Accessibilité) est la déclinaison française de WCAG 2.1 niveau AA. Il s'impose à tous les services publics et aux entreprises de plus de 250 millions d'euros de chiffre d'affaires en France.