Why WCAG Contrast Matters
Low contrast isn't just a design problem — it's a legal liability. The ADA and Section 508 require digital accessibility compliance, and contrast ratio is one of the most commonly flagged failures in accessibility audits.
What is WCAG 2.1?
Web Content Accessibility Guidelines — the international standard for digital accessibility. WCAG 2.1 AA is legally required in many jurisdictions. AAA is the highest level, used for critical interfaces like healthcare and government portals.
AA vs AAA — Which Do You Need?
AA is the legal baseline (4.5:1 normal, 3:1 large). AAA (7:1 / 4.5:1) is for maximum readability — targets users with severe low vision. Most products target AA minimum.
What Counts as "Large Text"?
18pt (24px) or larger regular weight, OR 14pt (roughly 18.67px) or larger bold weight. Large text has a lower contrast threshold because it's easier to read at lower contrasts.
Do UI Components Need Contrast Too?
Yes. WCAG 2.1 (Success Criterion 1.4.11) requires a minimum 3:1 ratio for UI components like buttons, input borders, icons, and focus indicators — even if they contain no text.
Why Not Just Use Browser DevTools?
DevTools shows contrast but doesn't give fix suggestions, bulk checking, or exportable results. Auditors and design teams need a dedicated tool that saves time across multiple color pairs.
Common Failing Combinations
Gray text on white (#999 on #FFF = 2.85:1 — FAIL). Light blue on white. Yellow on white. Pastel-on-pastel. Always check before shipping.