Vérificateur de contraste de couleurs WCAG
Testez n'importe quel couple texte/fond selon WCAG 2.2 (AA et AAA), visualisez-le en direct et obtenez la couleur conforme la plus proche en cas d'échec
Couleurs à tester
Saisissez une couleur HEX, rgb() ou hsl() valide.
Saisissez une couleur HEX, rgb() ou hsl() valide.
Lisible au premier coup d'œil ?
Portez ce vieux whisky au juge blond qui fume. Modifiez les couleurs et la taille pour voir comment ce paragraphe se comporte.
Une couleur par ligne (HEX, rgb() ou hsl()). Jusqu'à 6 couleurs ; chaque paire est vérifiée.
- Texte normal · AA (4,5:1) ✓
- Texte normal · AAA (7:1) ✓
- Grand texte · AA (3:1) ✓
- Grand texte · AAA (4,5:1) ✓
- Composants d'interface et graphiques · AA (3:1) ✓
Ajoutez au moins 2 couleurs valides à comparer
AAA ≥ 7:1 · AA ≥ 4,5:1 · AA grand texte ≥ 3:1 (grand texte uniquement)
Comment utiliser cet outil
- Saisissez la couleur du texte et celle du fond en HEX, rgb() ou hsl(), ou utilisez les sélecteurs de couleur.
- Réglez la taille du texte en px et cochez Gras si nécessaire, pour que l'outil sache s'il compte comme grand texte.
- Lisez le rapport de contraste et le résultat réussi ou échoué pour AA et AAA, texte normal et grand.
- En cas d'échec, utilisez Appliquer sur la couleur suggérée, ou passez à l'analyse de palette pour tester jusqu'à 6 couleurs.
Exemple concret
Le gris foncé #333333 sur blanc donne 12,63:1, ce qui passe tous les niveaux. Le gris moyen #777777 sur blanc donne 4,47:1 : le rapport est tronqué, pas arrondi, donc il échoue au seuil AA de 4,5:1 pour le texte normal alors qu'il semble proche. L'outil suggère #767676 (4,54:1) pour AA et #595959 (7,00:1) pour AAA, en gardant la teinte et en ne changeant que la luminosité. Le grand texte commence à 24 px normal ou environ 18,66 px en gras et n'exige que 3:1 pour AA. Un rapport suffisant ne garantit pas la lisibilité pour tous : graisse, taille et vue comptent aussi.
Méthodologie
Ce vérificateur applique l'algorithme de contraste de WCAG 2.x (critères de succès 1.4.3, 1.4.6 et 1.4.11), inchangé depuis WCAG 2.0 en 2008 et repris dans les versions 2.1 et 2.2. Les rapports sont tronqués, jamais arrondis : 4,499:1 s'affiche 4,49:1 et échoue à juste titre. Quand une paire échoue, la suggestion conserve la teinte et la saturation de votre couleur et ne cherche que sur l'axe de la luminosité la valeur la plus proche qui atteint l'objectif.
Six couleurs courantes sur blanc, puis un rouge corrigé
Rapports affichés par le vérificateur pour chaque couleur de texte sur #FFFFFF.
| Couleur du texte | Rapport | Normal AA (4,5:1) | Grand AA (3:1) |
|---|---|---|---|
| #0B5FFF | 5,12:1 | Conforme | Conforme |
| #008000 | 5,13:1 | Conforme | Conforme |
| #E53935 | 4,22:1 | Non conforme | Conforme |
| #FF0000 | 3,99:1 | Non conforme | Conforme |
| #808080 | 3,94:1 | Non conforme | Conforme |
| #FFA500 | 1,97:1 | Non conforme | Non conforme |
Les rapports sont tronqués, jamais arrondis. La colonne à lire dépend de la taille : le texte est grand à partir de 24 px en normal ou 18,66 px en gras, en dessous on lit la colonne Normal. L'orange #FFA500 échoue partout avec 1,97:1, et même en bordure d'interface cette couleur ne suffit pas sur blanc. Rouges, oranges et gris moyens posent le plus souvent problème, et un couple refusé pour du texte courant peut quand même passer en grand texte ou en bordure d'interface.
Le rouge d'erreur. Dana utilise #E53935 pour les erreurs de formulaire en 16 px. Il obtient 4,22:1 et n'est donc pas conforme AA en texte normal. L'outil garde sa teinte et ne modifie que la luminosité : #E32C28 atteint 4,50:1 pour AA, et #AF1A17 atteint 7,04:1 pour AAA. Elle applique #E32C28 aux messages en 16 px et garde #E53935 pour les titres en 24 px et les bordures de champs, où 3:1 suffit. Encore faut-il que ce soit lisible pour vous : un rapport conforme est un plancher, pas une garantie.
Accessibilité et fidélité des couleurs
Livres et matériel pour les designers et développeurs qui tiennent à des couleurs lisibles et fidèles
Design inclusif pour l'accessibilité : guide pratique de l'accessibilité numérique, de l'UX et du design web et mobile inclusif
Guide pratique de Dale Cruse et Denis Boudreau sur l'accessibilité numérique, l'UX et le design web et applicatif inclusif (livre en anglais).
Kit Calibrite Photo avec Display Pro HL : colorimètre de calibrage d'écran et ColorChecker Passport photo 2
Colorimètre Display Pro HL et ColorChecker Passport Photo 2 pour un flux couleur fidèle de la prise de vue à la retouche : fichiers RAW, profils d'appareil personnalisés et balance des blancs.
En tant que Partenaire Amazon, nous réalisons un bénéfice sur les achats remplissant les conditions requises, sans surcoût pour vous.
Questions fréquentes
Pourquoi #777777 sur blanc est-il refusé alors qu'il me semble lisible ? ▼
WCAG mesure la luminance relative, pas l'impression que donne un gris sur votre écran. #777777 sur blanc donne environ 4,47:1, juste sous le minimum AA de 4,5:1 pour le texte normal. #767676 est le gris neutre le plus clair qui passe AA sur blanc (4,54:1). Ces cas limites expliquent pourquoi l'outil tronque les rapports au lieu de les arrondir.
Comment l'outil détermine-t-il si mon texte est « grand » ? ▼
Il se fonde sur la taille et la graisse saisies : 24 px (18 pt) ou plus en graisse normale, ou 18,66 px (14 pt) ou plus en gras. Réglez la taille et cochez « Texte en gras » si besoin : les lignes correspondantes sont mises en évidence et le verdict suit cette catégorie.
Les textes d'exemple de champ, les boutons désactivés et les logos doivent-ils être conformes ? ▼
Les composants d'interface inactifs (désactivés) et les logotypes sont exemptés du critère 1.4.3, mais pas le texte indicatif des champs (placeholder) : il doit atteindre 4,5:1 comme tout autre texte. Les icônes et bordures de champ nécessaires pour identifier un contrôle relèvent de la règle de 3:1 pour le contraste des éléments non textuels.
Puis-je tester un texte sur un dégradé, une photo ou une couleur semi-transparente ? ▼
Cet outil compare deux couleurs unies. Pour une couleur semi-transparente, mélangez-la d'abord avec le vrai fond et saisissez le résultat. Pour les dégradés et les photos, testez la couleur du texte contre la zone la plus claire et la plus sombre derrière lui, puis retenez le pire résultat.
Dois-je viser AA ou AAA ? ▼
AA est le niveau que visent la plupart des exigences qui se réfèrent à WCAG ; c'est donc le minimum pratique. AAA est un objectif plus strict, non attendu pour chaque élément d'un site, mais raisonnable pour les longs textes courants.
Cet outil utilise-t-il APCA ou le modèle de contraste de WCAG 3 ? ▼
Non. APCA est un modèle candidat pour WCAG 3, qui reste un brouillon. Ce vérificateur utilise le rapport WCAG 2.x, la formule sur laquelle reposent aujourd’hui les audits et les réglementations.