Color contrast checker — WCAG AA/AAA
WCAG color contrast checker: test text/background hex for AA and AAA accessibility targets.
Sample text Aa
Contrast ratio: 3.15:1
AA normal text (≥4.5)Fail
AA large text (≥3)Pass
AAA normal text (≥7)Fail
Tip: darken the foreground or lighten the background to improve contrast.
Private · Fast · Free
Contrast ratio is a core accessibility metric. Higher numbers mean clearer text on the background. WCAG sets different bars for body copy vs. large bold headings.
This is a quick design check, not a full audit — focus order, screen readers, and keyboard paths matter too.
When brand colors are very light, darken text or add a backing plate instead of asking users to squint.
How to check
- Enter foreground and background hex
- Read ratio and AA/AAA hints
- Adjust colors until you hit your target
What contrast checks catch
- Reduce strain for low-vision readers.
- Fewer design review loops on illegible grays.
- Numbers settle “I think it is fine” debates.
Scenarios
- Button label vs. fill color
- Footer links in light gray
- Dark mode text on tinted panels
Tips
- Body text has stricter thresholds than large display type — still aim high.
- Icons need discernible contrast too.
- On gradients, sample the color actually behind the text.
Reference
| Input | Output | Note |
|---|---|---|
| Dark text on white | Usually passes AA | Typical body copy |
| Light gray on white | Often fails | Darken text or background |
Contrast FAQ
- AA vs. AAA?
- AAA is stricter. Many products target AA minimum; AAA when you can.
- What counts as large text?
- Roughly bigger regular size or bold at moderate size — the page applies common thresholds.
- Color-blind users?
- Contrast helps, but do not rely on color alone to convey state.