Color Contrast Checker
Updated Free mock REST & WebSocket APIs
Pick a text color and a background to see the WCAG 2.2 contrast ratio, pass/fail for every level, the APCA score — and, if it fails, the closest color that passes.
Large text, 24px
Normal body text at 16px. The quick brown fox jumps over the lazy dog — readable text needs enough contrast against its background.
Small print at 12px is the hardest to read.
Lc 73.6
Content text that isn't body copy (24px or 16px bold).
✓ These colors already meet 4.5:1.
Suggestions keep the hue and change only perceived lightness (OKLCH), picking the closest color that passes.
🔒 Runs in your browser. The URL updates as you go, so you can share this exact pair.
How to check color contrast
- Enter the text (foreground) and background colors — click a swatch for the picker, or paste HEX, rgb(), hsl() or a name.
- Read the ratio and the five pass/fail badges, and check the live preview of body text, large text, buttons and icons.
- If it fails, choose a target (AA, AAA or 3:1) and apply the suggested text or background color — it keeps your hue and changes only lightness.
- Copy the page URL to share the exact color pair.
WCAG 2.2 contrast requirements
| What | Level AA | Level AAA |
|---|---|---|
| Normal text | 4.5:1 (SC 1.4.3) | 7:1 (SC 1.4.6) |
| Large text — 24px+, or 18.66px+ bold (18pt / 14pt) | 3:1 | 4.5:1 |
| UI components and graphics — borders of inputs, icons, focus rings, chart lines | 3:1 (SC 1.4.11) | — |
| Logos, disabled controls, decoration | No requirement | |
Ratios are never rounded up: 4.49:1 fails AA. That's why this tool truncates to two decimals.
How the ratio is calculated
Each color's relative luminance is L = 0.2126 R + 0.7152 G + 0.0722 B, where each sRGB channel (0–1) is first linearised: c ≤ 0.04045 ? c ÷ 12.92 : ((c + 0.055) ÷ 1.055)2.4. The contrast ratio is (Llighter + 0.05) ÷ (Ldarker + 0.05), from 1:1 (identical) to 21:1 (black on white). Example: #767676 on white has L = 0.181, so (1.05) ÷ (0.231) = 4.54:1 — the lightest gray that passes AA on white.
What is APCA?
APCA (Accessible Perceptual Contrast Algorithm) is the candidate contrast method for WCAG 3. It reports a lightness contrast Lc from about −108 to 106 that accounts for polarity (dark-on-light vs light-on-dark) and is more accurate for dark themes. Rough guide: Lc 90 preferred for body text, 75 minimum for body text, 60 for other content text, 45 for large headings, 30 for placeholder text and icons. It's not yet a legal requirement — WCAG 2.2 ratios are what audits and the ADA, Section 508 and EN 301 549 reference today.
Related tools
Embed this tool on your site
Browse all embeddable tools →Free for blogs, HR, payroll and contractor sites: copy one snippet — the widget sizes itself and matches your colors.
Get the embed code
Frequently asked questions
Is it free and private?
Yes. It's free with no sign-up, and it runs entirely in your browser — the colors you enter are never uploaded or logged.
What contrast ratio do I need for WCAG AA?
4.5:1 for normal text and 3:1 for large text (24px, or about 18.66px bold) and for UI components like input borders and icons. AAA requires 7:1 for normal text and 4.5:1 for large text.
How does the suggested color work?
It converts your color to OKLCH, keeps the hue, and searches lighter and darker versions for the one closest to your original (by perceptual color difference) that meets the target ratio.
Does it handle transparent text?
Yes. A semi-transparent text color is blended over the background first, then the ratio is calculated on the color you'd actually see.
Should I use APCA instead of WCAG 2?
Design with APCA in mind if you like, especially for dark mode, but still meet the WCAG 2.2 ratios — they're the current standard used in accessibility law and audits.
Your business here? Sponsor this tool from $16/week. See placements