Vérificateur de contraste
Si quelqu’un peut vraiment le lire.
Les exemples remplacent temporairement la saisie et les réglages. Vous pouvez rétablir votre travail précédent.
0 caractères
Résultat
Collez ou saisissez du texte ci-dessus pour voir le résultat ici.
Vos fichiers restent sur votre appareil
Cet outil fonctionne entièrement dans votre navigateur. Ce que vous collez est traité sur votre appareil et n’est jamais envoyé à un serveur : vous pouvez l’utiliser sans crainte avec des jetons, des clés et des textes non publiés.
Exemple
Exemple pratique — Vérificateur de contraste
Saisissez les lignes dans l’ordre et utilisez les réglages ci-dessous. Comparez le résultat avec les lignes de sortie.
| Élément | Valeur |
|---|---|
| Entrée 1 | #000000 |
| Arrière-plan, quand une seule couleur est donnée | #ffffff |
| Sortie 1 | #000000 sur #ffffff |
| Sortie 2 | Rapport 21,00 : 1 |
| Sortie 3 | Texte courant AA conforme (minimum 4,5) |
| Sortie 4 | Texte courant AAA conforme (minimum 7) |
| Sortie 5 | Grand texte AA conforme (18,66 px gras ou 24 px, minimum 3) |
| Sortie 6 | Grand texte AAA conforme (minimum 4,5) |
| Sortie 7 | Bordures, icônes conforme (minimum 3) |
Le noir sur blanc offre un contraste de 21:1 et réussit les contrôles AA et AAA du texte dans l’outil.
Comment ça marche
- Tapez une paire par ligne : #333 sur #fff. Une virgule, une barre oblique ou une simple espace conviennent aussi.
- Donnez une seule couleur et elle est comparée au fond indiqué au-dessus.
- Lisez d’abord le rapport ; tout le reste en découle.
- 4,5 est le nombre à dépasser pour du texte courant.
Questions fréquentes
- Qu’exigent exactement AA et AAA ?
- AA demande 4,5 : 1 pour le texte courant et 3 : 1 pour le grand texte — 24 px, ou 18,66 px en gras. AAA demande 7 : 1 et 4,5 : 1. Les bordures, les icônes et les contours des champs de formulaire ont besoin de 3 : 1.
- Pourquoi mon gris échoue-t-il ?
- #777 sur blanc donne 4,48 : 1 et rate AA de deux centièmes. C’est l’échec de justesse classique, et la raison même pour laquelle on vérifie : cela paraît très bien à qui a choisi la couleur, et c’est réellement difficile à lire pour beaucoup de gens. #757575 passe.
- L’ordre des couleurs compte-t-il ?
- Pas avec des couleurs opaques : le rapport est symétrique, texte sur fond et fond sur texte donnent le même nombre. Avec une couleur transparente (#33333380, rgba(…)), si : la première est posée sur la seconde, et un fond transparent sur une page blanche ; écrivez donc d’abord la couleur du texte.
- Un rapport suffisant suffit-il à parler d’accessibilité ?
- Non. Le contraste est une exigence parmi d’autres et ne dit rien des états de focus, des zones cliquables, des animations, ni du fait que la couleur porte à elle seule une information. C’est un plancher, pas un verdict.
Outils associés
◒ Convertisseur de couleur HEX, RGB, HSL et CMJN — plus le rapport de contraste qui décide de la lisibilité. ◒ Formateur CSS Une déclaration par ligne — ou tout le fichier sur une seule. ◉ Outils image Pipette de couleur sur image Un clic pour un code couleur, un bouton pour la palette de l’image. ‹› Formateur HTML Indenté pour le lire, ou compressé pour le livrer.