👁️ Contrast Checker
Check WCAG text contrast ratios for accessibility. Useful for designers making sure text is readable for everyone. Free, unlimited, private — works entirely in your browser.
How to use
- Enter your text (foreground) color — pick from the palette, use the eyedropper, or type a HEX/RGB value.
- Enter your background color the same way.
- Read the instant contrast ratio (e.g. 7.2:1) plus the WCAG pass/fail badges for AA and AAA levels.
- Adjust either color until you pass — the tool suggests the nearest passing shade with one click.
FAQ
Is it really free?
Yes — every tool on this site is 100% free with no limits, no signup and no watermarks.
Is my data private?
Absolutely. All processing happens locally in your browser. Your files are never uploaded to any server.
What is a contrast ratio?
It measures the luminance difference between text and background, from 1:1 (identical, invisible) to 21:1 (pure black on pure white, maximum). The ratio is calculated with a standard WCAG formula based on relative luminance — higher means more readable.
What do WCAG AA and AAA mean?
WCAG (Web Content Accessibility Guidelines) sets the bar: AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold) — the legal standard in most countries. AAA is stricter: 7:1 for normal text, 4.5:1 for large. Aim for AA minimum; AAA where you can.
Does large text really get an easier target?
Yes. Large text (at least 18pt, or 14pt bold) only needs 3:1 for AA because thicker strokes stay legible at lower contrast. But 'large' in WCAG terms is bigger than most body text — when in doubt, test against the normal-text 4.5:1 bar.
My brand colors fail — what should I do?
You rarely need to abandon brand colors: darken the text shade or lighten the background tint until it passes — the tool's suggestion feature finds the closest passing color. Reserve low-contrast brand pairings for large headlines or decorative elements, never body copy.
📘 Complete Guide to Color Contrast & Readability
Contrast is the single most impactful accessibility fix on the web — and the most commonly failed. Light-grey text on white backgrounds looks "clean" to designers and is unreadable to millions of visitors, including anyone over 40, anyone in bright sunlight, and the roughly 5% of people with low vision. This guide explains the standard, the math, and how to fix failures without wrecking your design.
The WCAG standard in plain English
WCAG 2.x defines two conformance levels for contrast. Level AA (the one laws reference — including the EU Accessibility Act and ADA case law in the US) demands a 4.5:1 ratio for normal text and 3:1 for large text. Level AAA (the gold standard) demands 7:1 and 4.5:1 respectively. Logos and purely decorative text are exempt — but if it conveys information, it must pass. Note: WCAG 3.0 (in draft) will eventually replace ratios with a new APCA model, but ratios remain the enforceable standard today.
Why contrast fails so often
Three culprits: fashion (ultra-light greys trend in portfolios), brand colors used at full strength for text (a vivid brand orange that pops as a button fails as 12px text), and text over images where the background varies — a photo's bright patch can silently destroy legibility. The fix for images: a semi-transparent dark overlay or a solid scrim behind the text, then re-test the worst-case area.
Beyond the ratio: real-world readability
The ratio is necessary but not sufficient. Thin font weights (100–300) need more contrast than the formula assumes — prefer 400+ for body text. Very small text (under 12px) strains even at passing ratios. Glossy screens, sunlight, and cheap monitors all effectively lower contrast, so treat 4.5:1 as a floor, not a target — 7:1 body text is noticeably more comfortable for everyone, not just those with impairments.
Fixing failures gracefully
Do not redesign from scratch. Nudge: darken text by 10–20% lightness or add opacity to background tints — usually enough to cross the threshold while staying on-brand. For links, remember that color alone cannot distinguish them (use underlines too). For disabled buttons and placeholders, low contrast is expected — but ensure the reason is communicated another way. Test your final palette in greyscale: if the hierarchy still reads, your contrast is doing its job.
Who this helps (hint: everyone)
Accessibility improvements help far beyond the nominal beneficiaries: captions help in noisy cafés, high contrast helps in sunlight, clear focus states help power keyboard users. Roughly 15% of the global population lives with some disability — designing for contrast is designing for a sixth of your audience, plus everyone having a bad-screen day.
📖 Step-by-step tutorial: How to Check Text Contrast for Accessibility Online for Free (2026 Guide)