When should I use APCA over WCAG 2?

APCA gives more accurate readability assessment for body text and light-on-dark themes. WCAG 2 still has the legal weight — use both as a check. Most modern dark-mode designs that pass APCA will also pass WCAG 2 AA.

What's the recommended APCA threshold?

60 for body text, 75 for fine print, 45 for large display text. APCA is signed (negative for dark-text-on-light, positive for light-on-dark) — abs values are what matter for compliance.

Is APCA in WCAG 3 yet?

Not finalised. WCAG 3 is still a draft as of 2025. APCA is the current frontrunner for the new contrast algorithm but may evolve. Use it as a guide alongside WCAG 2 today.

apca · wcag 3 · perceptual · live · local

Check contrast with APCA (WCAG 3)

Modern perceptual contrast — the candidate algorithm for WCAG 3. Returns Lc value with sign indicating polarity. Fully local.

APCA Contrast Checker

+106.7

perceptual

Polarity

dark/light

fg/bg

Use

Body text (any weight)

guidance

Status

good

for body

input · color

Foreground

Background

output · preview

The quick brown fox

APCA is the WCAG 3 candidate. It uses perceptual luminance, not the 4.5:1 simple ratio.

+106.7 Lc

Body text (any weight)

Positive = dark text on light bg. Negative = light text on dark bg. Magnitude indicates strength.

Quick Start

How to read APCA Lc

APCA returns a signed Lc value. Magnitude tells you what font weights and sizes will be legible.

01
Pick fg & bg
HEX for both. Order matters — polarity is encoded by sign.
Colors round-trip through a normalised OKLCH representation, so manipulations (lighten, mix, contrast) preserve perceptual uniformity per CSS Color 4.
inputOKLCHCSS Color 4perceptuallive
fg/bg · colorhex · sRGB
```
#111 / #fff
```
loaded · normalisedOKLCH · ready
02
Read Lc
Positive Lc = dark on light. Negative = light on dark.
Format conversion handles hex, rgb(), hsl(), oklch(), color(display-p3 …) with proper gamut mapping when crossing colour spaces.
lchex · rgb · hslP3gamut-mappedlive
lc · optionsready · live
```
+96.5
```
options applied · livelive
03
Pick a use level
|Lc| ≥ 75 = any body text. ≥ 60 = 16px regular. ≥ 30 = large bold.
Contrast and accessibility checks evaluate against WCAG 2.2 AA (4.5:1) and AAA (7:1) thresholds; APCA is offered when contrast is the goal.
levelWCAG 2.2APCAAA · AAAcontrast
level · convertedbody · ready
```
Body — Regular+
```
converted · liveWCAG-aware
04
Ship safely
Higher |Lc| = more headroom for thin text and small sizes.
Copy formats any swatch in the chosen syntax (#aabbcc, rgb(170 187 204), etc.); downloads emit CSS variable blocks or palette JSON.
shipclipboardCSS varspalette JSONblob
ok · copiedready · done
```
✓ Legible
```
shipped · ready to shipsuccess

Pro tips

Colour work that survives accessibility audits

Use OKLCH for manipulation

OKLCH is perceptually uniform — lightness changes look uniform. hsl() isn’t, and produces muddy mid-tones.

Test against WCAG 2.2

4.5:1 for normal text (AA), 7:1 for AAA. Use Contrast Checker before shipping.

Mind gamut clipping

P3 colours that exceed sRGB get clipped on standard displays. Choose relative colorimetric in CSS Color 4.

Colour blindness affects 8%

Use the Color Blindness simulator to check critical UI before launch.

Don’t hardcode hex

Use CSS variables. Light/dark themes become trivial when colours are tokenised.

Dark mode isn’t inverted

Don’t simply invert lightness — desaturate slightly and re-pick accents. Pure-inverted UIs look harsh.

Use Cases

When to prefer APCA over WCAG 2

Modern design systems, dark mode, body-text legibility.

Dark mode

WCAG 2's 4.5:1 misjudges light-on-dark; APCA fixes that. Conversions go through OKLCH so perceptual lightness stays uniform across hues — a 50% L blue looks as bright as a 50% L yellow. HSL fakes this and produces muddy mid-tones, OKLCH solves it per CSS Color 4.

WCAG 2.2 AA

Body text

Lc gives font-size/weight guidance — not just pass/fail. WCAG 2.2 contrast is sampled live for AA (4.5:1) and AAA (7:1) — flip foreground/background to test both directions. APCA is offered when contrast itself is the goal (e.g., dataviz).

P3-aware

Design tokens

Use Lc thresholds in your design system docs. Output covers hex, rgb(), hsl(), oklch(), and color(display-p3 …) for CSS Color 4. Drop straight into Tailwind config, CSS custom properties, or Figma without re-typing values.

perceptually-uniform

Tooling

Same algorithm Apple/Adobe/Figma are evaluating for WCAG 3. Pair with the Contrast Checker before shipping any new theme. Catches accessibility regressions before they become bugs filed against you by users with low vision.

gamut-safe

Subtle text

Pin appropriate weight/size for low-contrast UI text. Tokens drop straight into Figma variables, Tailwind config, or CSS custom properties. Theme switching becomes a single variable swap rather than a search-replace across stylesheets.

a11y-ready

QA gating

Replace 4.5:1 gates with Lc thresholds in CI lints. Gamut-aware: tools warn before you ship a P3 colour that clips on sRGB displays. Choose the appropriate fallback strategy (relative colorimetric vs perceptual) per CSS Color 4 spec.

design-token

FAQ

Frequently asked questions

Why not just WCAG 2's 4.5:1?

WCAG 2 is over-strict on light-mode darks and under-strict on dark-mode lights. APCA accounts for this.

Is APCA finalized?

It is the candidate algorithm for WCAG 3 — still draft. Use it complementarily.

What's a good |Lc| target?

75+ for body, 60+ for 16px regular, 30+ for large bold accents.

Why is sign meaningful?

It tells you the polarity: positive = dark fg / light bg; negative = inverted.

Is anything sent to a server?

No — APCA computation runs entirely in your browser.

Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

47 in queue·8 shipped this month

Request queued. Thanks!