Vérifier le contraste du texte et de l’arrière-plan (WCAG)
Sur cette page
En bref : ouvrez Palette de couleurs à partir d’une image d’Imgovo, ouvrez l’onglet Contraste, choisissez une couleur de texte et une couleur d’arrière-plan, puis lisez le résultat WCAG 2.2. Un rapport de 4,5:1 réussit le niveau AA pour le texte normal, 3:1 réussit le niveau AA pour le grand texte et 7:1 réussit le niveau AAA pour le texte normal. Vous pouvez tirer les couleurs d’une photo ou saisir vos propres codes HEX. Rien n’est envoyé.
Ce que signifie le rapport de contraste
Le rapport de contraste compare la luminosité de deux couleurs. Il va de 1:1 (couleurs identiques) à 21:1 (noir sur blanc). Un texte trop peu contrasté est difficile à lire, surtout pour les personnes malvoyantes, sur un téléphone au soleil ou sur un mauvais écran.
Les chiffres à retenir
| Niveau | Texte normal | Grand texte | Éléments d’interface et icônes |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | 3:1 |
| AAA | 7:1 | 4.5:1 | – |
Un grand texte fait au moins 24 px, ou 18,66 px en gras.
Pas à pas
- Ouvrez Palette de couleurs à partir d’une image. Ajoutez une image pour créer une palette, ou utilisez Créer une palette sans image.
- Ouvrez l’onglet Contraste.
- Choisissez la Couleur du texte et la Couleur d’arrière-plan dans votre palette ou saisissez les vôtres.
- Regardez les exemples (grand et petit texte) et les Résultats WCAG 2.2 pour cette paire : le rapport et la réussite ou l’échec pour AA et AAA.
- Si la paire échoue, cliquez sur Suggérer une couleur de texte lisible, puis sur Utiliser la suggestion.
- Avec Inverser, essayez un texte clair sur fond sombre et l’inverse. Toutes les paires affiche chaque combinaison de la palette.
Des couleurs tirées d’une photo
Si vous avez extrait une palette d’une photo, ne supposez pas qu’elle convient au texte. Les couleurs douces ou proches échouent souvent. Prenez une pastille sombre pour le texte et une claire pour l’arrière-plan, ou l’inverse, et testez la paire. Pour créer la palette, lisez Obtenir une palette de couleurs à partir d’une image.
Voir comment d’autres peuvent percevoir la palette
L’outil affiche aussi une approximation de différences courantes de vision des couleurs. Elle aide à repérer des couleurs qui se ressemblent pour certaines personnes. Ce n’est ni un test de contraste ni un outil médical.
Essayer les couleurs dans une interface
L’onglet Aperçu montre vos couleurs dans une petite mise en page avec une page, une carte, du texte, un accent et une bordure, pour les voir en situation avant de copier les codes dans votre CSS.
Limites
Le vérificateur mesure une seule paire de couleurs unies à la fois. Il ne teste ni les photos derrière du texte, ni les dégradés, ni les états de survol, ni le reste de l’accessibilité. Voyez le résultat comme un contrôle utile, pas comme un certificat.
Confidentialité
Les couleurs sont vérifiées dans votre navigateur. Rien n’est envoyé.
Essayez maintenant
Ouvrez Palette de couleurs à partir d’une image, allez dans Contraste et testez vos couleurs de texte et d’arrière-plan.
Questions fréquentes
Quel rapport de contraste me faut-il ?
WCAG 2.2 demande au niveau AA au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte. Le niveau AAA demande 7:1 pour le texte normal et 4,5:1 pour le grand texte. Les éléments d’interface et les icônes demandent 3:1.
Qu’est-ce qu’un grand texte ?
Au moins 24 px, ou 18,66 px en gras.
Est-ce un certificat d’accessibilité pour mon design ?
Non. Le vérificateur mesure une paire de couleurs unies. Ce n’est pas un certificat pour un design entier, et il ne teste ni les images, ni les dégradés, ni le texte sur photo, ni les autres aspects de l’accessibilité.
Imgovo peut-il suggérer une couleur de texte lisible ?
Oui. Choisissez une couleur d’arrière-plan et utilisez « Suggérer une couleur de texte lisible ». Vous pouvez ensuite utiliser la suggestion ou garder la vôtre.
Puis-je vérifier toutes les couleurs d’une palette à la fois ?
Oui. La vue « Toutes les paires » liste chaque paire texte/arrière-plan de votre palette avec son résultat.
Mon image est-elle envoyée sur un serveur ?
Non. Les couleurs sont vérifiées dans votre navigateur, rien ne quitte votre appareil.