Comment vérifier le contraste des couleurs d’un site

Identifiez le texte et son fond réel

Commencez par un élément précis : paragraphe, étiquette de formulaire ou texte de bouton. Notez la couleur des mots et le fond situé directement dessous. Une couleur déclarée dans une classe peut être remplacée par une autre règle : consultez les styles calculés de l’élément dans le navigateur. La transparence modifie également la couleur effective en la mélangeant au fond. Le vérificateur accepte des couleurs HEX opaques de trois ou six chiffres. Si le projet utilise de la transparence, déterminez d’abord la couleur composée. Ne remplacez pas automatiquement la valeur CSS par une couleur prise dans une capture compressée : le lissage produit plusieurs nuances sur les bords des lettres. Gardez les codes originaux pour comparer.

Interprétez le rapport et les quatre résultats

Saisissez les deux codes et choisissez Vérifier le contraste. Un rapport de 1:1 correspond à des couleurs de luminance égale ; noir sur blanc donne 21:1. Les quatre résultats distinguent AA et AAA pour texte normal et grand texte. AA exige 4,5:1 pour le texte normal et 3:1 pour le grand ; AAA exige respectivement 7:1 et 4,5:1. La décision utilise la valeur complète avant l’arrondi affiché. Prévoyez donc une marge lorsque la paire approche une limite. Un résultat conforme vérifie seulement ce contraste précis. Il ne certifie pas toute la page, qui dépend aussi du clavier, des étiquettes, de l’ordre du contenu et d’autres critères à examiner dans l’interface réelle.

Réalisez un essai reproductible

Chargez l’exemple noir et blanc et vérifiez le rapport 21:1 ainsi que les quatre résultats conformes. Remplacez ensuite le texte par #777777 sur #FFFFFF. Le rapport vaut environ 4,478:1 : le texte normal échoue au niveau AA, même si un affichage court semble proche de 4,5. Revenez à une nuance plus foncée et comparez. Modifiez une seule variable à la fois pour comprendre l’amélioration. Enregistrez les deux codes avec le résultat et le composant examiné. Le TXT conserve la sortie, mais un relevé utile précise aussi où les couleurs sont employées. Refaites la vérification après avoir modifié la feuille de styles.

#000000 / #FFFFFF → 21:1
#777777 / #FFFFFF → 4.478089453577214:1

Vérifiez la taille sans confondre px et rem

La catégorie du grand texte commence à 24 pixels CSS en graisse normale, ou environ 18,67 pixels en gras. Examinez taille et graisse calculées, pas seulement l’apparence de l’aperçu. Si le projet exprime les tailles en rem, utilisez le convertisseur avec la base réelle de l’élément html. Avec une racine de 16 px, 1,5 rem équivaut à 24 px ; avec une racine de 20 px, à 30 px. La base initiale est une commodité, pas une mesure de votre page. Changer d’unité ne rend pas automatiquement lisible un texte petit ou très fin. Vérifiez également la police retenue avec le contenu final du composant.

Examinez les états et les fonds variables

Vérifiez séparément liens visités, indicateurs de focus, boutons survolés et messages d’erreur. Évitez que la couleur soit le seul moyen de transmettre un état : ajoutez texte, icône compréhensible ou indication supplémentaire. Avec le générateur de dégradés, rappelez-vous qu’un fond à deux couleurs présente des nuances intermédiaires et varie selon les dimensions de l’élément. Deux échantillons ne valident pas automatiquement toute la transition. Examinez les zones sous le texte réel, ou placez une surface uniforme derrière les mots. Testez enfin le composant dans son contexte, avec le zoom du navigateur et une fenêtre étroite. Conservez les couleurs finales avec les styles pour vérifier les révisions suivantes.