Check whether your text and background colors meet WCAG AA and AAA contrast requirements.
| WCAG test | Needs | Result |
|---|---|---|
| AA, normal text | 4.5 : 1 | |
| AA, large text | 3 : 1 | |
| AAA, normal text | 7 : 1 | |
| AAA, large text | 4.5 : 1 | |
| UI components and graphics | 3 : 1 |
Contrast ratio compares the brightness of two colors, from 1 : 1 (identical) to 21 : 1 (black on white). The Web Content Accessibility Guidelines (WCAG) set minimum ratios so text stays readable for people with low vision or color-vision differences, and for anyone reading in bright light.
| Level | Normal text | Large text |
|---|---|---|
| AA (the usual target) | 4.5 : 1 | 3 : 1 |
| AAA (enhanced) | 7 : 1 | 4.5 : 1 |
"Large text" means at least 18 pt (about 24 px), or 14 pt (about 18.7 px) when bold. Button borders, icons and chart elements need at least 3 : 1 against nearby colors.
Example: #267FD9 on white gives about 4.1 : 1, which fails AA for normal text. The darker #1B5998 gives about 7.2 : 1 and passes AAA. The tool shows the ratio rounded down to two decimals, so a result is never overstated.
Need a safe palette? Try the color palette generator and test your picks here, or read the monochromatic and complementary colors guide.
At least 4.5 : 1 for normal text and 3 : 1 for large text meets WCAG AA. 7 : 1 and 4.5 : 1 meet the stricter AAA level.
Text of at least 18 pt (about 24 px), or at least 14 pt (about 18.7 px) in bold.
It has the maximum ratio of 21 : 1, but very high contrast can feel harsh for long reading. Dark grey on white still scores very high.
Yes. WCAG asks for at least 3 : 1 for interface components and meaningful graphics against adjacent colors.
No. The calculation happens in your browser.