Vérifiez le rapport de contraste entre deux couleurs et voyez s'il respecte les niveaux WCAG AA et AAA, en direct dans votre navigateur.
Le rapport de contraste est le chiffre sur lequel les WCAG s'appuient pour déterminer si un texte est lisible. Il compare la luminance relative de deux couleurs sur une échelle allant de 1:1 (identiques) à 21:1 (noir pur sur blanc pur). Au niveau AA, les WCAG exigent au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte ; le niveau AAA porte ces seuils à 7:1 et 4,5:1. Les composants d'interface — boutons-icônes, bordures de champs, indicateurs de focus — doivent atteindre 3:1 par rapport à ce qui les entoure.
Le calcul n'est pas une simple différence de luminosité. Chaque canal sRGB est d'abord linéarisé : divisé par 12,92 en dessous du seuil de 0,03928, sinon normalisé puis élevé à la puissance 2,4. Cette étape existe parce que les valeurs affichées sont encodées en gamma et ne sont pas proportionnelles à la lumière émise. Les canaux linéaires sont ensuite pondérés à 0,2126 pour le rouge, 0,7152 pour le vert et 0,0722 pour le bleu, ce qui reflète la contribution de chaque primaire à la luminosité perçue — le vert domine très largement. Enfin, les deux luminances entrent dans (L1 + 0,05) / (L2 + 0,05), où le terme 0,05 modélise la lumière qu'un écran réel réfléchit même lorsqu'il affiche du noir. C'est cette constante qui fait que le noir sur blanc vaut exactement 21:1 plutôt que l'infini.
Utilisez-le avant de livrer, car les palettes de marque échouent plus souvent qu'on ne le croit. Un gris moyen comme #777777 sur du blanc atteint 4,48:1 — confortable sur un écran lumineux, à un centième du seuil AA, et véritablement problématique sur un téléphone en plein soleil. Le bouton de suggestion vise exactement ce cas : il fait varier la clarté HSL de la couleur de texte vers le haut et vers le bas par pas d'un demi-pourcent et s'arrête à la première valeur atteignant 4,5:1, en conservant la teinte et la saturation que vous avez choisies. Une limite qu'il faut assumer : le rapport ne mesure que la luminance, il ne dit donc rien de la confusion des teintes pour les personnes daltoniennes, ni de la graisse de la police au-delà de la règle du grand texte. Tout s'exécute localement dans votre navigateur.
Luminance relative : pour chaque canal sRGB c normalisé entre 0 et 1, utilisez c / 12,92 lorsque c ≤ 0,03928 et ((c + 0,055) / 1,055)^2,4 sinon ; puis L = 0,2126·R + 0,7152·G + 0,0722·B. Rapport de contraste = (L1 + 0,05) / (L2 + 0,05), où L1 est la plus claire des deux couleurs. Seuils : 4,5:1 pour le texte normal en AA, 7:1 pour le texte normal en AAA, 3:1 pour le grand texte en AA et les composants d'interface, 4,5:1 pour le grand texte en AAA.
Un texte de 18 pt (24 px) ou plus, ou de 14 pt (environ 18,7 px) ou plus lorsqu'il est en gras. Le grand texte n'a besoin que de 3:1 en AA et de 4,5:1 en AAA, car des lettres plus grosses et plus épaisses restent lisibles à un contraste plus faible.
Parce que le seuil est une limite stricte. #777777 sur blanc donne 4,48:1 alors que le niveau AA exige 4,5:1 : l'échec se joue à deux centièmes. En l'assombrissant d'un cran jusqu'à #767676, on atteint 4,54:1 et la conformité — c'est exactement ce que fait le bouton de suggestion.
Oui. Le critère de succès WCAG 1.4.11 exige 3:1 entre un composant d'interface ou un graphique porteur de sens et les couleurs adjacentes. Les bordures de champs, les états des interrupteurs, les indicateurs de focus et les boutons composés d'une seule icône entrent tous dans ce cadre.
Cet outil applique le rapport des WCAG 2.x, qui reste la référence des lois sur l'accessibilité, des audits et des design systems. L'APCA est l'algorithme perceptuel proposé pour les WCAG 3 ; il produit d'autres chiffres et ne constitue pas encore une exigence de conformité.
Non. La luminance et le rapport sont calculés en JavaScript sur votre appareil. Rien n'est envoyé à un serveur ni stocké où que ce soit.
Vai.la transforme n'importe quelle URL en lien court avec statistiques de clics, QR Code et votre propre biolink.
Vai.la n'est pas responsable de l'utilisation des outils ni des décisions prises sur la base de leurs résultats.