Contrast checker · WCAG 2.2 + APCA
Audit your whole palette’s contrast at once.
Paste a list of hex colors, your CSS variables, or a Tailwind config and check every text-on-background pair for WCAG 2.2 and APCA — with the nearest accessible color for each failure.
Open the contrast auditor ↗What it does
Single-pair checkers miss the combinations you forget. a11ycontrast builds the full matrix — every color as text on every other color as background — scored with both the WCAG 2.2 ratio (the compliance standard) and APCA Lc (the perceptual one), and suggests the nearest accessible color for each failure.
WCAG thresholds
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.
~Lc 75 for body, ~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.