Le Vérificateur de Contraste de Couleur WCAG est un outil à deux champs. La page tient un champ de couleur de premier plan et un champ de couleur d'arrière-plan, chacun avec un sélecteur de couleur et une zone de texte, et en dessous les résultats : un aperçu en direct, le ratio de contraste et une grille de quatre cartes de réussi ou échoué. Il n'y a pas de bouton d'exécution et rien à configurer ; changez l'une des deux couleurs et tous les nombres se mettent à jour à la même frappe. Rien n'est envoyé nulle part : le calcul de luminance tourne dans le navigateur de l'appareil.
Les deux champs de couleur et l'aperçu en direct
Le premier plan est la couleur du texte et l'arrière-plan est ce qui est derrière, et les valeurs par défaut sont le noir sur blanc, #000000 sur #FFFFFF. Chaque champ accepte un hexadécimal à trois chiffres comme #F00 ou à six comme #767676, et le dièse initial est facultatif, donc 000000 s'interprète comme #000000. À côté de chaque zone se trouve un sélecteur de couleur qui la remplit à votre place. Dès que les deux couleurs sont valides, la zone de résultats apparaît : un aperçu qui peint un texte d'échantillon dans le couple choisi, à trois tailles, le ratio, et les quatre cartes WCAG. Si un champ contient autre chose qu'un hexadécimal à trois ou six chiffres, toute la zone de résultats disparaît au lieu d'afficher une supposition.
Comment le ratio de contraste est calculé
L'outil suit la formule standard de la WCAG. Chaque couleur hexadécimale est convertie en valeurs rouge, vert et bleu de 0 à 255, chaque canal est linéarisé de la courbe sRGB, et les trois canaux sont pondérés en une luminance relative avec les coefficients 0.2126 pour le rouge, 0.7152 pour le vert et 0.0722 pour le bleu. Le ratio est la luminance la plus claire plus 0.05 divisée par la luminance la plus sombre plus 0.05, c'est pourquoi il est toujours au moins 1 et ne dépasse jamais 21, l'écart entre le noir pur et le blanc pur. Le nombre est affiché à deux décimales, suivi d'un deux-points et d'un un, donc le noir sur blanc se lit 21.00:1 et une couleur sur elle-même 1.00:1. Le ratio ne dépend pas de la couleur appelée premier plan : échanger les deux champs donne le même nombre.
Les quatre seuils fixes et leurs valeurs limites
Quatre cartes jugent le ratio contre quatre minimums fixes : AA pour le texte normal à 4.5:1, AA pour le grand texte à 3:1, AAA pour le texte normal à 7:1, et AAA pour le grand texte à 4.5:1, et chaque carte affiche son minimum sous le verdict. Les bornes sont incluses : un ratio qui tombe exactement sur le minimum passe. Les valeurs que vous rencontrerez en pratique : #767676 sur blanc fait 4.54:1 et passe AA normal, tandis que #777777 sur blanc fait 4.48:1 et échoue, à un pas hexadécimal de la ligne. #808080 sur blanc fait 3.95:1, grand texte uniquement, et #595959 sur blanc fait 7.00:1, qui passe les quatre cartes, y compris AAA normal.
Ce que le grand texte signifie pour les cartes 3:1 et 4.5:1
Le grand texte au sens de la WCAG fait au moins 18 points en régulier ou 14 points en gras, ce qui correspond à peu près à 24px en régulier ou 19px en gras. L'outil ne mesure pas les tailles de police et n'a pas de champ pour elles ; il calcule toujours les quatre verdicts, donc lire le résultat est une action en deux temps. Regardez d'abord les quatre cartes, puis décidez quelle taille de texte réelle votre design utilise : si le texte est grand, ce sont les cartes grand texte de 3:1 et 4.5:1 qui s'appliquent ; s'il est de taille normale, ce sont les cartes normal de 4.5:1 et 7:1. Un ratio de 4:1, par exemple, passe la carte AA grand texte, échoue la AA texte normal et échoue les deux cartes AAA.
Cas limites : hexadécimal invalide et couleurs identiques
L'analyseur n'accepte qu'un hexadécimal à trois ou six chiffres après avoir retiré un dièse initial, donc tout le reste masque les résultats : cinq chiffres, huit chiffres avec un canal alfa, et des lettres non hexadécimales laissent la page avec seulement les deux champs de saisie. Un premier plan et un arrière-plan identiques donnent 1.00:1 et échouent aux quatre cartes, ce qui est le verdict honnête pour un texte de la même couleur que son fond. Les hexadécimaux en majuscules et en minuscules sont traités de la même façon, et l'abréviation à trois chiffres s'étend chiffre par chiffre, donc #F00 est #FF0000. Il n'y a pas de message de validation dans la zone de résultats ; le masquage est le seul signal, ce qui vaut la peine de le savoir quand vous vous demandez où sont passées les cartes.
Entièrement côté client, rien n'est conservé
Les deux valeurs hexadécimales ne quittent jamais le navigateur. Il n'y a ni envoi, ni historique, ni paires conservées ni bouton de copie ; le calcul est une fonction pure des deux saisies actuelles, et recharger la page rend les valeurs par défaut du noir sur blanc. Il n'y a non plus aucun contrôle d'échange entre les deux champs, donc pour inverser une paire il faut retaper les deux valeurs, et aucun moteur de suggestions ne vous indique la couleur la plus proche qui passe : l'outil rapporte le ratio et les quatre verdicts, et l'ajustement vous revient.
Ce que l'outil conserve, et où aller ensuite
Il ne conserve rien : aucune requête réseau n'est faite, rien n'est stocké, et recharger la page remet les champs à #000000 et #FFFFFF. Pour le reste du flux de travail couleur et CSS, le Convertisseur de Couleurs passe une valeur hexadécimale de HEX à RGB à HSL, le Convertisseur d'Unités CSS convertit entre px, rem, em et pt pour que vous puissiez vérifier vos tailles de police contre la ligne du grand texte, et le Formateur CSS met en forme la feuille de style qui transporte ces couleurs. Pour un regard plus large sur le côté balisage de la même page, consultez le guide de formatage HTML.