WCAG Contrast Ratio Checker
Check whether a foreground and background color combination meets WCAG contrast requirements for readable text.
Normal text preview
The quick brown fox jumps over the lazy dog.
Large text preview
This preview updates with your selected colors.
Contrast ratio
17.74:1
Contrast calculated between the selected colors.
WCAG conformance
Large text generally means at least 18 pt (24 CSS px), or 14 pt (about 18.67 CSS px) when bold.
| Requirement | Minimum 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 |
How the contrast ratio works
WCAG compares the relative luminance of the lighter and darker colors. The ratio ranges from 1:1 (no contrast) to 21:1 (maximum contrast, such as black and white). This checker evaluates text contrast only; it does not assess every accessibility requirement or automatically certify a page as WCAG compliant.