FR

Vérificateur de contraste des couleurs 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.

Source : SC 1.4.3, W3C – WCAG 2.2: Contrast (Minimum), Level AA. Mise à jour : .

HEX, rgb(), hsl()…, transparence acceptée
Ma boîte à outilsVos saisies sont enregistrées uniquement dans ce navigateur.

Aperçu

Texte normal : voici comment se lit un paragraphe en 16 pixels.

Grand texte dès 24 px

Texte gras dès 18,67 px

Bouton

Aperçu avec vos couleurs : 16 px normal, 24 px normal et 18,67 px gras (= 14 pt gras, grand texte), puis une bordure et une icône comme exemple d’interface.

Résultat

Ratio de contraste
4,48 : 1
Évaluation selon les WCAG 2.2
CritèreMinimumRésultat
Texte normal – AA (SC 1.4.3)4,5 : 1✗ non respecté
Texte normal – AAA (SC 1.4.6)7 : 1✗ non respecté
Grand texte – AA (SC 1.4.3)3 : 1✓ respecté
Grand texte – AAA (SC 1.4.6)4,5 : 1✗ non respecté
Composants d’interface et graphiques – AA (SC 1.4.11)3 : 1✓ respecté
Couleur de texte la plus proche pour AA (4,5 : 1)
#767676 (4,54 : 1)
Couleur de texte la plus proche pour AAA (7 : 1)
#595959 (7,00 : 1)
Luminance relative du texte
0,1845 (#777777)
Luminance relative du fond
1,0000 (#FFFFFF)

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).

Vérifier un contraste en 3 étapes

  1. Saisissez ou choisissez la couleur du texte (premier plan).
  2. Saisissez ou choisissez la couleur de fond.
  3. Lisez le ratio de contraste et les critères WCAG atteints (AA, AAA) ; reprenez si besoin la couleur proposée.

Exemple : le noir sur blanc atteint 21:1. Le gris #767676 sur blanc obtient 4,54:1 et passe AA pour le texte courant ; le bleu #3B82F6 sur blanc n’atteint que 3,68:1, suffisant en AA seulement pour le grand texte.

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èsNiveauTexte normalGrand texte
1.4.3 Contraste (minimum)AA4,5 : 13 : 1
1.4.6 Contraste (amélioré)AAA7 : 14,5 : 1
1.4.11 Contraste du contenu non textuel (composants d’interface, graphiques)AA3 : 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.

Autres outils couleur : le convertisseur de couleurs, le générateur de palette et la pipette couleur.

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.

Quel contraste pour un grand texte ?

Pour un grand texte (18 pt, ou 14 pt en gras), le niveau AA demande au moins 3:1 et le niveau AAA 4,5:1. Le texte courant exige 4,5:1 (AA) ou 7:1 (AAA).

Sources et références juridiques

Dernière mise à jour : · Principes éditoriaux

Outils similaires