Working hours Mon–Fri: 10:00 – 18:00

Color Contrast Checker

Check WCAG 2.1 contrast ratio for any foreground+background color pair. Verdict for normal text AA/AAA and large text AA.

WCAG 2.1 sets minimum contrast ratios for accessible text: 4.5:1 for normal text AA, 7:1 for normal text AAA, 3:1 for large text. This tool computes the exact ratio for any color pair and shows pass/fail verdicts. Pure client-side — pick colors, see results instantly.

Large text preview
Subheading preview
Body text preview — lorem ipsum dolor sit amet, consectetur adipiscing elit. The quick brown fox jumps over the lazy dog.

WCAG contrast analysis

Ratio
21:1
Normal AA
≥ 4.5:1
Normal AAA
≥ 7:1
Large AA
≥ 3:1
How it works
1
Pick foreground color
2
Pick background color
3
Read the contrast ratio
4
Check pass/fail badges
-
What contrast ratio do I really need?

For B2B SaaS marketing sites, target Normal AA (4.5:1) on body text minimum — this is what most accessibility audits require and what Google considers basic compliance. Aim for AAA (7:1) on the most important interface text (CTAs, primary nav) since that's harder for low-vision users. Large display text (24px+ regular, 19px+ bold) can pass at 3:1 but usually looks washed out and is worth pushing higher anyway.

+
Why does my dark grey on white fail AA?

Common pattern: designers pick #999 or #aaa thinking it's 'mid grey,' but on white those colors compute to ~2.8:1 — well below AA. Body text grey usually needs to be at least #595959 (5.0:1) on white. Use this tool to verify before shipping.

+
How does WCAG define 'large text'?

WCAG 2.1 defines large text as 18 point (24 CSS pixels) or larger for regular weight, or 14 point (18.66 CSS pixels) or larger for bold weight. At those sizes, the lower AA threshold (3:1) applies. Below those sizes, 4.5:1 applies.

+
Is dark mode harder to make accessible?

Often. White or near-white text on near-black backgrounds gives plenty of contrast (>15:1), but secondary text colors are tricky. Avoid pure white #fff on pure black #000 (causes optical fatigue) — instead use #f4f4f5 on #18181b (still 15:1). For greys on dark backgrounds, lean lighter — #a1a1aa on #18181b gives ~7.4:1 (AAA).

Related free design tools
All Design Tools
Learn more →
Color Palette Generator
Learn more →
CSS Gradient Generator
Learn more →
Font Pairing Tool
Learn more →
Favicon Generator
Learn more →
Want this done for you?
B2B UI/UX Design • deployed 260605-cc
Book Free Consultation
By submitting you agree to our Privacy Policy
Free UX review

Get a free UX review

Our senior designers review your site's UX, visual hierarchy, accessibility, and conversion flow — and send you a prioritised list of quick wins.

No spam. We reply within one business day.