Vérificateur de Contraste : Test WCAG AA/AAA | Gratuit

A Oui, vous pouvez saisir des couleurs en HEX, RGB ou HSL. Collez simplement votre valeur dans le champ — l'outil détecte automatiquement le format. Par exemple, tapez 'rgb(255, 0, 0)' ou 'hsl(0, 100%, 50%)' et ça fonctionne immédiatement. Utile quand vous extrayez des couleurs depuis du code CSS.

A Oui. Saisissez d'abord la paire par défaut, puis remplacez les couleurs de survol séparément. WCAG exige que les états de survol et de focus respectent aussi les contrastes minimaux – pas seulement le texte statique. Par exemple, si votre fond de bouton passe de #007bff à #0056b3 au survol, testez les deux contre le texte blanc. Un piège courant : les designers éclaircissent trop les fonds au survol, ce qui ruine le contraste.

A Les éléments non textuels nécessitent aussi du contraste, mais avec des règles un peu différentes. Le WCAG exige un rapport de 3:1 pour les composants d'interface et les objets graphiques comme les icônes, boutons et bordures. Testez ici la couleur de votre icône contre son fond. Si le ratio est inférieur à 3:1, l'élément échoue au niveau AA. Astuce : reprenez la couleur de votre texte pour les icônes.

A Ne faites pas confiance à vos yeux — ils sont très mauvais pour juger du contraste. Deux couleurs qui vous paraissent correctes pourraient n'atteindre qu'un ratio de 2,5:1, ce qui échoue même au WCAG AA. Cet outil calcule mathématiquement, en tenant compte de la perception humaine des couleurs et de la luminance. Par exemple, un gris clair #C0C0C0 sur blanc #FFFFFF semble lisible mais n'obtient que 1,6:1. Validez toujours avec notre indicateur de réussite.

A Oui, nettement. Le niveau AA exige 4,5:1 pour le texte normal sous 18px, mais seulement 3:1 pour le grand texte (18px gras ou 24px normal). Le AAA demande 7:1 pour le texte normal et 4,5:1 pour le grand texte. Si un titre en 32px obtient 4,0:1, il passe AA mais échoue AAA. Notre outil affiche les deux seuils en un clin d'œil. Astuce : visez AA pour le corps du texte et AAA pour les titres – leur taille facilite l'obtention du ratio supérieur.

A Le calibrage de votre écran et le type de dalle modifient le rendu, mais le ratio reste purement mathématique. Un score de 4,5:1 signifie que la différence de luminance est réelle, pas seulement perçue. Si ça paraît fade, c'est souvent la luminosité qui pose problème, pas le contraste. Vérifiez sur un deuxième appareil ou ajustez le profil couleur. Conseil concret : passez en profil sRGB dans les réglages de votre système, c'est la cible standard pour le web. Vous verrez alors plus fidèlement ce que vos utilisateurs voient vraiment.

A Le soleil ne change pas les calculs, mais il change ce qui est confortable. Le niveau AA de 4,5:1 est le strict minimum, mais dehors, visez plus de marge. Essayez d'atteindre 7:1 (AAA) pour tout texte lu plus de quelques secondes. Pour les icônes ou horodatages consultés rapidement, 3:1 peut suffire, mais testez votre palette sur un vrai téléphone avec la luminosité au max. Une paire à 2,9:1 deviendra invisible en extérieur, même si elle passe sur votre écran.

A Aucune limite, aucune inscription, aucun quota journalier. Testez 5 paires ou 500 : chaque résultat s'affiche en moins d'une seconde avec le ratio exact et le verdict AA/AAA. Rien n'est stocké, votre palette de marque reste donc dans le navigateur. Une designer que je connais a testé 40 combinaisons avant de trouver un accent accessible pour un client. Mettez la page en favori et utilisez-la comme brouillon pendant vos recherches.

A Cette approche échoue généralement. Un noir à cinquante pour cent d'opacité sur fond blanc donne un gris délavé qui ne respecte pas les normes WCAG. Testez toujours la nuance finale obtenue directement dans notre outil. Copiez la valeur RVB exacte du mélange pour obtenir instantanément un score fiable.

A Rarement, à moins d'augmenter nettement sa clarté. Du gris #999999 sur du #121212 atteint à peine 3,2:1, ce qui échoue aux normes. Passez plutôt à un ton comme #CCCCCC ou graissez vos caractères en 700. Le vérificateur recalcule ce rapport instantanément pour vous éviter des heures de tests à l'aveugle.