Contrast checker · WCAG 2.2 + APCA · runs in your browser
Audit your whole palette’s contrast at once.
Paste a list of hex colors, your CSS variables, or a Tailwind config. a11ycontrast checks every text-on-background pair for WCAG 2.2 and APCA — and tells you the nearest accessible color for each failure.
#ffffffsurface#f3f4f6text#6b7280heading#111827brand#2563eblink#93c5fd| text ↓ / bg → | bg | surface | text | heading | brand | link |
|---|---|---|---|---|---|---|
| bg | — | Aa1.10Lc 0 | Aa4.83Lc 79 | Aa17.7Lc 107 | Aa5.17Lc 80 | Aa1.80Lc 37 |
| surface | Aa1.10Lc 0 | — | Aa4.39Lc 72 | Aa16.1Lc 99 | Aa4.70Lc 73 | Aa1.64Lc 30 |
| text | Aa4.83Lc 74 | Aa4.39Lc 67 | — | Aa3.67Lc 27 | Aa1.07Lc 0 | Aa2.68Lc 38 |
| heading | Aa17.7Lc 105 | Aa16.1Lc 98 | Aa3.67Lc 29 | — | Aa3.43Lc 28 | Aa9.84Lc 69 |
| brand | Aa5.17Lc 75 | Aa4.70Lc 68 | Aa1.07Lc 0 | Aa3.43Lc 26 | — | Aa2.87Lc 39 |
| link | Aa1.80Lc 33 | Aa1.64Lc 27 | Aa2.68Lc 40 | Aa9.84Lc 68 | Aa2.87Lc 42 | — |
Failures & fixes (WCAG AA, normal text · 4.5:1)
- Aa
bgonsurface— 1.10:1 (needs 4.5)Nearest accessible text:Aa#6e6e6e→ 4.63:1 - Aa
bgonlink— 1.80:1 (needs 4.5)Nearest accessible text:Aa#4f4f4f→ 4.54:1 - Aa
surfaceonbg— 1.10:1 (needs 4.5)Nearest accessible text:Aa#6b778e→ 4.51:1 - Aa
surfaceontext— 4.39:1 (needs 4.5)Nearest accessible text:Aa#f6f7f8→ 4.51:1 - Aa
surfaceonlink— 1.64:1 (needs 4.5)Nearest accessible text:Aa#464d5d→ 4.70:1 - Aa
textonsurface— 4.39:1 (needs 4.5)Nearest accessible text:Aa#69707d→ 4.53:1 - Aa
textonheading— 3.67:1 (needs 4.5)Nearest accessible text:Aa#7a8190→ 4.54:1 - Aa
textonbrand— 1.07:1 (needs 4.5)Nearest accessible text:Aa#efeff1→ 4.50:1 - Aa
textonlink— 2.68:1 (needs 4.5)Nearest accessible text:Aa#4a4f59→ 4.56:1 - Aa
headingontext— 3.67:1 (needs 4.5)Nearest accessible text:Aa#f8f9fc→ 4.59:1 - Aa
headingonbrand— 3.43:1 (needs 4.5)Nearest accessible text:Aa#edf0f7→ 4.53:1 - Aa
brandontext— 1.07:1 (needs 4.5)Nearest accessible text:Aa#f7f9fe→ 4.59:1 - Aa
brandonheading— 3.43:1 (needs 4.5)Nearest accessible text:Aa#4a7eee→ 4.65:1 - Aa
brandonlink— 2.87:1 (needs 4.5)Nearest accessible text:Aa#1145b8→ 4.54:1 - Aa
linkonbg— 1.80:1 (needs 4.5)Nearest accessible text:Aa#0472ee→ 4.52:1 - Aa
linkonsurface— 1.64:1 (needs 4.5)Nearest accessible text:Aa#046bde→ 4.58:1 - Aa
linkontext— 2.68:1 (needs 4.5)Nearest accessible text:Aa#f2f8ff→ 4.52:1 - Aa
linkonbrand— 2.87:1 (needs 4.5)Nearest accessible text:Aa#e8f3ff→ 4.60:1
Why check the whole palette, not one pair
Single-pair checkers make you test combinations one at a time and miss the ones you forget. a11ycontrast builds the full matrix so nothing slips through:
- Every combination — each color as text on every other color as background.
- WCAG 2.2 + APCA together — the compliance standard plus the perceptual one.
- Nearest accessible fix — the closest color that passes, not just a red X.
- Your real tokens — keeps the names from your CSS variables or Tailwind scale.
WCAG thresholds, quickly
At least 4.5:1. The baseline most laws and audits require.
At least 3:1. Large = 24px regular or 18.66px bold and up.
At least 7:1. Enhanced contrast for body copy.
Roughly Lc 75 for body text, 60 for large — the WCAG 3 direction.
Frequently asked questions
Is a11ycontrast free?
Yes — completely free, no account, no sign-up. It runs entirely in your browser.
Do you upload or store my colors?
No. a11ycontrast has no backend. Parsing and all contrast math happen in your browser, so your palette never leaves your device.
What input formats can I paste?
A plain list of hex colors, CSS custom properties (--ink: #0a0a0a;), a Tailwind-style color object, or rgb()/rgba() values. a11ycontrast extracts every color it can find and keeps the names where they exist.
What is the difference between WCAG 2.2 and APCA?
WCAG 2.x contrast ratio (1:1 to 21:1) is the current standard used by laws and audits — AA needs 4.5:1 for normal text and 3:1 for large text. APCA (Lc, roughly 0–106) is a newer, more perceptually accurate algorithm proposed for WCAG 3; it handles dark mode and thin fonts far better. Use WCAG for compliance today and APCA as a perceptual sanity check.
What are the WCAG AA and AAA thresholds?
AA: 4.5:1 for normal text, 3:1 for large text. AAA: 7:1 for normal text, 4.5:1 for large text. "Large" means 24px (18pt) regular or 18.66px (14pt) bold and up.
How is the "nearest accessible color" calculated?
a11ycontrast keeps the failing text color’s hue and saturation and shifts its lightness by the smallest amount needed to reach the target ratio (4.5:1) against that specific background — so the suggested fix looks as close as possible to your original color.
Does this matter for the European Accessibility Act?
Yes. Since 28 June 2025 the EAA requires many digital products and services sold in the EU to meet accessibility requirements (EN 301 549, which references WCAG AA). Sufficient color contrast is part of that, so auditing your whole palette is now a compliance task for many teams, not just a nicety.