Vérificateur de contraste
Vérifiez le contraste entre le texte et l'arrière-plan selon WCAG AA et AAA, et ajustez automatiquement une couleur jusqu'à ce qu'elle soit conforme.
Contrast ratio
14.68:1
Relative luminance: #1f2937 = 0.0215 · #ffffff = 1.0000
Preview
Normal text: the quick brown fox jumps over the lazy dog.
Large text sample
| Level | Required ratio | Result |
|---|---|---|
| AA · normal text | 4.5:1 | Pass |
| AA · large text | 3:1 | Pass |
| AAA · normal text | 7:1 | Pass |
| AAA · large text | 4.5:1 | Pass |
Comment utiliser
- Choose a text (foreground) color and a background color. The swap button exchanges them.
- The contrast ratio and the WCAG AA / AAA results for normal and large text update immediately.
- Check the live preview to see how the pair actually looks.
- If the pair fails AA, use Adjust text color to pass AA: it keeps the hue and saturation and moves only the lightness to the nearest passing color.
Remarques
The ratio follows the WCAG 2.x relative-luminance definition: (lighter luminance + 0.05) / (darker luminance + 0.05). AA requires 4.5:1 for normal text and 3:1 for large text (at least 18pt, or 14pt bold); AAA requires 7:1 and 4.5:1 respectively. All calculations run locally in your browser.
Questions fréquentes
- Why can the automatic adjustment change the color a lot?
- The adjustment only moves lightness, so a pair with a small luminance gap may need a big lightening (or darkening) step to pass. Treat it as a starting point when you want to keep the same hue.
- What counts as large text?
- WCAG counts text as large at 18pt (about 24px) or larger, or 14pt (about 18.66px) or larger when bold.