Qu'est-ce que le gros texte?

18pt+ (24px) poids régulier, ou 14pt+ (18.66px) gras. La plupart des éléments h1/h2 sont admissibles.

Qu'en est-il des éléments non textuels de l'interface utilisateur?

WCAG 2.1 exige un contraste de 3:1 pour les composantes de l'assurance-chômage (bordures des boutons, contours des champs de formulaire) et des icônes significatives. L'insigne AA Large est approximatif.

Vérification du contraste des couleurs (WCAG)

Choisissez une couleur de premier plan et de fond et voyez instantanément le rapport de contraste WCAG 2.1 avec des badges passe/échec pour AA et AAA, texte normal et grand. Comprend un aperçu en direct.

Foreground (text)

Background

Contrast ratio

21.0:1

AA Normal

—

≥ 4.5:1

AA Large

—

≥ 3:1

AAA Normal

—

≥ 7:1

AAA Large

—

≥ 4.5:1

Normal body text — The quick brown fox jumps over the lazy dog.

Large heading — Sample preview

Large text = 18pt+ or 14pt+ bold. WCAG 2.1 thresholds.

Was this tool helpful?

Send output to:

How to use Color Contrast Checker

Choisissez les couleurs de premier plan et de fond.
Lisez le rapport de contraste et les badges passe/échec.
Utilisez Swap ou Invert FG pour tester des substituts.

Quel est {nom} ?

WCAG 2.1 définit les minimums de contraste pour le texte lisible: 4.5:1 pour le texte normal (AA), 3:1 pour le texte volumineux (AA), 7:1 pour le texte normal (AAA), 4.5:1 pour le texte volumineux (AAA). Le grand texte est défini comme 18pt+ ou 14pt+ en gras. Cet outil calcule le rapport en utilisant la formule de luminance relative de la spécification WCAG.

FAQ

Qu'est-ce que le gros texte?: 18pt+ (24px) poids régulier, ou 14pt+ (18.66px) gras. La plupart des éléments h1/h2 sont admissibles.
Qu'en est-il des éléments non textuels de l'interface utilisateur?: WCAG 2.1 exige un contraste de 3:1 pour les composantes de l'assurance-chômage (bordures des boutons, contours des champs de formulaire) et des icônes significatives. L'insigne AA Large est approximatif.

Related tools

Author

Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 Color Contrast Checker on Wikipedia·Developer Tools on Wikipedia·Color Contrast Checker on Britannica

People also use

← Back to Developer Tools · All tags

Vérification du contraste des couleurs (WCAG)

Something went wrong

How to use Color Contrast Checker

Quel est {nom} ?

FAQ

Related tools

Author

People also use

Ad blocker detected

Keyboard shortcuts