5 min readcode.live
WCAG Contrast Ratios: What AA and AAA Actually Require
4.5:1, 3:1, 7:1 — the actual numbers behind WCAG contrast requirements, and why they differ by text size.
The numbers, and why they're different for large text
WCAG 2.1 AA requires a 4.5:1 contrast ratio for normal text and 3:1 for large text (18pt+, or 14pt+ bold) — large text is easier to read at lower contrast, so the bar is lower. AAA, the stricter level, raises those to 7:1 and 4.5:1 respectively.
Where contrast checks get skipped
- Placeholder text is often styled too light and frequently fails contrast checks that body text passes
- Text over a gradient or image background needs the ratio checked against the worst-case point in the background, not the average
- Disabled-state UI is exempt from WCAG contrast requirements, but disabled-looking-but-actually-interactive elements are not
Try it on code.live
code.live's Contrast Checker takes a foreground and background color and tells you the exact ratio plus AA/AAA pass/fail for both normal and large text, so you're not guessing.
Key takeaways
- Apply one concrete change from this post before collecting more reading.
- Prefer browser-side tools when the work involves secrets, tokens, or PII.
- Document the why next to the how so the next reviewer inherits context.
FAQ
- Who is this guide on accessibility for?
- Working developers who need a practical take on wcag contrast ratios: what aa and aaa actually require — not a marketing overview. Skim the sections, apply one tip, then come back when you hit an edge case.
- Do I need an account to use the related tools?
- No. code.live tools run in your browser with no signup. Nothing you paste is uploaded to a server for the client-side utilities linked from this post.
- How often is this article updated?
- This post was published September 1, 2026. Fundamentals stay stable; check linked tool pages and official docs when version-specific behavior matters.