Vérificateur de contraste des couleurs
Vérifiez n’importe quelle combinaison de couleur de texte et d’arrière-plan selon WCAG 2.2 AA et AAA. Obtenez le rapport de contraste exact, la conformité pour le texte normal, le texte de grande taille et les composants d’interface, ainsi qu’un lien à partager. Gratuit et confidentiel : tout s’exécute dans votre navigateur.
Combinaisons prédéfinies
Aperçu en direct
Grand titre (24 px gras)
Texte courant en 16 px. Portez ce vieux whisky au juge blond qui fume. Un bon contraste garde les paragraphes lisibles pour les personnes malvoyantes, daltoniennes ou qui consultent leur téléphone en plein soleil.
Petits caractères en 14 px — les mentions en petit doivent aussi respecter le seuil du texte normal.
Comment le rapport de contraste est calculé
WCAG définit le contraste à partir de la luminance relative, c’est-à-dire la luminosité perçue d’une couleur par l’œil humain, sur une échelle de 0 (noir) à 1 (blanc). Pour chaque couleur, ContrastCheck :
- décompose la valeur hexadécimale en canaux rouge, vert et bleu, puis divise chacun par 255 ;
- linéarise chaque canal : les valeurs ≤ 0,04045 sont divisées par 12,92, les autres passent par
((c + 0.055) / 1.055)^2.4; - les pondère selon la sensibilité de l’œil à chacun :
L = 0.2126·R + 0.7152·G + 0.0722·B.
Le rapport de contraste vaut alors (L_lighter + 0.05) / (L_darker + 0.05), de 1:1 pour deux couleurs identiques à 21:1 pour du noir sur blanc. Le résultat est comparé aux seuils sans arrondi : 4,5:1 (AA) et 7:1 (AAA) pour le texte normal, 3:1 (AA) et 4,5:1 (AAA) pour le texte de grande taille, et 3:1 pour les composants d’interface et les éléments graphiques.
Vous hésitez sur le niveau à viser ? Lisez Contraste WCAG AA ou AAA : lequel choisir ?
FAQ sur le contraste des couleurs
›Qu’est-ce qu’un bon rapport de contraste des couleurs ?
Le niveau AA de WCAG 2.2 exige au moins 4,5:1 pour le texte courant et 3:1 pour le texte de grande taille. Le niveau AAA relève ces seuils à 7:1 pour le texte normal et 4,5:1 pour le grand texte. Les rapports vont de 1:1 (couleurs identiques) à 21:1 (noir sur blanc).
›Qu’est-ce qu’un texte de grande taille selon WCAG ?
Un texte de grande taille mesure au moins 18 points (environ 24 px CSS) en graisse normale, ou au moins 14 points (environ 18,66 px CSS) en gras. Ses seuils de contraste sont plus bas, car des caractères plus grands sont plus faciles à lire.
›En quoi consiste l’exigence de 3:1 pour les composants d’interface et les graphiques ?
Le critère de succès 1.4.11 de WCAG, Contraste du contenu non textuel, exige un rapport de 3:1 pour les contours visuels des contrôles interactifs (bordures de champs, indicateurs de focus, états des interrupteurs) et pour les objets graphiques nécessaires à la compréhension, comme les icônes et les courbes de graphiques.
›L’ordre entre premier plan et arrière-plan a-t-il une importance ?
Non. La formule WCAG divise toujours la luminance de la couleur la plus claire par celle de la plus foncée : inverser premier plan et arrière-plan donne donc le même rapport. L’aperçu change, mais pas les chiffres ni les résultats.
›Mes données sont-elles envoyées quelque part ?
Non. Ce vérificateur fonctionne entièrement dans votre navigateur. Vos couleurs ne sont enregistrées que dans l’URL de la page (?fg=…&bg=…), ce qui vous permet de mettre une combinaison en favori ou de la partager.
›Pourquoi 4,49:1 échoue-t-il alors que c’est si proche de 4,5:1 ?
Les seuils WCAG sont des minimums stricts, sans arrondi. ContrastCheck compare le rapport exact et tronque la valeur affichée : une combinaison affichée à 4,49:1 n’est donc pas conforme AA pour le texte normal. Utilisez la couleur suggérée pour franchir la barre.
›Ce vérificateur prend-il en charge APCA ou WCAG 3 ?
Pas encore. ContrastCheck utilise le rapport de contraste WCAG 2.x, celui auquel se réfèrent aujourd’hui les lois et normes d’achat public (recommandations ADA, Section 508, EN 301 549 / Acte européen sur l’accessibilité, RGAA).