Color Contrast Checker
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.
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.
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.
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.
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).
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.