Vérificateur de contraste selon les WCAG 2.2
Saisissez ou choisissez la couleur du texte et celle du fond : le vérificateur calcule la luminance relative des deux couleurs et le ratio de contraste exactement selon la définition du W3C, puis indique les critères de succès des WCAG 2.2 respectés. Si le contraste est insuffisant, il propose la couleur de texte adaptée la plus proche.
Comment le calcul est fait
Comment le contraste est calculé
Les WCAG 2.2 définissent le ratio de contraste comme (L1 + 0,05) ÷ (L2 + 0,05). L1 est la luminance relative de la couleur la plus claire, L2 celle de la plus foncée. Le résultat est compris entre 1 : 1 (couleurs identiques) et 21 : 1 (noir sur blanc).
Le vérificateur calcule la luminance relative exactement selon la définition du W3C : chaque canal sRGB est divisé par 255 puis linéarisé, les valeurs jusqu’à 0,04045 étant divisées par 12,92, les autres donnant ((valeur + 0,055) ÷ 1,055)2,4. On a alors L = 0,2126 × R + 0,7152 × G + 0,0722 × B.
Exemple #777777 sur blanc : 0x77 = 119, 119 ÷ 255 = 0,4667 → ((0,4667 + 0,055) ÷ 1,055)2,4 = 0,1845. Les trois canaux étant identiques, L = 0,1845. Le blanc a L = 1. Contraste = (1 + 0,05) ÷ (0,1845 + 0,05) = 4,48 : 1. Cela suffit pour du grand texte (3 : 1), mais de justesse pas pour du texte normal (4,5 : 1). La couleur proposée #767676 atteint 4,54 : 1.
Les exigences des WCAG 2.2
| Critère de succès | Niveau | Texte normal | Grand texte |
|---|---|---|---|
| 1.4.3 Contraste (minimum) | AA | 4,5 : 1 | 3 : 1 |
| 1.4.6 Contraste (amélioré) | AAA | 7 : 1 | 4,5 : 1 |
| 1.4.11 Contraste du contenu non textuel (composants d’interface, graphiques) | AA | 3 : 1 | |
Selon les WCAG, un grand texte mesure au moins 18 points, ou au moins 14 points en gras, soit environ 24 px ou 18,67 px dans le navigateur. Sont notamment exclus les logos, le texte purement décoratif et les éléments de commande inactifs.
Ne pas arrondir
Les WCAG comparent la valeur exacte : 4,499 : 1 ne satisfait pas 4,5 : 1. Le vérificateur évalue donc sans arrondir et affiche deux décimales ; si l’arrondi semblait atteindre un seuil, il tronque (4,49 au lieu de 4,50).
Couleurs transparentes
Les couleurs avec une valeur alpha (p. ex. rgba(0, 0, 0, 0.6) ou #00000099) sont superposées comme le navigateur les dessine : un fond transparent sur du blanc, une couleur de texte transparente sur le fond. Si votre page repose sur un autre arrière-plan, saisissez sa couleur opaque comme fond.
Questions fréquentes
Quel contraste faut-il pour l’accessibilité ?
Pour du texte normal, au moins 4,5 : 1 (niveau WCAG AA, SC 1.4.3) ; pour du grand texte, 3 : 1. Le niveau AAA, plus strict, exige 7 : 1 ou 4,5 : 1. Les éléments de commande comme les bordures de champs de saisie et les icônes demandent 3 : 1 (SC 1.4.11).
Quels gris restent conformes AA sur fond blanc ?
#767676 est le gris le plus clair atteignant au moins 4,5 : 1 sur blanc (4,54 : 1). #777777, avec 4,48 : 1, est déjà juste en dessous.
Comment le vérificateur trouve-t-il la couleur proposée ?
Il conserve la teinte et la saturation de votre couleur de texte et ne modifie que la luminosité HSL par petits pas, vers le clair comme vers le foncé. Il propose la plus petite modification dont la couleur arrondie atteint sûrement l’objectif.
Ces seuils valent-ils pour les règles d’accessibilité en France ?
Le RGAA 4.1, référentiel français d’accessibilité numérique, repose sur les WCAG 2.1 niveau AA. L’European Accessibility Act (directive (UE) 2019/882) s’appuie sur la norme européenne EN 301 549, qui renvoie elle aussi aux WCAG 2.1 niveau AA. Leurs critères de contraste sont identiques à ceux des WCAG 2.2 : 4,5 : 1 pour le texte, 3 : 1 pour le grand texte et les éléments de commande.
Sources et références juridiques
- SC 1.4.3: W3C – WCAG 2.2: Contrast (Minimum), Level AA
- SC 1.4.6: W3C – WCAG 2.2: Contrast (Enhanced), Level AAA
- SC 1.4.11: W3C – WCAG 2.2: Non-text Contrast, Level AA
- WCAG 2.2: W3C – WCAG 2.2: Definition “relative luminance”
- WCAG 2.2: W3C – WCAG 2.2: Definition “contrast ratio”
- W3C WAI – Understanding SC 1.4.3: Contrast (Minimum)
Dernière mise à jour :
Outils similaires
- Générateur de palette de couleursCréez des couleurs assorties depuis une couleur de base : complémentaire, analogue, triadique, carré, complémentaire adjacent ou monochrome, en HEX, RGB et HSL.
- Convertisseur de couleurs : HEX, RGB, HSL, HSV, CMJNConvertissez vos couleurs : HEX en RGB, RGB en HEX, HSL, HSV, HWB et CMJN. Saisie dans tout format ou via le sélecteur, résultat à copier, dans le navigateur.
- Pipette : trouver la couleur d’une imageLisez le code couleur d’une image : chargez une photo, cliquez sur un point, copiez HEX, RGB et HSL, plus les couleurs dominantes. Sans envoi, tout reste local.
- Calculer l’âge de son chat en âge humainQuel âge a mon chat en années humaines ? Conversion selon le tableau AAFP-AAHA, chatons en mois compris, avec le stade de vie des lignes directrices 2021.
- Calculer l’âge de son chien en âge humainQuel âge a votre chien en années humaines ? Formule 16·ln(âge)+31 (Wang et al. 2020) et tableau de l’AVMA selon la taille, avec l’âge senior du chien.
- Calculer son besoin en eau par jourCombien d’eau boire par jour ? Apport en boissons et en eau totale selon l’âge, le sexe, la grossesse et l’allaitement, selon l’EFSA et la DGE.