How to use the APCA Contrast Checker
- Enter the text and background colours (any CSS format).
- Read the Lc value — higher means more readable. Negative values mean light text on a dark background.
- Check the use-case table to see whether the pair is suitable for body text, headlines or only non-text elements.
- Compare with the WCAG 2 ratio shown alongside, which is still the legal and audit standard today.
What is APCA?
APCA (Accessible Perceptual Contrast Algorithm), developed by Andrew Somers for the W3C, is the contrast method proposed for the upcoming WCAG 3 guidelines. Instead of a ratio like 4.5:1, it outputs a lightness contrast value Lc from roughly 0 to 106 (positive for dark text on light backgrounds, negative for light-on-dark). It models how human vision actually perceives contrast, including the effect of font size and weight.
Why APCA instead of the WCAG 2 ratio?
- Polarity aware: WCAG 2 treats white-on-black and black-on-white identically, but our eyes don’t. APCA scores them differently.
- Better with dark mode: the WCAG 2 formula overstates contrast for dark colour pairs, so some “passing” dark-theme combinations are hard to read. APCA catches these.
- Fewer false failures: some readable mid-tone pairs, such as white text on orange buttons, fail WCAG 2 while APCA rates them more realistically.
How to read the Lc value
| Lc | Suitable for |
|---|---|
| 90+ | Preferred for body text and long reading |
| 75 | Minimum for body text (~18px regular) |
| 60 | Other content text (~24px regular or 16px bold) |
| 45 | Large headlines and big UI labels |
| 30 | Placeholder text, disabled states, large icons |
| 15 | Minimum for non-text elements such as dividers |
These are simplified “bronze-level” guidelines; the full APCA approach uses lookup tables per font size and weight.
Should I use APCA today?
WCAG 3 is still a working draft and APCA’s final form may change. Accessibility laws and audits (including the European Accessibility Act, which references WCAG 2.1 via EN 301 549) still use the WCAG 2 ratio. The practical approach: meet WCAG 2 AA for compliance, and use APCA as a second opinion — especially for dark themes and large display text. Check WCAG 2 in detail with the Contrast Checker.
Tools that pair well with the APCA Contrast Checker
- Color Blindness Simulator — Upload a screenshot or design and see it through eight types of colour vision deficiency side by side — or test a palette for colours that become indistinguishable.
- Tailwind Color Generator — Paste one brand colour and get a balanced 11-step shade scale (50 to 950) built in OKLCH — with contrast hints and exports for Tailwind v3, v4, CSS and SCSS.
- OKLCH Color Converter — Explore the perceptually uniform OKLCH colour space with live sliders, see whether a colour fits in sRGB, and copy matching HEX, RGB and HSL fallbacks.
- Color Converter — Paste any CSS colour — HEX, rgb(), hsl(), hwb(), oklch() or a name like tomato — and get every other format instantly, plus a ready-to-use 50–950 palette.