Vérificateur de contraste des couleurs
Vérifiez les couleurs de texte et de fond selon le WCAG AA et AAA, avec transparence et la couleur conforme la plus proche.
Mode d’emploi
Saisissez la couleur du texte et la couleur de fond, en tapant un code ou avec le sélecteur de couleur. Le rapport de contraste et les résultats WCAG s’affichent pendant la saisie. Inverser les couleurs échange les deux, pour un texte clair sur fond sombre.
Le rapport suit le WCAG 2.2 : la luminance relative de chaque couleur est calculée à partir de ses valeurs sRGB, et le rapport vaut (plus claire + 0,05) ÷ (plus foncée + 0,05), de 1:1 pour deux couleurs identiques à 21:1 pour du noir sur blanc. Le texte normal exige 4,5:1 au niveau AA et 7:1 en AAA ; le grand texte, d’au moins 24 px ou 18,5 px en gras, exige 3:1 et 4,5:1. Les icônes, les bordures des champs et les autres éléments d’interface exigent 3:1 par rapport à ce qui les entoure (critère de succès 1.4.11).
Le rapport n’est jamais arrondi au-dessus avant la comparaison : le W3C précise que 4,499:1 ne satisfait pas 4,5:1. C’est pourquoi le chiffre affiché est tronqué, et non arrondi, à deux décimales.
Les couleurs s’écrivent en #hex de 3, 4, 6 ou 8 chiffres, en rgb() ou hsl() dans l’une ou l’autre syntaxe CSS, ou avec l’un des 148 noms de couleur CSS. Une couleur transparente est vérifiée telle qu’elle est peinte, mélangée à la couleur située derrière ; un fond transparent est vérifié sur du blanc, comme le suppose le WCAG quand le fond est inconnu. Si le texte échoue, l’outil propose la couleur de texte la plus proche, de même teinte et même saturation, qui atteint 4,5:1 et 7:1. Tout se calcule dans votre navigateur.
Exemple
Le gris #777777 sur blanc donne 4,47:1, juste sous les 4,5:1 qu’exige le texte normal en AA. Le gris conforme le plus proche est #767676, à 4,54:1.
#777777 sur #ffffff4,47:1 : échoue de justesse en AA pour le texte normal ; #767676 donne 4,54:1 et passe.#ffffff sur #1a73e84,5:1 : le texte blanc sur ce bleu atteint tout juste AA et reste loin d’AAA.rgba(0, 0, 0, 0.5) sur #ffffffPeint comme #808080, donc 3,94:1 : suffisant pour le grand texte et les icônes, pas pour le texte normal.#ff0000 sur #ffffff3,99:1 : un texte rouge pur sur blanc manque de peu AA pour le texte normal ; #ee0000 passe avec 4,53:1.
Questions fréquentes
Quelle différence entre AA et AAA ?
Ce sont deux niveaux de conformité du WCAG. AA est celui que demandent la plupart des lois et des politiques : 4,5:1 pour le texte normal et 3:1 pour le grand texte. AAA est plus strict, 7:1 et 4,5:1, et le W3C ne recommande pas de l’exiger pour des sites entiers, car certains contenus ne peuvent pas l’atteindre.
Qu’est-ce qu’un grand texte ?
Au moins 18 points, ou 14 points en gras. Le W3C donne comme équivalents CSS environ 24 px et 18,5 px. Un texte n’est pas grand parce que sa police paraît grande : c’est la taille qui compte.
La règle de contraste s’applique-t-elle aux logos et aux boutons désactivés ?
Non. Le WCAG exclut le texte des logos et des noms de marque, le texte purement décoratif et les éléments d’une interface inactive, comme un bouton désactivé.
Pourquoi mon outil de design affiche-t-il un autre rapport ?
En général parce qu’il arrondit : 4,495 arrondi à deux décimales se lit 4,5, mais ne satisfait pas 4,5:1. Les anciens outils utilisaient aussi 0,03928 au lieu de 0,04045 dans la formule de luminance ; le W3C indique que cela ne change rien en pratique.
Mes couleurs sont-elles envoyées quelque part ?
Non. Le calcul se fait dans votre navigateur.