Vérificateur de contraste

Contrôlez le rapport de contraste entre deux couleurs selon les critères WCAG.

Gratuit, sans inscriptionTraitement dans votre navigateur

Réglez deux couleurs et lisez le résultat sur du vrai texte : le ratio et les niveaux WCAG se recalculent en direct. Un ratio conforme est un plancher, pas une preuve de confort.

Vérificateur de contraste9.93 : 1

#781023 sur #f0f3f5

Titre de section

Un texte courant se lit sur plusieurs lignes, à taille normale. C’est ce cas qui exige le ratio le plus élevé, parce que les traits fins des lettres sont les premiers à disparaître quand le contraste faiblit.

Mention légale, note de bas de page, aide contextuelle.

Ratio de contraste, formule WCAG 2.x

9.93 : 1

De 1 pour 1 (deux couleurs identiques) à 21 pour 1 (noir sur blanc). Le seuil AA du texte courant est de 4.5 pour 1.

Texte courant, AA

AAA

Texte courant, AAA

Atteint

Grand texte, AA

AAA

Grand texte, AAA

Atteint

Bon signal :Contraste confortable, niveau AAA atteintLe ratio de 9.93 pour 1 dépasse le seuil AAA. Rappel : la formule ignore la graisse et la police réelles, un texte très fin peut rester pénible malgré un bon ratio.

Couleur à régler

Saturation 87 pour cent, luminosité 47 pour cent, couleur #781023. Flèches pour ajuster, Maj et flèches pour un pas de dix.

Teinte

Valeurs

Texte

rgb(120, 16, 35) · hsl(349, 76%, 27%)

Fond

rgb(240, 243, 245) · hsl(204, 20%, 95%)

Ce que le ratio ne dit pas

La formule WCAG 2.x ne connaît que deux couleurs opaques. Elle ignore la graisse réelle du texte, la police choisie, le lissage de l’écran et toute transparence. Un texte fin en 12 pixels peut atteindre AA et rester pénible à lire.

Les seuils : 4.5 : 1 pour le texte courant en AA, 3 : 1 pour le grand texte (18 points, ou 14 en gras). AAA porte ces seuils à 7 et 4.5.

Le calcul suit la formule officielle du WCAG 2.x : linéarisation sRGB, luminance relative, puis rapport entre la plus claire et la plus sombre.

Construire une palette

À quoi servent ces chiffres ?

Luminance relativeLuminosité perçue d’une couleur, calculée canal par canal selon la formule officielle du WCAG.
Ratio de contrasteRapport entre la luminance la plus claire et la plus sombre des deux couleurs comparées.
Seuils texte normalNiveaux WCAG 2.x retenus pour un texte de taille courante.
Seuils grand texteNiveaux WCAG 2.x retenus pour un texte d’au moins 18 points, ou 14 en gras.

Voir les formules

Outils associés

Tous les outils gratuits

Bon à savoir

Les résultats se recalculent à chaque frappe. Vous pouvez charger un exemple pour comprendre le fonctionnement, puis remplacer les valeurs par les vôtres.

Formules et hypothèses

Rien n’est caché : voici les calculs.

Chaque indicateur affiché plus haut correspond exactement à l’une de ces formules. Tous les montants sont exprimés hors taxes.

Luminance relative

Luminosité perçue d’une couleur, calculée canal par canal selon la formule officielle du WCAG.

L = 0,2126 R + 0,7152 G+ 0,0722 B (canaux linéarisés)

Ratio de contraste

Rapport entre la luminance la plus claire et la plus sombre des deux couleurs comparées.

(L claire + 0,05)÷ (L sombre + 0,05)

Seuils texte normal

Niveaux WCAG 2.x retenus pour un texte de taille courante.

AA ≥ 4,5 : 1,AAA ≥ 7 : 1

Seuils grand texte

Niveaux WCAG 2.x retenus pour un texte d’au moins 18 points, ou 14 en gras.

AA ≥ 3 : 1,AAA ≥ 4,5 : 1

Ce que mesure réellement le contraste WCAG

Le ratio de contraste n’est pas une impression visuelle mais un calcul précis : chaque couleur est convertie en luminance relative, sa clarté perçue sur une échelle du noir au blanc, puis les deux luminances sont comparées selon une formule officielle du W3C. Le résultat va de 1:1, pour deux couleurs identiques, à 21:1, pour un noir et un blanc purs, l’écart maximal possible.

Cette méthode est strictement symétrique : elle produit le même ratio que la couleur claire serve de texte ou de fond, seule compte la paire de couleurs comparée, jamais l’ordre dans lequel elle est saisie.

AA ou AAA : quel niveau viser

Le niveau AA, avec un seuil de 4,5:1 pour du texte normal, est le niveau couramment retenu comme référence pratique d’accessibilité pour la majorité des contenus web. Le niveau AAA, plus strict à 7:1, apporte un confort de lecture supplémentaire particulièrement utile pour un public ayant une vue réduite, mais reste plus contraignant à tenir sur une palette de marque existante.

Le grand texte, à partir de 18 points ou 14 points en gras, bénéficie de seuils plus souples dans les deux niveaux : des caractères plus grands restent lisibles avec un contraste plus faible que du texte courant.

Une suggestion de couleur, pas une couleur imposée

Quand le contraste échoue, l’outil propose une variante de votre couleur de texte qui atteint le seuil visé, en conservant sa teinte et sa saturation d’origine et en ajustant uniquement sa luminosité. C’est un point de départ concret pour ajuster une palette, pas un remplacement automatique : la couleur suggérée mérite toujours d’être confrontée à votre identité visuelle avant adoption définitive.

Questions fréquentes

Ce que l’on nous demande le plus souvent.

Le niveau AA est la référence la plus couramment citée par les cadres d’accessibilité, mais les exigences précises varient selon votre pays, votre secteur et le référentiel applicable. Cet outil mesure un critère technique parmi d’autres ; il ne constitue pas à lui seul une preuve de conformité légale complète.

Le calcul compare la luminance la plus claire à la plus sombre des deux couleurs, sans tenir compte de laquelle sert de texte ou de fond. Le ratio est donc mathématiquement symétrique : inverser les deux champs ne change jamais le résultat affiché.

Non. L’analyse des couleurs saisies, le calcul du ratio et la recherche d’une suggestion se font entièrement dans votre navigateur. Rien n’est transmis à Web-Shine ni conservé après votre visite.

Le calcul est purement mathématique et ne fait aucune exception pour une couleur de marque : si le ratio mesuré est réellement sous le seuil visé, il l’indique, quelle que soit l’intention derrière le choix initial de cette couleur.

L’outil part de votre couleur de texte et teste des variantes de plus en plus claires ou sombres, en gardant sa teinte et sa saturation intactes, jusqu’à trouver la première qui atteint le ratio visé sur votre couleur de fond. C’est un ajustement ciblé, pas une couleur choisie au hasard.

Outils associés