Stax

Vérificateur de Contraste de Couleur

Vérifiez les ratios de contraste de couleur WCAG AA et AAA.

Contrast Ratio
21.00:1
LevelContextRequiredResult
WCAG AANormal text (< 18px, < 14px bold)4.5:1Pass ✓
WCAG AALarge text (≥ 18px or ≥ 14px bold)3:1Pass ✓
WCAG AAANormal text7:1Pass ✓
WCAG AAALarge text4.5:1Pass ✓

The quick brown fox jumps over the lazy dog.

Normal text (18px)

The quick brown fox jumps over the lazy dog.

Large text (24px)

The quick brown fox jumps over the lazy dog.

Bold large (18.67px bold)

PRESETS

Qu'est-ce que le vérificateur de contraste de couleur ?

Cet outil vérifie le ratio de contraste WCAG entre couleurs de texte et fond. Vérifie les ratios requis pour conformité AA et AAA. Essentiel pour assurer l'accessibilité web.

Comment utiliser le vérificateur

  1. Sélectionnez couleur du texte.
  2. Sélectionnez couleur du fond.
  3. Voir instantanément le ratio de contraste (1:1 à 21:1).
  4. Voir statut de réussite AA / AAA.

Standards de contraste WCAG

  • AA Texte Normal : 4.5:1 (standard)
  • AA Texte Large : 3:1
  • AAA Texte Normal : 7:1 (meilleure pratique)
  • AAA Texte Large : 4.5:1

Questions fréquemment posées

Qu'est-ce que le contraste WCAG ?
WCAG (Directives d'Accessibilité du Contenu Web) définit le ratio de contraste minimum entre couleurs de texte et fond — pour que les utilisateurs malvoyants puissent aussi lire. AA : 4.5:1 (texte normal), 3:1 (texte large). AAA : 7:1 (normal), 4.5:1 (large).
Comment se calcule le ratio de contraste ?
On calcule la luminance relative des deux couleurs (0 = noir, 1 = blanc). Ratio = (L1 + 0.05) / (L2 + 0.05), où L1 est plus claire et L2 plus sombre. Plage de 1:1 (sans contraste) à 21:1 (noir + blanc).
Qu'est-ce qu'on considère texte large ?
En WCAG, texte large = 18pt (~24px) ou plus avec poids régulier, ou 14pt (~18.5px) ou plus en gras. Le texte large a besoin de contraste 3:1 (normal 4.5:1). Titres et boutons sont grands, donc moins de contraste reste lisible.
Pourquoi est-il important de passer le contraste ?
8% des hommes et 0.5% des femmes sont daltoniens. 285 millions de personnes malvoyantes. Texte de bas contraste ne se voit pas. De plus, tous les utilisateurs ont des problèmes avec bas contraste sous le soleil ou petits écrans. SEO/Lighthouse vérifie aussi le contraste.

Outils associés