Tester les couleurs réellement superposées
Saisissez une couleur HEX pour le texte et une autre pour son arrière-plan. Le vérificateur convertit les canaux sRGB en luminance relative, puis calcule le contraste entre la couleur la plus claire et la plus sombre. Le rapport va de 1:1 pour deux couleurs identiques à 21:1 pour le noir sur blanc. Cette valeur est plus utile qu’un jugement à l’œil, car deux teintes aux noms différents peuvent présenter une luminance similaire. L’aperçu affiche les caractères devant le fond choisi. Testez les couleurs qui apparaissent vraiment au même endroit de la page : un dégradé ou une couche transparente peut changer le fond visible. En présence de transparence, déterminez d’abord la couleur composée, puis testez cette couleur opaque. L’inversion des deux champs conserve le rapport numérique.
Lire séparément les seuils AA et AAA
Pour le texte ordinaire, les WCAG 2.2 demandent un contraste d’au moins 4,5:1 au niveau AA. Un texte suffisamment grand peut satisfaire le seuil correspondant de 3:1. Les seuils renforcés AAA sont respectivement 7:1 et 4,5:1. Le vérificateur donne quatre résultats distincts : une paire peut réussir pour le grand texte AA tout en échouant pour un paragraphe courant. Choisissez le critère selon la taille et la graisse réellement affichées, et non selon le nom de la classe CSS. Par exemple, #1A365D sur #FFFFFF donne environ 12,14:1 et passe les quatre contrôles affichés. Éclaircissez progressivement le premier plan pour observer le moment où un seuil n’est plus atteint.
Utiliser le rapport dans une revue graphique
Commencez par le corps de texte, car il applique généralement le seuil du texte normal. Vérifiez ensuite les titres, légendes, liens, étiquettes de formulaire et libellés des boutons dans leurs différents états. Notez la paire de couleurs exacte afin de la retester après une modification du thème. L’aperçu permet de comparer les palettes, mais le chiffre évite de décider seulement à l’intuition. Les éléments d’interface non textuels relèvent d’un autre critère WCAG : la réussite de ce test ne certifie ni les icônes, ni les contours, ni les indicateurs de focus, ni toute la page. La qualification de « grand texte » dépend aussi de la taille et de la graisse finales. Un audit complet examine également clavier, zoom et autres conditions d’accessibilité.
Éviter les erreurs de mesure
Ne comparez pas une phrase avec du blanc simplement parce que la page générale est blanche, si cette phrase apparaît sur une carte colorée. Testez précisément la surface placée derrière elle. N’arrondissez pas le rapport vers le haut avant de vérifier le seuil : le calcul conserve la valeur complète, puis abrège son affichage. Un résultat apparent de 4,50:1 tout près d’une limite mérite une vérification des codes et du rendu final. La formule WCAG utilise les valeurs sRGB déclarées même si une capture ou un écran paraît légèrement différent. Examinez les superpositions et les changements d’état sur le site réel. Si le contraste échoue, ajustez le texte ou le fond et retestez ; augmenter la police sans confirmer l’exception applicable au grand texte peut fausser la décision.