WCAG vs APCA

WCAG 2.1 ratios

WCAG contrast is a relative luminance ratio (for example 4.5:1 for normal text, 3:1 for large text). It is the compliance baseline for many teams and audits — Colorise Pro reports it clearly next to live type.

How the WCAG formula works

Each sRGB channel is converted to linear light, and relative luminance is a weighted sum: L = 0.2126 R + 0.7152 G + 0.0722 B, running from 0 (black) to 1 (white). The ratio is (L1 + 0.05) / (L2 + 0.05) with the lighter color on top, so it runs from 1:1 to 21:1 and does not depend on which color is the text. Under WCAG 2.1 and 2.2, level AA asks for 4.5:1 for normal text and 3:1 for large text, where “large” means at least 18 pt (about 24 px) or 14 pt bold (about 18.7 px). Level AAA asks for 7:1 and 4.5:1. Non-text parts of the interface that are needed to understand it, such as input borders and icons, need 3:1.

APCA Lc

APCA models perceived contrast with polarity awareness (light-on-dark vs dark-on-light). Lc values help when WCAG looks like a “pass” but type still feels weak — a common issue on dark dashboards and dense tables.

Reading Lc: polarity and rough bands

APCA returns a signed Lc (lightness contrast) value, with the text color and the background as separate inputs: positive for dark text on light, negative for light text on dark. Magnitudes run up to roughly 106 to 108. The method is intended to be read together with font size and weight, so any single number is guidance only. As a rough rule from the published draft guidance, an absolute Lc around 75 is a common floor for body text, around 60 for larger content text, and around 45 for large headlines and key UI elements; thin, small type wants more. APCA is a candidate for WCAG 3, which is still a draft, and it is not a legal or compliance requirement.

Computed comparison

Every value below is calculated on this page, with the text color first and the background second. The two metrics usually agree on broad pass or fail, but not always.

• Black on white gives exactly 21:1 and an Lc a little above 100, the top of both scales.
• #767676 on white is the classic borderline pass at about 4.54:1, yet its Lc sits below the ~75 body-text guidance.
• On orange (#f97316, see the orange hub) the rankings flip: WCAG strongly prefers black text (about 7.5:1 against 2.8:1 for white), while APCA scores white text at a slightly larger magnitude than black. Neither is a great body-text choice, which is the real lesson: look at both, then view the real sample.

Check your own pairs in the Contrast Checker, or browse precomputed text and background combinations in the contrast hub. Dark surfaces are where the difference is usually felt first; the dark-mode colors guide covers that.

A workflow that respects both

Pass WCAG 2.2 AA for anything you must be able to defend in an audit, and treat APCA as a sanity check on how it feels at real sizes. If a pair passes WCAG but scores a low Lc, try more lightness separation before more chroma. When building token ramps, test the text-to-surface steps early, as described in Building OKLCH scales.

Practical rule

• Ship against WCAG when you need checklist compliance.
• Tune readability with APCA on real type sizes and weights.
• Always judge on samples — the Contrast Checker shows both on live UI text, with an Auto-Fix path when a pair fails.

Workflow that sticks

1. Lock brand colors in OKLCH (Studio or Picker).
2. Test critical pairs: body, captions, buttons, borders.
3. Prefer raising L contrast before blasting chroma.
4. Re-export tokens only after both WCAG and APCA look honest.

Try it

Open the Contrast Checker, set foreground and background, and compare WCAG ratio next to APCA Lc before you lock a brand pair. From a palette, use Continue in → Contrast for a one-click handoff.