Free tool
Contrast Checker
Check WCAG color contrast — and fix it in one click.
Large text looks like this.
Body text at 16px — the size most of your interface and paragraphs actually render at, where contrast matters most.
And the 12px fine print: captions, labels, timestamps and legal text that quietly disappear when contrast is low.
#7c8aa0 on #0f172a
Contrast ratio
5.10 : 1
WCAG AA
Normal text · minimum 4.5 : 1
WCAG AA Large
Text ≥ 24px (or 18.7px bold) · minimum 3 : 1
WCAG AAA
Enhanced contrast · minimum 7 : 1
What WCAG contrast ratios actually mean
A contrast ratio compares the relative luminance — the perceived brightness — of your text color against its background, on a scale from 1 : 1 (identical colors) to 21 : 1 (pure black on pure white). It's not about how different two hues look to you on a bright monitor; it's a measured brightness gap that predicts whether text stays readable on a dim phone screen, in sunlight, or for someone with low vision or color blindness.
Why 4.5 : 1 is the magic number
The Web Content Accessibility Guidelines (WCAG) set 4.5 : 1 as the AA minimum for normal-size text because it compensates for the contrast sensitivity lost with moderately low vision (roughly 20/40, common from one's sixties onward). Large text — 24px regular or about 18.7px bold — has thicker strokes and is easier to resolve, so it only needs 3 : 1. That's why this checker reports three results: the same color pair can pass for a heading and still fail for body copy.
Who needs AA, and who needs AAA
AA is the practical baseline: it's the level referenced by most accessibility regulations (Section 508, the European Accessibility Act, most ADA settlements) and the target for virtually every commercial website and app. AAA's stricter 7 : 1 is worth aiming for in long-form reading experiences, government and healthcare services, or any product whose audience skews older or low-vision. If you're unsure, ship AA everywhere and AAA for your body text — your future support inbox will thank you.
Frequently asked questions
What exactly counts as "large text"?
WCAG defines large text as at least 18pt (24px) at normal weight, or at least 14pt (about 18.7px) when bold. Anything smaller is normal text and needs the full 4.5 : 1 for AA — which includes most body copy, form labels and navigation links.
Does this apply to icons, borders and buttons too?
Yes — WCAG 1.4.11 ("non-text contrast") requires meaningful UI parts like icons, input borders and focus indicators to hit at least 3 : 1 against adjacent colors. Use the AA Large badge as your guide for those: if a pair clears 3 : 1, it works for graphical elements.
My brand color fails. Do I have to abandon it?
No. Keep the original shade for logos, illustrations and large decorative areas — those aren't held to text rules. For text and small UI, use a darker or lighter version of the same hue. That's exactly what the "Fix it for me" button produces: it shifts only the lightness, so the result still reads as your brand color.
Can I share a result with my team?
Yes — both colors are stored in the page URL as you type, so copying the address (or hitting "Copy link") gives anyone the exact same pair, ratio and pass/fail results when they open it.
Part of the Hextrot studio
Ready for the full version?
A passing pair is the start of a brand, not the end: PaletteKit grows it into a full kit — neutrals, harmonies, accessible shades and exports — and OGStudio puts those colors to work on social and link-preview images that stay on-brand.
This tool is free forever. So is the account.
One free Hextrot account unlocks the free tier of all 30 products in the studio — invoices, link pages, forms, polls, status pages and more.
Create your free account