Vérificateur de contraste des couleurs (WCAG AA/AAA)
Vérifie si deux couleurs offrent assez de contraste pour rester lisibles, mesuré contre les seuils WCAG AA et AAA. Avec un aperçu en direct, directement dans ton navigateur.
S'exécute dans ton navigateur. Ce que tu saisis n'est pas envoyé à PayloadIQ.
Cet outil calcule le ratio de contraste entre une couleur de texte et une couleur de fond, et te dit s'il respecte les seuils WCAG AA et AAA — le tout dans ton navigateur, sans rien envoyer. Tu choisis les deux couleurs en HEX ou en RGB, et tu obtiens le ratio exact plus un verdict réussi/échoué pour le texte normal et le grand texte. Un aperçu en direct affiche les couleurs sur du vrai texte pour juger à l'œil autant qu'au chiffre.
Comment le ratio est calculé
Le ratio vient de la luminance relative de chaque couleur, selon la formule officielle du WCAG, et il va de 1:1 (aucun contraste) à 21:1 (noir sur blanc). L'outil compare ce résultat aux quatre seuils d'un coup : AA exige 4.5:1 pour le texte normal et 3:1 pour le grand texte (environ 18px gras ou 24px normal), tandis que AAA monte à 7:1 et 4.5:1. Le calcul se fait à la frappe, donc tu vois chaque verdict basculer dès que tu ajustes une couleur, et tu peux inverser le texte et le fond d'un clic pour tester les deux sens.
En local, et privé par défaut
Tout tourne en local : aucune couleur, aucune valeur n'est envoyée à un serveur, ce qui rend l'outil utilisable hors ligne et sans rien partager de ton design. Concrètement, tu peux récupérer une couleur dans une maquette, la coller ici et vérifier la conformité avant de figer un thème ou de livrer un composant — pratique pour rendre un design provable face à une exigence d'accessibilité plutôt que de deviner. Pour préparer les couleurs en amont, associe-le au sélecteur de couleurs ou au convertisseur de couleurs.