Dev Tools
Client-sidefiles never upload

WCAG + APCA contrast checker

Enter foreground and background colours, watch WCAG 2.1 contrast ratio and APCA Lc update live. Per-criterion pass/fail (AA / AAA / large / UI). When a pair fails, the tool walks the OKLab L axis to find the nearest passing colour for you.

Heading sample
This is a paragraph at body size β€” make sure you can read it comfortably at this contrast.
Caption / footnote text β€” small sizes have the strictest a11y rules.
WCAG 2.1 contrast
3.24:1
AA normal (β‰₯ 4.5)β‰₯ 4.5FAIL
AA large (β‰₯ 3.0)β‰₯ 3.0PASS
AAA normal (β‰₯ 7.0)β‰₯ 7.0FAIL
AAA large (β‰₯ 4.5)β‰₯ 4.5FAIL
UI components / iconsβ‰₯ 3.0PASS
APCA (WCAG 3 draft)
Lc -59.0
Body / small text|Lc| β‰₯ 75FAIL
Larger / less critical|Lc| β‰₯ 60FAIL
Non-text minimum|Lc| β‰₯ 45PASS
APCA is the WCAG 3 draft β€” perceptually fairer than WCAG 2 for very dark or very light tones.
⚑ Below threshold β€” try
β†’#0073e0
β€ΊHow to use
  1. Enter the foreground (text) and background colours using the picker or by typing hex / rgb / hsl / oklch.
  2. The preview pane shows real UI elements (heading, body, fine print, button) under your chosen pair.
  3. WCAG 2.1 lists the ratio plus five pass/fail checks (AA normal, AA large, AAA normal, AAA large, UI components).
  4. APCA (WCAG 3 draft) shows Lc + three checks (body, larger, non-text minimum).
  5. When you fall short, a yellow suggestion bar appears with the nearest passing colour along the OKLab L axis β€” hit Apply to swap it in.
Tips
  • WCAG 2.1 ratio ranges from 1 to 21 (black on white). AA is the bare legal minimum (EU + US government sites); AAA is the recommended target for body text.
  • APCA Lc is the WCAG 3 draft algorithm β€” perceptually fairer than WCAG 2, especially at the extremes. Apple HIG already references it.
  • Use swap β‡… to instantly invert the pair β€” great for testing dark-mode pairings.
  • State syncs into the URL hash (e.g. #1e90ff|ffffff), so you can share a check by copying the URL.

Related tools