♿

vérificateur contraste WCAG

Vérifiez le ratio de contraste des couleurs pour la conformité d’accessibilité WCAG AA et AAA.

Outils de design Fonctionne localement Aucune donnée envoyée
WCAG AA / AAA accessibilité couleur
Couleur de premier plan
Couleur d’arrière-plan
Aperçu
Texte normal — Le vif renard brun saute par-dessus le chien paresseux.
Grand texte (24px normal)
Grand texte (18.67px gras)
Composant d’interface
—
Ratio de contraste
Niveau Texte normal Texte de grande taille Composants d’interface
AA — — —
AAA — — N/D
WCAG 2.1 — AA exige ≥ 4,5:1 pour le texte normal, ≥ 3:1 pour le texte de grande taille et les composants d’interface. AAA exige ≥ 7:1 pour le texte normal, ≥ 4,5:1 pour le texte de grande taille. Texte de grande taille = 18 pt (24 px) en graisse normale ou 14 pt en gras (18,67 px).

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

Vérifiez le ratio de contraste des couleurs pour la conformité d’accessibilité WCAG AA et AAA. Vérifiez instantanément les combinaisons de couleurs de premier plan et d’arrière-plan pour le texte normal, le grand texte et les composants d’interface.

Comment utiliser le vérificateur de contraste

  1. Saisissez ou choisissez la couleur du texte au premier plan.
  2. Saisissez ou choisissez la couleur d’arrière-plan située derrière.
  3. Consultez instantanément le ratio de contraste et le résultat WCAG (réussi ou échoué).
  4. Ajustez l’une ou l’autre des couleurs jusqu’à ce que la combinaison atteigne votre objectif d’accessibilité.

Outils associés

🎨
sélecteur couleur
Convertissez les couleurs entre HEX, RGB, HSL et CMYK
 🌈
générateur dégradé CSS
Créez des dégradés CSS linéaires et radiaux avec aperçu en direct
 🎨
générateur palette
Générez des palettes de couleurs complémentaires, analogues et triadiques
Comprendre le contraste des couleurs ▾
Exemple
Entrée Vérification d’un texte gris moyen sur fond blanc :
Sortie Résultat : conforme AA pour le texte de grande taille (≥ 3:1), mais non conforme AA pour le texte normal (4,5:1 requis). Assombrissez légèrement le gris pour respecter tous les niveaux AA.
Cas d’utilisation courants
  • Vérifiez le contraste des boutons et des liens avant de déployer des mises à jour de l’UI
  • Validez les couleurs de texte dans les systèmes de marque et les guides de style
  • Vérifiez la lisibilité des visuels marketing
  • Testez rapidement les combinaisons texte foncé sur fond clair et texte clair sur fond foncé
Questions fréquentes
Quelle est la différence entre les niveaux de contraste AA et AAA ?

WCAG AA exige un ratio de 4,5:1 pour le texte normal et de 3:1 pour le texte de grande taille — l’exigence légale standard. AAA exige 7:1 pour le texte normal et 4,5:1 pour le texte de grande taille, offrant une accessibilité renforcée aux utilisateurs ayant une basse vision sévère.

Cet outil vérifie-t-il le contraste non textuel (icônes, bordures) ?

Oui — WCAG 1.4.11 (Contraste non textuel) exige 3:1 pour les composants UI et les éléments graphiques. Le résultat AA pour les composants UI du tableau couvre cette exigence.

Mes couleurs sont conformes AA mais pas AAA — dois-je les corriger ?

La conformité AAA n’est pas requise pour tous les contenus. WCAG AA constitue l’exigence légale standard dans la plupart des juridictions. Visez AAA lorsque c’est possible, mais AA suffit pour la conformité légale.

Qu’est-ce qu’un texte de grande taille ?

WCAG définit le texte de grande taille comme 18 pt (24 px) ou plus pour une graisse normale, ou 14 pt (environ 18,67 px) ou plus pour le texte en gras. Le texte de grande taille a une exigence de contraste plus faible (3:1 pour AA), car il est intrinsèquement plus facile à lire.