Check text and background contrast
Test foreground and background hex colors against WCAG AA and AAA targets. Instant ratio readout for accessible UI text—runs locally in your browser Free.
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.