Vérificateur de contraste en ligne gratuit (WCAG)

La WCAG AA exige au moins 4.5:1 pour le texte normal et 3:1 pour le grand texte. Les icônes, les bordures de champs et les autres éléments d'interface exigent 3:1 par rapport aux couleurs voisines. Le niveau AAA relève les règles du texte à 7:1 pour le texte normal et à 4.5:1 pour le grand texte.

Les valeurs de rouge, de vert et de bleu de chaque couleur sont converties en lumière linéaire, puis pondérées pour obtenir une luminance relative. Le ratio correspond à la luminance la plus claire plus 0.05, divisée par la plus sombre plus 0.05 : il va donc de 1:1 pour une même couleur à 21:1 pour du noir sur du blanc.

Le grand texte mesure au moins 18pt (24px) en graisse normale ou 14pt (environ 18.66px) en gras. Il n'exige que 3:1 pour le niveau AA et 4.5:1 pour le niveau AAA. Le vérificateur ne demande pas de taille de police : ne consultez donc les lignes du grand texte que si votre texte atteint cette taille.

Le niveau AA est celui auquel renvoient la plupart des lois et des politiques, notamment la norme EN 301 549 dans l'UE et la règle américaine de 2024 pour les sites web des administrations des États et des collectivités locales, qui reposent toutes deux sur la WCAG 2.1 AA. Le niveau AAA est plus strict et constitue un bon objectif pour les textes longs à lire.

Elle teste la règle des 3:1 pour les éléments non textuels, le critère de réussite WCAG 1.4.11. Utilisez-la pour les couleurs d'icônes, les bordures de champs, les anneaux de focus et les lignes de graphiques. Placez la couleur de l'élément dans la zone de couleur du texte et la couleur située derrière dans la zone d'arrière-plan.

Le ratio affiché à l'écran est arrondi à deux décimales, mais les vérifications utilisent la valeur exacte, comme l'exige la WCAG. Le gris #959595 sur blanc donne 2.995:1 : il s'affiche donc 3.00:1 et échoue quand même aux lignes à 3:1. Assombrissez légèrement la couleur pour réussir.

Il ne lit que les codes hex à 6 chiffres, avec ou sans le #. Les codes courts comme #fff, les codes à 8 chiffres avec transparence, rgb(), hsl() et les noms de couleurs donnent 0.00:1 et échouent à toutes les lignes. Écrivez #fff sous la forme #ffffff. Une lettre erronée, comme dans #12345g, est lue comme une autre couleur, sans aucun avertissement.

21:1, soit du noir pur #000000 sur du blanc pur #ffffff. Deux couleurs identiques donnent 1:1, le minimum. La paire par défaut ici, #1a1a1a sur blanc, obtient 17.40:1, et le gris moyen #767676 sur blanc donne 4.54:1, juste au-dessus du seuil AA de 4.5:1.

Pas directement, car l'outil compare une couleur unie avec une autre. Pour un texte sur un dégradé ou une image, repérez derrière le texte la zone dont la luminosité est la plus proche de celle du texte. Saisissez cette couleur comme arrière-plan et lancez la vérification.

Non. Il utilise le ratio de contraste de la WCAG 2.x, sur lequel s'appuient la WCAG 2.1, la WCAG 2.2 et les lois actuelles. APCA est une méthode en cours d'élaboration pour la future WCAG 3, qui note le texte selon sa taille et sa graisse, et cet outil ne la calcule pas.

Oui. Il est gratuit, sans compte et sans limite du nombre de vérifications. Les couleurs que vous saisissez restent dans votre navigateur et ne sont pas enregistrées. Sur le site en ligne, Google Analytics comptabilise les clics sur « Copier le ratio », jamais les couleurs ni le ratio.