Vérificateur de Contraste

Vérifiez le ratio de contraste des couleurs selon les directives d'accessibilité WCAG 2.1. Résultats AA/AAA instantanés.

Couleur de premier plan

Couleur d'arrière-plan

Aperçu grand texte (18pt gras)

Aperçu texte normal — The quick brown fox jumps over the lazy dog.

14.05:1ratio de contraste

AA — Texte normal (≥ 4,5:1)Réussi

AA — Grand texte (≥ 3:1)Réussi

AAA — Texte normal (≥ 7:1)Réussi

AAA — Grand texte (≥ 4,5:1)Réussi

À propos de cet outil

Le vérificateur de contraste calcule le ratio de contraste entre une couleur de premier plan (texte) et une couleur d'arrière-plan selon la formule de luminance relative WCAG 2.1.

WCAG 2.1 définit deux niveaux : AA exige 4,5:1 pour le texte normal et 3:1 pour le grand texte. AAA exige 7:1 et 4,5:1 respectivement.

Comment utiliser

Choisissez la couleur de premier plan et d'arrière-plan avec les sélecteurs ou entrez des codes hex.
L'aperçu montre l'apparence du texte en tailles normale et grande.
Le ratio de contraste et les résultats WCAG se mettent à jour instantanément.
Utilisez les paires d'exemples pour explorer les modèles d'accessibilité courants.

Cas d'utilisation

Les designers UI vérifient que les étiquettes et le texte respectent les normes WCAG. Les développeurs vérifient les combinaisons texte-fond dans les systèmes de design.

Questions fréquentes

Qu'est-ce qui compte comme "grand texte" ? — WCAG définit le grand texte comme au moins 18pt (24px) normal, ou 14pt (~18.67px) gras.
Prend-il en charge la transparence ou rgba ? — Non, cet outil fonctionne uniquement avec des couleurs hex solides.
Quel niveau WCAG viser ? — AA est le minimum recommandé pour la plupart des sites publics. AAA offre une meilleure lisibilité.
4,5:1 est-il toujours suffisant ? — 4,5:1 satisfait WCAG AA, mais les utilisateurs avec des déficiences visuelles plus sévères peuvent bénéficier de ratios plus élevés.