Contrast Checker · WCAG 2.2 + APCA (WCAG 3 draft) Side-by-Side — Vectobox
Free accessibility contrast checker showing WCAG 2.2 ratio and APCA Lc (WCAG 3 draft) on one page. Highlights the ~20% of color pairs WCAG 2 misclassifies, with APCA fontLookup table, sample gallery, and lightness-axis adjust. Pure browser, zero tracking.
Pure browser. Zero upload. Your colors never leave this tab.
The quick brown fox14 px / 400
The quick brown fox18 px / 400
The quick brown fox24 px / 700
The quick brown fox32 px / 700
| px | 400 | 700 |
|---|---|---|
| 10 | — | — |
| 11 | — | — |
| 12 | 100 | 90 |
| 13 | 95 | 85 |
| 14 | 90 | 75 |
| 15 | 85 | 75 |
| 16 | 75 | 65 |
| 18 | 75 | 60 |
| 21 | 70 | 55 |
| 24 | 60 | 45 |
| 28 | 55 | 40 |
| 32 | 50 | 35 |
| 36 | 45 | 30 |
| 42 | 40 | 30 |
| 48 | 35 | 30 |
| 60 | 30 | 30 |
| 72 | 30 | 30 |
| 96 | 30 | 30 |
What is APCA?
APCA (Accessible Perceptual Contrast Algorithm, G-4g) is the contrast model developed by Andrew Somers and adopted as a candidate algorithm in the WCAG 3 draft. Unlike the WCAG 2 ratio, APCA returns a signed Lc value (-108 to +106): positive means dark text on light background, negative means light text on dark background, and the threshold for readable body text is |Lc| ≥ 75.
Why does WCAG 2 disagree with APCA?
The WCAG 2 formula (L1+0.05)/(L2+0.05) was tuned for high-contrast black-on-white scenarios. It systematically over-passes light-on-mid-gray pairs (e.g. white text on #777 hits 4.48:1 — just barely failing AA — yet APCA scores it at Lc -68, well into the readable range) and under-passes warm mid-tones such as orange text on white. APCA's perceptually weighted exponents fix both directions.
Font lookup, not a single threshold
APCA does not use a single magic number. Whether a color pair passes depends on font size and weight: 14 px / 400 wt body needs |Lc| ≥ 90, but 24 px / 700 wt headings only need |Lc| ≥ 45. The table on this page surfaces both the minimum acceptable size for weight 400 and weight 700 at the current Lc, so you can decide what role the pair can safely play.
Adjust along the lightness axis
The Adjust buttons run a 25-step binary search on HSL.L, keeping hue and saturation fixed, until |Lc| reaches 75 (or WCAG ratio reaches 4.5). When the target is unreachable — for example fg and bg are both near-white — the tool returns the best approximation and flags the result.
FAQ
- What is APCA and how is it different from WCAG 2?
- APCA G-4g is a perceptually weighted contrast algorithm proposed for WCAG 3. It returns a signed Lc value (≈ -108 to +106) carrying polarity, while WCAG 2 returns a symmetric ratio (≥ 1) that ignores which color is text vs. background. The two algorithms agree on extreme contrast but disagree on roughly one in five real-world color pairs.
- Which standard should I use today?
- WCAG 2.x remains the legal baseline under Section 508 (US) and the European Accessibility Act, so passing AA is still required. APCA is currently a candidate algorithm in the WCAG 3 working draft — treat it as a more accurate design QA layer on top of WCAG 2, not a replacement.
- Why do my colors pass WCAG but fail APCA?
- The WCAG 2 ratio is calibrated around black-on-white contrast. Light-on-mid-gray pairs (white text on #777, gray text on white) often clear 4.5:1 only because the +0.05 floor in the formula stretches mid-tones. APCA's mid-tone exponents are more conservative for those cases.
- Is my data sent anywhere?
- No. Every WCAG ratio, APCA Lc, font lookup, and binary search runs in your browser. There are no network requests, no analytics on the calculation, and no telemetry on the colors you enter.
Related Tools
Color Converter
Convert colors between HEX, RGB, HSL, HWB, OKLCH instantly. WCAG contrast checker and OKLCH-based shade scale included. Runs entirely in your browser.
QR Generator
Create QR codes for URLs, Wi-Fi, vCard contacts, email, SMS, calendar events and more. Embed a logo, choose error-correction, download as SVG or PNG. 100% in-browser.
Color Picker
Privacy-first color picker: extract exact pixel colors and auto-generate palettes from any image with K-means, median cut, or frequency algorithms. Includes WCAG contrast and color blindness simulation.