WCAG Contrast Checker
WCAG 2.1 AA + AAA contrast ratio checker with APCA (WCAG 3 draft) lightness contrast, live preview at every text size, paste any color format, suggest fixes to pass.
How to Use
- Pick foreground + background colors with the swatch buttons, or paste any color format (hex / rgb() / oklch() / named).
- The ratio reads out top-center with pass/fail badges for every WCAG threshold.
- Sample text in 4 sizes shows what the pair looks like in real type.
- Click "Suggest fix" to nudge one color until the pair passes AA Normal.
Heading at 32px / 800
Subheading at 22px / 700
Body copy at 16px regular — the quick brown fox jumps over the lazy dog. Pneumonoultramicroscopicsilicovolcanoconiosis.
Small caption at 12.5px — small text typically needs more contrast to remain legible at-a-glance.
ButtonWCAG thresholds
Frequently Asked Questions
WCAG 2.1 ratio thresholds?
AA Normal 4.5:1 — AA Large 3:1 — AAA Normal 7:1 — AAA Large 4.5:1 — Non-text UI 3:1.
What is "large" text?
18pt regular or 14pt bold (about 24px or 18.66px CSS).
What is APCA?
Accessible Perceptual Contrast Algorithm — proposed for WCAG 3. Range −108 to +106. Sign indicates dark-on-light vs light-on-dark. Practical thresholds: ≥75 for body text, ≥60 for large text, ≥45 for non-text UI.
Why both WCAG 2 and APCA?
WCAG 2 is the legal standard but its luminance formula is known to over- or under-rate certain hue pairs (especially blues). APCA models real screen contrast better — but is not yet final. Pass both if you can.
Common Use Cases
UI accessibility review
Spot-check headings, body copy, buttons, and disabled states against AA / AAA.
Brand colour guidelines
Verify every primary/secondary/accent combo meets your accessibility floor.
Dark-mode design
APCA reveals where WCAG 2 lies about dark theme contrast.
Last updated: