Aller au contenu

Vérificateur de contraste des couleurs

Réponse courte

Vérifiez les ratios de contraste couleur texte-fond par rapport aux standards WCAG AA/AAA.

Ce qu’il ne fait pas: Il ne vérifie que les deux couleurs que vous saisissez ; il n’analyse aucune page, et le texte sur des images ou des dégradés demande une vérification manuelle.

Gratuit · Sans inscription · Fonctionne dans votre navigateur
4,54Ratio de contraste

Contraste limite — vérifiez l'usage en grand texte.

Portez ce vieux whisky au juge blond

Portez ce vieux whisky au juge blond

AA · texte normalRéussi
AA · grand texteRéussi
AAA · texte normalÉchoué
AAA · grand texteRéussi

Comment améliorer

Le niveau AA WCAG exige un ratio de contraste d'au moins 4.5:1 pour le texte normal et 3:1 pour le grand texte (18pt, ou 14pt en gras). Visez 7:1 (AAA) lorsque possible — cela garantit la lisibilité pour les utilisateurs malvoyants et en plein soleil.

Ce que ça fait

Calcule le ratio de contraste WCAG entre n'importe quelle couleur de premier plan et d'arrière-plan que vous saisissez, en utilisant la même formule de luminance relative que la spécification WCAG, et le compare aux seuils AA et AAA pour le texte normal et le texte large (4,5:1 / 3:1 pour AA, 7:1 / 4,5:1 pour AAA). Affiche un aperçu de texte en direct dans vos couleurs, accompagné d'un badge réussite/échec pour chaque seuil.

Pourquoi c'est important

Le texte à faible contraste est l'échec d'accessibilité détecté automatiquement le plus courant sur les pages d'accueil dans le rapport annuel Million de WebAIM, et c'est l'un des plus faciles à corriger avec un changement de couleur. Le critère de succès WCAG 2.1 1.4.3 fixe les ratios minimums, et la norme EN 301 549 — le standard derrière l'Acte européen sur l'accessibilité — les applique au contenu web.

Comment ça fonctionne

  1. Saisissez ou choisissez une couleur de premier plan (texte) et une couleur d'arrière-plan

  2. Nous calculons le ratio de contraste de luminance relative WCAG entre les deux couleurs

  3. Comparez le ratio aux seuils AA et AAA pour le texte normal et le texte large

  4. Consultez un aperçu en direct de votre texte sur votre arrière-plan, accompagné d'un badge réussite ou échec pour chaque seuil

Exemple d'entrée et de sortie

ENTRÉE
foreground: #767676
background: #ffffff
SORTIE
ratio de contraste : 4.54:1

texte normal AA (4,5:1)     PASS
texte large AA (3:1)        PASS
texte normal AAA (7:1)      FAIL
texte large AAA (4,5:1)     PASS

Comment lire le résultat

Rapport de contraste (4,54:1 dans l'exemple)
Combien la couleur la plus claire est plus lumineuse que la plus foncée, de 1:1 (même couleur) à 21:1 (noir sur blanc). Il utilise la formule de luminance relative définie dans le WCAG 2.1 : le résultat concorde avec tout outil qui suit la norme.
AA texte normal (4,5:1)
Le niveau auquel renvoie l'Acte européen sur l'accessibilité via l'EN 301 549 : le texte courant demande au moins 4,5:1. #767676 sur blanc passe à 4,54:1, ce qui en fait le gris pur le plus clair qui passe sur blanc — #777777 échoue déjà.
AA grand texte (3:1)
Le grand texte — au moins 18 pt (24 px), ou 14 pt (environ 18,7 px) en gras — demande 3:1. Les composants d'interface et les graphiques porteurs de sens, comme les bordures de champs et les icônes, demandent aussi 3:1 face à leur environnement (WCAG 1.4.11).
AAA (7:1 et 4,5:1)
Le niveau renforcé. Ni l'EAA ni l'EN 301 549 ne l'exigent, mais il aide les personnes malvoyantes et toute personne lisant un écran en plein soleil. L'exemple passe l'AAA pour le grand texte et l'échoue pour le texte normal.
Aperçu et couleur du rapport
Votre texte dans vos deux couleurs, en deux tailles, pour juger la paire à l'œil et pas seulement au chiffre. Le rapport s'affiche en vert à partir de 7:1, en orange à partir de 4,5:1 — un succès AA — et en rouge en dessous.

Qui l'utilise

  • Designer

    Validez la palette de couleurs de la marque selon WCAG avant de la figer. De nombreux pastels « modernes » échouent au ratio 4,5:1 sur fond blanc — mieux vaut le découvrir avant de l'appliquer à toute la marque.

  • Auditeur en accessibilité

    Vérifiez chaque paire de couleurs texte/arrière-plan selon les seuils AA et AAA avant de valider la déclaration d'accessibilité AEA d'un client.

  • Développeur front-end

    Repérez les régressions de contraste introduites par des changements de thème via variables CSS avant qu'elles n'atteignent la production.

Problèmes fréquents et comment les corriger

  1. Texte gris clair sur blanc

    Les placeholders, légendes et textes de pied de page gris sont l'échec habituel. Utilisez #767676 ou plus foncé sur blanc pour le texte normal ; sur un fond coloré, modifiez la luminosité d'une des couleurs et vérifiez à nouveau.

    :root {
  --text: #1f2937;       /* 14.7:1 on #ffffff */
  --text-muted: #595959; /*  7.0:1 on #ffffff */
}

  2. La couleur de marque est trop claire pour du texte

    Gardez la couleur de marque pour les grands titres, les icônes et les fonds, et utilisez une nuance plus foncée pour le petit texte et les liens. Une nuance plus foncée reste reconnaissable comme la marque.

  3. Texte blanc sur un bouton coloré

    Vérifiez la couleur du bouton face au blanc, pas seulement face à la page. Si elle échoue, foncez le bouton ou mettez-y un texte foncé, et vérifiez de la même façon les couleurs de survol et de focus.

  4. Texte sur des images ou des dégradés

    Il n'y a pas une seule couleur de fond à mesurer. Vérifiez la partie la plus claire derrière le texte, ou placez derrière lui un calque plein ou semi-transparent pour que le rapport tienne partout.

  5. Liens qui ne se distinguent du texte que par la couleur

    Si les liens dans le texte ne se repèrent qu'à leur couleur, celle-ci doit aussi atteindre 3:1 face au texte qui l'entoure (technique G183 du W3C), avec un autre indice au survol et au focus. Un soulignement est la solution la plus simple.

Questions fréquentes

De quel ratio WCAG ai-je besoin ?
4,5:1 pour le texte normal, 3:1 pour le texte large (≥18pt ou ≥14pt gras) et les composants d'interface. Le niveau WCAG 2.1 AAA exige 7:1 — une barre plus haute que ne visent la plupart des marques.
Cela vérifie-t-il les images et les icônes ?
Uniquement le contraste du texte, et uniquement pour les deux couleurs que vous saisissez ici. Le contraste des images (par exemple des bannières avec texte sur image) nécessite une revue manuelle — il n'y a pas d'analyse automatique de page.
Quel contraste l'EAA exige-t-elle ?
Pour le contenu web, la norme EN 301 549 v3.2.1 applique le niveau AA de WCAG 2.1, y compris le critère 1.4.3 — le texte a donc besoin d'au moins 4,5:1 par rapport à son arrière-plan (3:1 pour le texte large). Vérifiez chaque paire de couleurs utilisée sur votre site.

Sources

La documentation sur laquelle reposent cet outil et les explications de cette page.

Outils gratuits sur ce sujet

Guides sur ce sujet

Données d’étude sur ce sujet

Outils connexes dans Conformité EAA

Voir tous les outils Conformité EAA