Will anyone actuallyread that?
Low-contrast text is the most common way a beautiful design quietly loses readers — and fails accessibility law. Drop in your text and background colors and get the exact WCAG contrast ratio, a live pass/fail for every level, and a real preview so you can see what your visitor sees before you ship it.
Your colors
Live preview
Large heading text
Normal body copy: the paragraph a real visitor reads on a phone in daylight. If this is hard to read here, it's failing them on your live page too.
Button labelThe read
4.48:1
Contrast ratio (max 21:1)
Level by level
Fail · AA · normal text (4.5:1)
Body copy under 18pt (or under 14pt bold). The legal floor for most of the web.
Pass · AA · large text (3:1)
Text 18pt+ or 14pt+ bold. Headlines and big callouts get a lower bar.
Fail · AAA · normal text (7:1)
The enhanced standard for body copy. Aim here for long-form reading.
Fail · AAA · large text (4.5:1)
Enhanced standard for large text. Worth hitting on hero headlines.
Pass · UI & graphics (3:1)
Buttons, icons, form borders, chart elements — anything you must see to use.
Your move
A readable page is step one. I make the whole thing convert.
Your #777777 on #ffffff scores 4.48:1 — Large text only — fails AA body.
Contrast is the cheapest fix on your site — and usually a symptom of a design that was never pressure-tested against real readers. Send me the page. In 30 minutes I'll show you, free, where it's losing people: the colors, the copy, the offer, and the order I'd fix them in.
Plain English
Contrast is the difference between read and ignored.
Contrast ratio measures how far apart two colors are in perceived lightness, on a scale from 1:1 (identical, invisible) to 21:1 (pure black on pure white). The number isn't a guess — it comes straight from the WCAG relative-luminance formula, the same math screen readers, browsers, and accessibility auditors use.
It matters for two reasons that compound. First, it's the law: WCAG 2.2 is the standard behind the ADA, the European Accessibility Act, and most procurement requirements, and 'contrast minimum' is the single most-failed criterion on the web. Second, it's conversion: faint gray-on-white body copy, washed-out CTA buttons, and unreadable form labels lose every visitor squinting at a phone in daylight — not just the ones using assistive tech.
This checker computes the exact ratio and shows you, level by level, where you pass and where you fall short. The live preview renders your actual colors as sample text so the verdict isn't abstract: you see the readability, then you fix it before it costs you a reader.
The formula
Contrast = (L_lighter + 0.05) ÷ (L_darker + 0.05)
L is each color's relative luminance (0 = black, 1 = white). Pure black (#000) on white (#fff) gives (1.0 + 0.05) ÷ (0.0 + 0.05) = 21:1 — the maximum. A trendy #777 gray on white only reaches 4.48:1, which just misses the 4.5:1 AA floor for body text. One shade darker passes; that's how thin the margin usually is.
The thresholds you're graded against
WCAG sets a hard floor by level and text size — there's no opinion in it, just the ratio your colors must clear. AA is the standard nearly everyone is legally held to; AAA is the enhanced bar worth reaching for on body copy. Large text (18pt+, or 14pt+ bold) gets a lower threshold because size already aids legibility. Here's every line you can pass or fail:
| Level | Required ratio |
|---|---|
| AA · normal text | 4.5:1 |
| AA · large text | 3:1 |
| AAA · normal text | 7:1 |
| AAA · large text | 4.5:1 |
| UI & graphics | 3:1 |
Source: W3C WCAG 2.2 contrast minimum · 2024
Your colors fell short. Here's the fix.
Body text fails AA (under 4.5:1).
This is the one that gets you sued and skimmed past. Darken the text or lighten the background until you clear 4.5:1 — usually one or two shades is all it takes.
Gray-on-white that 'looks fine'.
Designer grays like #999 and #aaa almost never pass for body copy. If you want a softer look, increase the font weight or size to qualify for the 3:1 large-text bar instead.
Buttons or icons under 3:1.
UI components have their own 3:1 rule. A pale CTA against a pale section is invisible to a lot of people — and it's the element you most need them to click.
Passes AA, misses AAA.
You're legal but not optimal. For long-form reading, push toward 7:1. It reduces eye strain and lifts time-on-page for everyone, not just low-vision users.
Light text on a photo or gradient.
A single ratio can't cover a varying background. Add a solid scrim or text shadow and check against the lightest point the text crosses.
How to fix contrast without wrecking the design
01Adjust lightness, not hue
Keep your brand color; change how light or dark it is. Most failures are fixed by nudging the L value, not by picking a different color.
02Reserve faint grays for large text
A soft gray that fails for body copy often passes the 3:1 large-text bar. Use it on headings, not paragraphs.
03Add weight before you add darkness
Bumping 14pt text to bold moves it into the large-text category, lowering the required ratio from 4.5:1 to 3:1.
04Don't rely on color alone
Pair color with an icon, underline, or label. WCAG requires meaning to survive when color is removed or unseen.
05Use a scrim over imagery
Text on photos needs a semi-opaque overlay or shadow so the ratio holds against the brightest pixels behind the words.
06Check both light and dark mode
A palette that passes on white can fail on your dark theme. Run every text/background pair you actually ship in each mode.
The vocabulary
- Contrast ratio
- How far apart two colors are in luminance, from 1:1 (identical) to 21:1 (black on white). The number this tool returns.
- Relative luminance
- The perceived brightness of a color on a 0–1 scale, weighted for how the human eye sees red, green, and blue.
- WCAG AA
- The standard compliance level: 4.5:1 for normal text, 3:1 for large text. The bar most laws enforce.
- WCAG AAA
- The enhanced level: 7:1 for normal text, 4.5:1 for large text. Best-practice for readability.
- Large text
- Text at 18pt and up, or 14pt and up if bold. It qualifies for a lower contrast threshold.
Contrast questions, straight answers
4.5:1 for normal body text and 3:1 for large text (18pt+, or 14pt+ bold) to meet WCAG AA — the level most accessibility laws require. To hit the enhanced AAA standard, you need 7:1 for normal text and 4.5:1 for large. UI components and graphics need 3:1. This tool shows your ratio against every one of those lines at once.
Keep going
A calculator tells you what. A call tells you what to do about it.
Send me the account behind these numbers. I'll tell you straight where the money's leaking and what I'd fix first — free, and you keep it whether you hire me or not.