Vérificateur de Contraste
Saisissez une couleur de texte et une couleur d'arrière-plan pour calculer le rapport de contraste WCAG, avec des résultats réussite/échec pour AA et AAA et un aperçu en direct.
🔒 Traitement local dans votre navigateur
Loading…
Comment l'utiliser
- Saisissez une couleur de texte (premier plan) dans le premier champ, ou choisissez-la avec le sélecteur de couleur.
- Saisissez une couleur d'arrière-plan dans le second champ, ou choisissez-la avec le sélecteur de couleur.
- Le rapport de contraste et l'aperçu de la combinaison réelle se mettent à jour instantanément.
- Consultez les quatre badges pour voir si la combinaison réussit WCAG AA et AAA pour le texte normal et le grand texte.
Fonctionnalités
- Prend en charge les formats de couleur hex, rgb() et hsl()
- Calcule avec précision le rapport de contraste par luminance relative du WCAG 2.x
- Affiche des badges réussite/échec pour AA et AAA en texte normal et grand texte
- Aperçu en direct de la combinaison réelle du texte sur l'arrière-plan
- 100% côté client — vos couleurs ne quittent jamais votre navigateur
Questions fréquentes
Comment le rapport de contraste est-il calculé ?
Le rapport est calculé avec la formule WCAG 2.x : les canaux sRGB de chaque couleur sont linéarisés, combinés en une valeur de luminance relative, puis le rapport est (L1 + 0.05) / (L2 + 0.05), où L1 est la luminance de la couleur la plus claire. Les rapports vont de 1:1 (aucun contraste) à 21:1 (noir sur blanc).
Quelle est la différence entre AA et AAA ?
AA est le niveau de conformité standard visé par la plupart des sites ; AAA est un niveau renforcé plus strict. AA exige 4.5:1 pour le texte normal et 3:1 pour le grand texte, tandis qu'AAA exige 7:1 et 4.5:1 respectivement.
Qu'est-ce qui compte comme grand texte selon WCAG ?
Le grand texte est défini comme au moins 18pt (24px) en graisse normale, ou au moins 14pt (18,66px) en gras. Les traits plus grands et plus épais restent lisibles avec un contraste plus faible, d'où une exigence allégée.
Quels formats de couleur puis-je saisir ?
Vous pouvez saisir des codes hex (#000 ou #000000), des chaînes rgb()/rgba() ou hsl()/hsla(), ou utiliser les sélecteurs de couleur à côté de chaque champ.
Cet outil enregistre-t-il ou envoie-t-il mes couleurs ?
Non. Toute l'analyse et le calcul du contraste se font localement dans votre navigateur en JavaScript pur. Rien n'est envoyé à un serveur ni sauvegardé.