Low contrast is one of the most common accessibility failures, and one of the quickest to fix. Enter your text and background colors to see the contrast ratio and whether it passes. WCAG 2.2 AA asks for at least 4.5:1 for normal text and 3:1 for large text; AAA raises that to 7:1 and 4.5:1. If a combination falls short, you get the nearest shades that pass, so your palette changes as little as possible.
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.
WCAG measures contrast as the ratio between the lighter and darker color, from 1:1 (identical) to 21:1 (black on white).
| 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.