Test any text and background pair against WCAG 2.2 AA and AAA. If it fails, get the closest colors that pass.
Enter a hex code like #1A2B3C, or a CSS color name.
Enter a hex code like #1A2B3C, or a CSS color name.
4.54 : 1
Passes AA
Meets the legal baseline for normal text.
Live preview
Make every page work for everyone.
Body text at 16 pixels, the size most of your content uses. If you can read this comfortably, the pair is a good start. The numbers below decide whether it is a pass.
Under 24 px, or under 18.66 px bold
24 px and up, or 18.66 px bold
Borders, icons, focus rings, chart lines
Same hue, smallest change. Select one to apply it.
This pair already passes AAA for normal text. No change needed.
Test any text and background pair against WCAG 2.2 AA and AAA. If it fails, get the closest colors that pass.
| Content | AALegal baseline | AAAEnhanced | WCAG 2.2 criterion |
|---|---|---|---|
| Normal textBody copy, labels, links | 4.5:1 | 7:1 | 1.4.3 Contrast (Minimum)1.4.6 Contrast (Enhanced) |
| Large text24 px, or 18.66 px bold | 3:1 | 4.5:1 | 1.4.3 Contrast (Minimum)1.4.6 Contrast (Enhanced) |
| UI components and graphicsInput borders, icons, focus rings, chart lines | 3:1 | Not defined | 1.4.11 Non-text Contrast |
The European Accessibility Act, ADA case law and Türkiye's digital accessibility circular all point to WCAG 2.x Level AA. AAA is a stretch goal for specific content.
Form field borders, icons and focus indicators need 3:1 against what sits next to them. Many sites that pass on text still fail here.
A ratio of 4.499 does not meet 4.5. This tool never rounds up before deciding pass or fail.
Short answers about contrast ratios, WCAG levels and what this checker covers.