Vérifiez le contraste du texte avant de choisir vos couleurs
Le même vert, un arrière-plan différent, et un résultat différent. Quatre paires que vous pouvez essayer vous-même.
Un vert qui fonctionne bien dans une palette peut être difficile à lire en petit libellé. Vérifiez la couleur du texte avec son arrière-plan avant de l'utiliser dans un design.
Voici quatre combinaisons que vous pouvez reproduire dans Studio de couleurs. La troisième utilise exactement le même vert que la deuxième ; seul l'arrière-plan change.
Un changement d'arrière-plan peut faire échouer un test
| Échantillon | Texte / arrière-plan | Ratio de contraste |
|---|---|---|
| 1 | #8DAA91 / #FFFFFF |
2.53:1 |
| 2 | #647C66 / #FFFFFF |
4.55:1 |
| 3 | #647C66 / #F3E7CE |
3.71:1 |
| 4 | #4B7051 / #F3E7CE |
4.59:1 |
Les échantillons 2 et 4 passent le seuil de contraste WCAG AA pour le texte normal. Les échantillons 1 et 3 ne le passent pas. Les nombres affichés ici sont arrondis pour l'affichage ; les vérifications utilisent les valeurs complètes calculées.
Passer de blanc à crème a fait échouer l'échantillon 2. Assombrir le vert dans l'échantillon 4 l'a ramené au-dessus du seuil. Ce sont des couleurs d'exemple, pas une palette obligatoire pour votre projet. Téléchargez leur CSS pour les essayer dans votre propre mise en page.
Vérifiez aussi la taille du texte
Les directives de contraste de texte du WCAG fixent un ratio minimum de 4.5:1 pour le texte normal au niveau AA. Le texte agrandi a un seuil plus bas de 3:1. « Agrandi » signifie au moins 24 pixels CSS pour le texte normal, ou environ 18.67 pixels CSS pour le texte en gras.
Cette distinction compte pour un petit libellé sous un titre. Une paire de couleurs peut passer pour le titre et échouer pour le label. Évaluez chaque élément à sa taille réelle affichée, y compris quand une image sociale est réduite dans un flux.
N'arrondissez pas une valeur qui échoue pour la faire passer. Un résultat de 4.499:1 reste en dessous de 4.5:1.
Essayez les quatre paires dans l'outil
- Ouvrez Studio de couleurs et choisissez Contraste.
- Saisissez la première paire dans Couleur du texte et Couleur d’arrière-plan.
- Vérifiez Texte normal AA, puis comparez Grand texte AA.
- Répétez avec les autres paires. Pour les échantillons 2 et 3, changez uniquement l'arrière-plan pour voir pourquoi les deux valeurs comptent.
- Placez votre paire choisie dans le design réel et lisez-la à sa taille finale. Vérifiez les petits libellés et les liens, pas seulement le grand titre d'exemple.
Sur un téléphone, l'aperçu et les paramètres apparaissent l'un après l'autre. Les vérifications utilisent les mêmes valeurs que sur ordinateur.
Les couleurs unies ne sont que le point de départ
Le vérificateur compare deux couleurs opaques et unies. Il n'inspecte pas chaque pixel derrière le texte sur une photo ou un dégradé, et ne tient pas compte d'une couche partiellement transparente. Vérifiez les zones les plus claires et les plus sombres sous le lettrage, ou donnez au texte un panneau uni dont vous pouvez tester la couleur.
Essayez le design dans les thèmes clair et sombre si vous les proposez. Réussir sur une carte blanche ne dit rien sur le même texte sur un menu sombre. Un lettrage fin peut aussi être plus difficile à lire que le ratio ne le suggère, alors laissez une marge au-dessus du minimum plutôt que de viser tout juste le seuil.
Ce que nous avons vérifié
Le 5 octobre 2026, nous avons passé les quatre paires dans la même fonction de contraste que Studio de couleurs. Le fichier de résultats enregistre les ratios exacts et les décisions AA. Le CSS téléchargeable et l'illustration utilisent ces mêmes valeurs de couleurs.
Ceci vérifie le contraste du texte, pas l'accessibilité d'une page entière. Cela n'évalue pas la navigation au clavier, les libellés, l'ordre de lecture ou la compréhensibilité de votre contenu.