Vérificateur de contraste couleur
Testez le texte et le fond
Ce vérificateur gratuit de contraste couleur donne le ratio WCAG de deux couleurs pendant que vous tapez. Il montre chaque résultat AA et AAA, puis propose la couleur la plus proche qui réussit. De plus, vous voyez la paire comme la voient les personnes daltoniennes.
- GratuitPrix
- WCAG 2.2 AA et AAANorme
- Jusqu’à 12 couleursGrille de palette
- AucuneInscription
Vérificateur de contraste couleur
Ratio WCAG 2, AA et AAA, avec corrections et vue daltonienne
Saisissez de l’hex, rgb(), hsl() ou un nom de couleur CSS. Une couleur de texte transparente, comme #00000080, se mélange d’abord au fond.
5.82:1
Réussit AA pour tout texte. Manque AAA pour le texte normal.
- Texte normal AA (4.5:1)Réussi
- Texte normal AAA (7:1)Échoue
- Grand texte AA (3:1)Réussi
- Grand texte AAA (4.5:1)Réussi
- Icônes et bordures (3:1)Réussi
Un texte normal en 16px se lit comme ce paragraphe.
Grand texte en 24px
Un texte gras en 19px compte comme grand
Bouton
Mesure APCA (brouillon WCAG 3) : Lc 78.5convient au texte de 18px et plus
Couleurs les plus proches qui réussissent
Cette paire réussit déjà AAA, il n’y a donc rien à corriger.
| Vision | Aperçu | Ratio |
|---|---|---|
| Protanopie (sans cônes rouges) | Aa | 5.01:1 |
| Deutéranopie (sans cônes verts) | Aa | 6.05:1 |
| Tritanopie (sans cônes bleus) | Aa | 4.96:1 |
| Achromatopsie (aucune couleur) | Aa | 5.82:1 |
Les lignes sont la couleur du texte et les colonnes le fond. AAA signifie 7:1, AA signifie 4.5:1 et AA+ signifie 3:1, ce qui suffit seulement pour le grand texte.
Prêt. Changez l’une des couleurs et le résultat se met à jour pendant la saisie.
Ce que ce vérificateur de contraste couleur vous apprend
Le contraste est l’écart de luminosité entre deux couleurs. Par ailleurs, quand l’écart est faible, les mots se fondent dans la page. Ainsi, les personnes malvoyantes, celles qui lisent sur un téléphone au soleil et tous les yeux fatigués peinent à les lire.
Cet outil mesure le contraste couleur comme le font les Règles pour l’accessibilité des contenus Web. D’abord, vous saisissez ou choisissez une couleur de texte et une couleur de fond. Ensuite, l’outil calcule le ratio, de 1:1 pour deux couleurs égales à 21:1 pour du noir sur blanc. Enfin, il indique les niveaux WCAG que la paire réussit.
Les règles viennent du critère de contraste de WCAG 2.2. Le texte normal demande 4.5:1 pour le niveau AA, tandis que le grand texte demande 3:1. En outre, les icônes, les bordures et les champs de formulaire demandent 3:1 face à leur voisinage.
Tout tourne dans l’onglet de votre navigateur. Donc les couleurs testées n’atteignent jamais notre serveur, et vous pouvez vérifier une palette de marque avant sa sortie.
Comment se calcule le ratio de contraste
D’abord, chaque couleur devient une luminance relative, un nombre de 0 pour le noir à 1 pour le blanc. La formule donne le plus de poids au vert et le moins au bleu, car nos yeux réagissent bien plus à la lumière verte qu’à la bleue.
Ensuite, l’outil ajoute 0.05 aux deux valeurs et divise la plus claire par la plus sombre. Cela donne le ratio de contraste. Par ailleurs, l’ordre des couleurs ne le change pas, donc une inversion donne le même nombre.
Notre vérificateur de contraste couleur n’arrondit jamais un ratio vers le haut. Une paire à 4.499:1 s’affiche 4.49:1 et échoue, car WCAG traite les seuils comme des lignes exactes.
AA, AAA et grand texte en mots simples
Le niveau AA est la cible que citent la plupart des lois et des contrats. Le texte normal demande 4.5:1, et le grand texte 3:1. Le niveau AAA est en revanche plus strict, avec 7:1 pour le texte normal et 4.5:1 pour le grand texte.
Grand signifie au moins 24px, ou au moins 18.66px si le texte est en gras. Ces valeurs viennent des corps 18 et 14 points. Donc un paragraphe en 16px compte toujours comme texte normal, même dans un style de titre.
L’outil montre les cinq résultats à la fois, chacun avec une étiquette réussi ou échoué. Par conséquent, vous voyez d’un coup d’œil si une couleur ne sert qu’à un gros titre ou aussi au texte courant.
Les couleurs les plus proches qui réussissent
Un échec n’est qu’une demi-réponse. C’est pourquoi l’outil cherche aussi la couleur la plus proche qui réussirait, pour AA et pour AAA. Il garde la teinte et la saturation, et ne change que la luminosité.
Vous obtenez deux types de correction. L’une change la couleur du texte, l’autre change le fond. Par exemple, le gris #777777 sur blanc échoue à 4.47:1, tandis que #767676 réussit à 4.54:1. Un clic applique la correction, et tous les résultats se mettent à jour.
Daltonisme et mesure APCA
Un tableau sous le résultat montre votre paire avec quatre types de daltonisme : sans cônes rouges, verts ou bleus, et sans couleur du tout. Chaque ligne a son propre ratio. Le rouge sur vert est le piège classique, car les deux couleurs peuvent sembler du même brun.
L’outil donne aussi une mesure APCA, la méthode du brouillon de WCAG 3. Son score Lc tient compte de la couleur placée dessus, donc blanc sur noir et noir sur blanc ne notent pas pareil. Cependant, l’APCA reste un brouillon, alors prenez-la comme second avis et gardez WCAG 2 comme seuil de réussite.
Une grille de palette pour tout un système de design
La plupart des équipes choisissent dans une palette plutôt que parmi deux couleurs. Donc le second panneau accepte jusqu’à 12 couleurs, une par ligne, et teste toutes les paires d’un coup.
Les lignes sont la couleur du texte et les colonnes le fond. Chaque case montre un petit aperçu, le ratio et une note : AAA, AA, AA+ pour le grand texte seulement, ou un tiret en cas d’échec. Ainsi, vous savez quelles paires conviennent au texte avant de construire une page.
Sur cette page
- L’outil
- Ce que ce vérificateur de contraste couleur vous apprend
- Utiliser le vérificateur de contraste couleur, étape par étape
- Pourquoi utiliser ce vérificateur de contraste WCAG
- Les lignes de contraste fixées par WCAG
- Les erreurs de contraste qui font échouer un audit
- Questions fréquentes sur le contraste couleur
- D’autres outils gratuits de couleur et de design
Continuer
Voir le vérificateur de contraste couleur en action, du début à la fin
Cette courte vidéo suit l’outil du premier au dernier clic. Choisissez votre langue juste en dessous, et affichez les sous-titres s’ils vous aident.
Utiliser le vérificateur de contraste couleur, étape par étape
Cinq étapes rapides mènent de deux couleurs à une paire prête à publier.
Saisir la couleur du texte
Tapez un code hex, rgb(), hsl() ou un nom de couleur, ou cliquez sur la pastille pour choisir.
Saisir le fond
Ajoutez la couleur derrière le texte. Dans Chrome et Edge, Prendre à l’écran capte n’importe quel pixel.
Lire le ratio
Le grand nombre et les cinq étiquettes montrent ce que la paire réussit. De plus, l’aperçu l’affiche en trois tailles.
Appliquer une correction
Si la paire échoue, cliquez sur une des couleurs proches qui réussissent. Puis vérifiez de nouveau l’aperçu.
Garder le résultat
Copiez le CSS, copiez un lien vers la paire ou téléchargez un court rapport pour vos notes.
Pourquoi utiliser ce vérificateur de contraste WCAG
Un ratio seul en dit moins qu’il ne faut. C’est pourquoi ces trois extras comblent le manque.
Il propose la correction
Inutile de deviner une nuance plus sombre. L’outil trouve la couleur la plus proche qui réussit, des deux côtés de la paire.
Il gère les couleurs transparentes
Une couleur de texte avec opacité, comme #00000080, se mélange d’abord à son fond. Ainsi, le ratio correspond à ce que montre l’écran.
Il teste une palette entière
Collez jusqu’à 12 couleurs et chaque paire reçoit une note. Ainsi, un après-midi de tests isolés devient un seul clic.
Les lignes de contraste fixées par WCAG
Trois nombres couvrent presque tous les cas d’une page web.
- 4.5:1 pour le texte normal C’est le niveau AA pour le texte courant, les liens, les libellés et le texte indicatif. Le niveau AAA demande en revanche 7:1.
- 3:1 pour le grand texte Un texte de 24px, ou de 18.66px en gras, réussit AA à 3:1. Pour le grand texte, AAA demande 4.5:1.
- 3:1 pour les icônes et les bordures Depuis WCAG 2.1, les bordures de champs, les anneaux de focus et les icônes utiles demandent 3:1 face à leur voisinage.
Les erreurs de contraste qui font échouer un audit
Chacune passe un coup d’œil rapide et échoue pourtant à un vrai test.
Un texte indicatif gris clair
Le texte indicatif d’un champ reste du texte, donc il demande aussi 4.5:1. Or le gris pâle de nombreux thèmes échoue.
Du texte sur une photo
Une photo a des zones claires et sombres. Donc testez le texte contre la zone la plus claire qu’il couvre, ou ajoutez un fond plein.
Se fier à la couleur seule
Une erreur en rouge sans icône ni mot échoue pour qui ne voit pas le rouge. Associez donc la couleur à une étiquette.
Oublier le survol et le focus
Un lien peut réussir au repos et échouer au survol. Vérifiez donc chaque état, y compris l’anneau de focus.
Arrondir le ratio vers le haut
Certains outils affichent 4.5 pour une paire à 4.48. Pourtant WCAG n’arrondit pas, donc cette paire échoue.
Tester seulement le thème clair
Un bleu de marque qui réussit sur blanc peut échouer sur un fond sombre. Testez donc les deux thèmes.
Questions fréquentes sur le contraste couleur
Quel ratio de contraste convient au texte ?
Visez au moins 4.5:1 pour le texte normal, c’est le niveau AA de WCAG. Pour une lecture longue, en revanche, 7:1 ou plus est préférable, et c’est le niveau AAA.
Ce vérificateur de contraste est-il gratuit ?
Oui. Il est gratuit, sans compte et sans limite sur le nombre de paires testées.
Mes couleurs sont-elles envoyées quelque part ?
Non. Tout le test se fait dans l’onglet de votre navigateur, donc vos couleurs n’atteignent jamais notre serveur.
Un colour contrast checker, est-ce le même outil ?
Oui. Colour est l’orthographe britannique de color en anglais, donc cet outil fait exactement le même travail que cette page.
Qu’est-ce qu’un grand texte ?
Un texte d’au moins 24px, ou d’au moins 18.66px en gras. Ces tailles correspondent à 18 et 14 points.
Quels formats puis-je saisir ?
L’hexadécimal à 3, 4, 6 ou 8 chiffres, rgb(), rgba(), hsl(), hsla() et les noms de couleur CSS, comme navy ou tomato.
Comment l’outil gère-t-il la transparence ?
D’abord, une couleur de texte semi-transparente se mélange au fond avant le test. De même, un fond semi-transparent se mélange d’abord au blanc.
Pourquoi l’outil affiche-t-il 4.49 et pas 4.5 ?
Le ratio est coupé à deux décimales et jamais arrondi vers le haut. Ainsi, une paire juste sous la ligne affiche un nombre sous la ligne, et elle échoue.
Inverser les couleurs change-t-il le ratio ?
Non. Le ratio WCAG reste le même dans les deux sens. Toutefois, l’aperçu et la mesure APCA changent, car APCA tient compte de la couleur placée dessus.
Qu’est-ce que l’APCA ?
L’APCA est la méthode de contraste du brouillon de WCAG 3. Elle donne un score Lc qui dépend de la taille du texte et de la couleur placée dessus.
Faut-il suivre l’APCA ou WCAG 2 ?
Suivez WCAG 2 pour la conformité aujourd’hui, car les lois et les audits s’y réfèrent. Utilisez l’APCA comme simple indice, puisque c’est encore un brouillon.
Les icônes et les boutons ont-ils aussi besoin de contraste ?
Oui. WCAG 2.1 a ajouté une règle de 3:1 pour les icônes, les bordures de champs, les anneaux de focus et les autres éléments à voir.
Un bouton désactivé doit-il réussir ?
Non. WCAG exclut les commandes inactives. Malgré tout, gardez-les lisibles, car les gens doivent savoir que la commande existe.
Et les logos ou le texte décoratif ?
Les logos et la pure décoration sont exemptés. En revanche, tout texte qui a un sens doit réussir, même les petites lignes.
Comment fonctionnent les corrections proposées ?
L’outil garde la teinte et la saturation, puis ne change que la luminosité. Ensuite, il choisit le pas le plus proche qui atteint AA ou AAA.
Puis-je prendre une couleur sur mon écran ?
Oui, dans Chrome et Edge. Le bouton Prendre à l’écran utilise la pipette du navigateur. Ailleurs, utilisez plutôt la pastille ou un code saisi.
Que montre le tableau du daltonisme ?
Il montre la paire telle que la voient les personnes sans cônes rouges, verts ou bleus, et sans vision des couleurs. De plus, chaque ligne a son propre ratio.
Le daltonisme est-il fréquent ?
Environ 1 homme sur 12 et 1 femme sur 200 ont une forme de trouble de la vision des couleurs. La confusion entre rouge et vert est la plus courante.
Puis-je tester une palette entière ?
Oui. Collez jusqu’à 12 couleurs dans le panneau de palette, une par ligne, puis cliquez sur Tester toutes les paires pour obtenir une grille notée.
Comment tester un texte sur un dégradé ou une photo ?
Prenez le point le plus clair derrière un texte clair, ou le plus sombre derrière un texte sombre. Si le pire point réussit, le reste réussit aussi.
Le contraste WCAG est-il une obligation légale ?
Dans beaucoup de pays, oui. La section 508 aux États-Unis et la norme européenne EN 301 549 renvoient au niveau AA de WCAG, et le RGAA en France s’appuie aussi sur WCAG.
WCAG 2.2 a-t-il changé les règles de contraste ?
Non. WCAG 2.2 garde les mêmes valeurs de contraste que WCAG 2.1, donc une paire qui réussissait avant réussit encore.
Pourquoi d’autres outils donnent-ils un nombre un peu différent ?
Certains arrondissent à une décimale, et d’autres utilisent un ancien seuil dans la formule. L’écart est minime, mais il peut faire basculer une paire pile sur la ligne.
Puis-je partager un résultat ?
Oui. Copier le lien vers cette paire donne une adresse qui ouvre cette page avec les deux mêmes couleurs.
Cela remplace-t-il un audit d’accessibilité complet ?
Non. Ce vérificateur de contraste WCAG ne couvre que la couleur. En revanche, un audit complet vérifie aussi le clavier, les titres, le texte alternatif et bien plus.
D’autres outils gratuits de couleur et de design
Utilisez-les avec le vérificateur de contraste couleur pour créer et tester une palette.
- Sélecteur de code couleur
Convertir une couleur entre hex, RGB, HSL et CMYK.
- Générateur de palette de couleurs
Obtenir six harmonies à partir d’une couleur de départ.
- Vérificateur de texte alternatif
Trouver les images au texte alternatif absent ou faible.
- Vérificateur de lisibilité
Voir si votre texte se lit facilement.
De plus, testez le contraste couleur maintenant
Saisissez deux couleurs et voyez le ratio, le résultat WCAG et la correction la plus proche en quelques secondes. En plus, aucun compte n’est nécessaire.