La vérification du contraste WCAG se déroule en quelques étapes simples. Rien ne quitte votre navigateur.
- Vous saisissez une couleur de premier plan et une couleur d'arrière-plan. L'outil analyse les valeurs hex, rgb(), hsl() ou les couleurs CSS nommées en leurs valeurs de canaux rouge, vert et bleu.
- Chaque canal RVB est linéarisé à l'aide de la fonction de transfert sRGB. Cela convertit les valeurs d'affichage encodées en gamma en intensités lumineuses linéaires.
- Les valeurs linéaires sont pondérées par la sensibilité de l'œil humain à chaque canal — 0,2126 pour le rouge, 0,7152 pour le vert, 0,0722 pour le bleu. La somme est la luminance relative de la couleur.
- Le rapport de contraste est (L1 + 0,05) ÷ (L2 + 0,05), où L1 est la luminance de la couleur la plus claire et L2 celle de la plus foncée. Le 0,05 supplémentaire maintient la formule valide pour le noir pur.
- Le rapport est comparé aux seuils WCAG : le texte normal AA nécessite au moins 4,5:1, le grand texte AA 3:1, le texte normal AAA 7:1, et le grand texte AAA 4,5:1. On considère un texte grand à partir de 18pt ou 14pt en gras.
FAQ
Questions courantes sur la vérification du contraste WCAG.
Quelle est la différence entre AA et AAA ?
AA est le niveau de conformité minimum pour la plupart des contenus web. Il exige un rapport de contraste d'au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte. AAA est un niveau supérieur qui requiert 7:1 pour le texte normal et 4,5:1 pour le grand texte. Vous pouvez viser AAA pour le contenu clé comme le corps de texte d'un site d'actualités, tout en utilisant AA pour la conception générale. Atteindre AAA partout peut être difficile avec les couleurs de marque, c'est pourquoi de nombreuses équipes visent AA dans l'ensemble et élèvent le texte clé en AAA lorsque c'est possible.
Qu'est-ce qui est considéré comme du « grand texte » selon WCAG ?
WCAG 2.x définit le grand texte comme au moins 18 points (24px) pour le poids normal, ou 14 points (environ 19px) pour le gras. Les symboles et icônes qui font partie d'une police de caractères suivent les mêmes seuils. Si vous n'êtes pas sûr du seuil applicable à votre IU, vérifiez les deux — AA Grand a une barre plus basse (3:1), donc la plupart des paires de couleurs qui échouent AA Normal réussissent AA Grand lorsque le texte est suffisamment grand.
Pourquoi ma paire réussit-elle AA Grand mais échoue-t-elle AA Normal ?
Parce que AA Grand exige seulement un rapport de 3:1 tandis que AA Normal exige 4,5:1. WCAG fixe un seuil plus bas pour le grand texte car les caractères plus grands sont plus faciles à lire même avec moins de contraste. Une paire de couleurs qui obtient, disons, 4,0:1 réussit AA Grand (seuil 3:1) mais échoue AA Normal (seuil 4,5:1). C'est très courant avec les couleurs de marque claires utilisées en premier plan sur des fonds blancs.
Puis-je me fier uniquement à cet outil pour auditer l'accessibilité ?
Cet outil vérifie une chose — le rapport de contraste WCAG 2.x entre deux couleurs unies. L'accessibilité réelle implique davantage : les indicateurs de focus, la taille et le poids de la police, la couleur comme seul moyen de transmettre une information, et la compatibilité avec les lecteurs d'écran et les outils de zoom. Utilisez cette vérification de contraste en complément d'autres méthodes d'audit pour obtenir une image complète de l'accessibilité de votre application.
Quels formats de couleur l'entrée accepte-t-elle ?
Vous pouvez coller des codes hex à 3, 4, 6 ou 8 chiffres (avec ou sans #), des valeurs rgb() et rgba() en syntaxe traditionnelle à virgules ou en syntaxe moderne séparée par des espaces, hsl() et hsla() avec n'importe quelle unité de teinte standard (deg, rad, grad, turn), hsv(), hwb() et n'importe laquelle des 150 couleurs CSS nommées de la spécification CSS Color Module Level 4. La couleur est entièrement analysée sur votre appareil.