APCA Color Contrast Checker & Exporter
Check your colors against the new Accessible Perceptual Contrast Algorithm, compare with WCAG 2.1 ratios, and export an accessible palette to CSS, SCSS, or Tailwind — instantly, in your browser.
Color Inputs
Live Preview
Design headings that everyone can read
The quick brown fox jumps over the lazy designer. Body copy at this size must stay comfortably readable for long passages of text.
Small print · captions · metadata · 0.8× base size
Export Accessible Palette
What is APCA?
APCA (Accessible Perceptual Contrast Algorithm) is the contrast calculation method being developed for WCAG 3.0. Unlike the WCAG 2.1 luminance ratio — which treats every color pair the same — APCA models how the human visual system actually perceives contrast. It accounts for text polarity (dark-on-light vs. light-on-dark), spatial frequency (font size and weight), and perceptual lightness, producing an Lc (lightness contrast) value that correlates far better with real-world readability.
For a decade, designers relied on the WCAG 2.1 standard to decide whether text was readable against a background. The industry is now shifting toward APCA, which is why searches for terms like "APCA contrast checker" and "APCA Tailwind palette generator" are climbing — while most top-ranking calculators are still outdated WCAG 2.1 tools. This checker closes that gap.
APCA vs. WCAG 2.1 contrast
Here is how the new algorithm compares to the legacy ratio most tools still use:
| Feature | WCAG 2.1 | APCA (WCAG 3.0) |
|---|---|---|
| Metric | Luminance ratio (1:1 – 21:1) | Lc lightness contrast (0 – ~108) |
| Polarity aware | No | Yes — dark-on-light ≠ light-on-dark |
| Font size aware | Only AA/AAA "large text" | Yes — continuous scale |
| Perceptually uniform | No | Yes |
| Status | Current standard | Upcoming (WCAG 3.0 / Silver) |
Recommended APCA Lc target levels
APCA thresholds depend on font size and weight. Use these target Lc values as a practical guide when building an accessible palette:
| Target Lc | Recommended use |
|---|---|
| Lc 90 | Preferred for body text and long-form content |
| Lc 75 | Minimum for standard content text |
| Lc 60 | Large text — 24px regular or 21px bold |
| Lc 45 | Headings — 36px regular or 28px bold |
| Lc 30 | Non-text UI, placeholders, disabled states |
| Lc 15 | Below visibility threshold — avoid for anything |
How this APCA checker works
This tool implements the APCA W3 0.1.9 reference algorithm. Your hex colors are linearized with the sRGB 2.4 transfer curve, converted to display luminance (Y), soft-clamped near black, then passed through polarity-specific exponents to produce the final Lc score. The legacy WCAG 2.1 ratio is shown alongside so you can compare both systems side by side. Everything runs locally in your browser — your colors are never uploaded to a server.
Once you find a passing combination, hit the export panel to generate CSS custom properties, SCSS variables, or a Tailwind config snippet with your accessible palette baked in.
Frequently asked questions
For body text, aim for Lc 90 (preferred) or at least Lc 75. Large headings can drop to Lc 45, and non-text UI elements should stay above Lc 30. Anything under Lc 15 is effectively invisible to many users.
APCA is more perceptually accurate because it accounts for polarity, font size, and weight. However, WCAG 2.1 is still the legal baseline in many regions. The safest approach is to check both — which is exactly what this tool does.
Yes. Switch the export panel to the Tailwind tab and you'll get a ready-to-paste tailwind.config.js snippet with your text and background colors added under theme.extend.colors. CSS and SCSS formats are also available.
APCA is stricter than the old ratio for light-on-dark text and mid-tone colors, and it soft-clamps near-black values. A pair that passes WCAG AA may still fall short of Lc 75. Use the verdict line to see which text sizes your combination actually supports.
Fully private. All calculations happen in your browser using JavaScript — nothing is sent to a server, stored, or tracked. You can even save this page and use it offline.