Vérificateur de contraste de couleur

Vérifiez le contraste avant/arrière-plan par rapport aux WCAG AA et AAA. Consultez la mise à jour du ratio au fur et à mesure que vous choisissez les couleurs.

Color Contrast Checker

Live

Foreground (text)

Background

17.85:1

Contrast ratio

AA normal: PassAA large: PassAAA normal: PassAAA large: Pass

Readable headline sample

Body text at normal size should stay clear against this background. Adjust colors until WCAG targets pass.

Small caption text for density checks.

CSS output

color: #0f172a;
background-color: #ffffff;
/* contrast ratio: 17.85:1 */

Key capabilities

Vérifiez le contraste avant/arrière-plan par rapport aux directives WCAG AA et AAA.
S'exécute dans votre navigateur
Utilisation gratuite

Mode d'emploi

Choisissez les couleurs du texte (premier plan) et de l’arrière-plan.
Lisez le rapport de contraste et les résultats AA/AAA.
Ajustez jusqu’à ce que vous dépassiez votre niveau cible.

How this tool works

Choisissez les couleurs du texte (premier plan) et de l’arrière-plan.
Lisez le rapport de contraste et les résultats AA/AAA.
Ajustez jusqu’à ce que vous dépassiez votre niveau cible.

Recommended settings

Utilisez d'abord les options par défaut, puis ajustez si nécessaire

Supported formats

Text / on-page input

File size and limits

Les aperçus multicouches très complexes peuvent sembler plus lents sur les téléphones plus anciens.

Privacy

Les générateurs de couleurs et CSS fonctionnent entièrement dans votre navigateur. Les aperçus et les conversions ne téléchargent jamais vos styles.

Common use cases

Utilisez Color Contrast Checker chaque fois que vous en avez besoin : vérifiez le contraste du premier plan/arrière-plan par rapport aux directives WCAG AA et AAA.

Troubleshooting

L'aperçu est différent après le collage

Vérifiez les CSS concurrents sur votre page (réinitialisations, couleurs héritées). Copiez d'abord la règle générée dans une feuille de style isolée.

FAQ

Est-ce que cela télécharge mon CSS ?

Non. Les générateurs et les convertisseurs s'exécutent dans votre navigateur avec un aperçu en direct.

Ai-je besoin d'un compte ?

Non. Ouvrez l'outil, modifiez les contrôles et copiez le CSS.