When to use it
During accessibility reviews, to confirm that your text stands out clearly against the background. This tool grades the WCAG 2.1 minimums for normal text, large text, and UI components simultaneously.
How it works
Paste foreground (text) and background colors. #3a4bd0, rgb(58 75 208),
and oklch(...) all work. The ratio updates as you type, and the badges
below show which WCAG grades pass.
Thresholds
- AA Normal text — 4.5:1. The baseline for body copy.
- AA Large text — 3:1. 18pt+ or bold 14pt+.
- AAA Normal text — 7:1. Stricter grade used in banking, health, and regulated contexts.
- AAA Large text — 4.5:1.
- UI components · Graphics — 3:1. Button borders, icons, and other non-text elements.
APCA Lc mode
The toggle at the top switches between WCAG 2.1 and APCA Lc. APCA (Accessible Perceptual Contrast Algorithm) is the W3C's WCAG 3 contrast candidate — designed to better match human perception in the OKLCH era.
- |Lc| ≥ 75 — body text (≥14px regular).
- |Lc| ≥ 60 — body (≥18px regular or ≥14px bold).
- |Lc| ≥ 45 — large text only (≥24px regular or ≥18.66px bold).
- |Lc| ≥ 30 — non-text / UI components / placeholder.
WCAG 2.1's 4.5:1 maps roughly to APCA |Lc| 75, but the two systems don't align perfectly (especially light text on dark backgrounds). Cite which standard you used in the audit. KWCAG reviewers can use this as "checked the latest standard too."
Tips
- Treat AA Normal 4.5:1 as the baseline for body copy.
- Hints and placeholder text that fail 3:1 disappear for users with low vision — worse than not showing them at all.
- If you build colors in OKLCH, nudging lightness alone changes contrast dramatically.
Design tokens never leave the page
WCAG 2.1 AA / AAA across 5 criteria (body · large · UI components) verified in-browser. hex · rgb · oklch all parse in-page.