Pixel's Design Studio
APCA Contrast Checker
WCAG 2.x measures contrast as a simple luminance ratio. APCA is polarity-aware and size/weight-dependent — it tells you what you can actually read, not just what passes a formula.
Color pair
Preview
Headline text — 24px
Body text at 16px. The paragraph is the unit of thought.
Small text at 12px — captions, metadata, footnotes.
WCAG 2.x vs APCA — side by side
Same color pair. Two different answers. WCAG 2.x gives you a ratio. APCA gives you a perceptual lightness contrast value (Lc) that accounts for polarity — dark-on-light reads differently than light-on-dark.
WCAG 2.x (legacy)
Simple luminance ratio. Not polarity-aware. Does not account for font size or weight. One threshold for everything.
APCA (perceptual)
Normal polarity (dark on light)
Polarity-aware perceptual contrast. The Lc value maps to specific font size/weight combinations — not a single pass/fail.
APCA font lookup
Each cell shows the minimum |Lc| needed for that size/weight combination. Green cells pass for your current pair. Empty cells mean the combination is never permitted.
| Size | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
|---|---|---|---|---|---|---|---|---|---|
| 12px | — | — | — | 100 | 90 | 75 | 70 | — | — |
| 14px | — | — | 100 | 90 | 75 | 70 | 60 | 60 | — |
| 16px | — | — | 90 | 75 | 70 | 60 | 55 | 55 | 55 |
| 18px | — | 100 | 75 | 70 | 60 | 55 | 50 | 50 | 50 |
| 20px | — | 100 | 70 | 60 | 55 | 50 | 45 | 45 | 45 |
| 24px | 100 | 90 | 60 | 55 | 50 | 45 | 40 | 40 | 40 |
| 28px | 90 | 75 | 55 | 50 | 45 | 43 | 40 | 40 | 40 |
| 32px | 75 | 70 | 50 | 45 | 43 | 40 | 40 | 40 | 40 |
| 36px | 70 | 60 | 45 | 43 | 40 | 40 | 40 | 40 | 40 |
| 48px | 60 | 55 | 43 | 40 | 40 | 40 | 40 | 40 | 40 |
| 60px | 55 | 50 | 40 | 40 | 40 | 40 | 40 | 40 | 40 |
| 72px | 50 | 45 | 40 | 40 | 40 | 40 | 40 | 40 | 40 |
| 96px | 45 | 40 | 40 | 40 | 40 | 40 | 40 | 40 | 40 |
Based on APCA Bronze conformance level. Your |Lc|: 97.5
Why this matters
Polarity-aware
White text on black reads differently than black text on white. WCAG 2.x treats them identically. APCA does not.
Size/weight dependent
A 48px heading needs less contrast than 14px body text. APCA encodes this. WCAG gives you "large" or "normal" — two buckets for all of typography.
Perceptually uniform
WCAG 2.x underreports contrast for dark backgrounds and overreports for mid-tones. APCA tracks how humans actually see.
Export
color: #141412;
background: #f5f5f4;
/* WCAG 16.91:1 | APCA Lc +97.5 */Presets — where WCAG and APCA disagree
These pairs expose the gap between the two methods. Some pass WCAG but fail APCA for body text. Some fail WCAG but are perfectly readable at headline sizes according to APCA.