WCAG Color Contrast Explained: How to Pass Accessibility Audits
A contrast ratio isn't a vibe check — it's a precise formula, and WCAG sets hard numeric thresholds your design either passes or fails.
EDTechToolsCenter Editorial"Make sure the text is readable" is subjective. WCAG (Web Content Accessibility Guidelines) replaces that with a number: a precise contrast ratio between text and its background, calculated from relative luminance, that either clears a defined threshold or doesn't.
How the ratio is actually calculated
Contrast ratio is computed from the relative luminance of the foreground and background colors — a value derived from their RGB channels after gamma-correcting each one. The formula produces a ratio from 1:1 (identical colors, no contrast) to 21:1 (pure black on pure white, maximum contrast). You don't need to calculate this by hand — a contrast checker does it instantly from two color inputs.
Sponsored
The actual thresholds
- WCAG AA, normal text: minimum 4.5:1
- WCAG AA, large text (18pt+/24px+, or 14pt+/18.5px+ bold): minimum 3:1
- WCAG AAA, normal text: minimum 7:1 (a stricter, optional level)
- WCAG AAA, large text: minimum 4.5:1
- UI components and graphical objects (icons, input borders): minimum 3:1 under WCAG 2.1's non-text contrast criterion
Why light-gray-on-white always fails
A very common real-world failure is light gray text on a white background — a popular "subtle" design choice that frequently lands well under 4.5:1. #999999 on white, for example, comes out to roughly 2.85:1 — a clear AA failure for normal text, even though it often looks fine to someone with typical vision. Contrast failures are frequently invisible to the person who designed them, which is exactly why a numeric check matters more than a visual gut check.
How to fix a failing contrast pair
- Check your actual foreground/background pair in a contrast checker to get the real ratio, not a guess.
- If it fails, darken the text (or lighten the background) incrementally and recheck — small adjustments often clear the threshold without changing the color's character.
- For brand colors that can't change, increase font size or weight to qualify for the lower "large text" threshold instead.
- For icons and interactive borders, don't forget the separate 3:1 non-text contrast requirement — it's checked less often but is part of the same WCAG 2.1 criterion.
Tools used in this article
Sponsored
Frequently asked questions
In many jurisdictions, accessibility laws (like the ADA in the US or the Equality Act in the UK) reference WCAG AA as the practical compliance standard, though the exact legal requirements vary by country and context. Treat AA as the baseline to design for regardless.
TechToolsCenter Editorial
How-to Guides
Our editorial desk publishes step-by-step tutorials, comparisons and productivity tips for everyday digital tasks.
Related articles
Glassmorphism in UI Design: What It Actually Is and How to Use It Without Overdoing It
A blurred, translucent panel over a busy background — glassmorphism looks effortless when it's done right, and looks broken (or fails an accessibility check) the moment any one of its three real ingredients is missing.
What Is Color Blindness, and How Do You Design For It?
Roughly 1 in 12 men have some form of color vision deficiency — here's what it actually looks like, and how to check your own designs against it.
Letterhead Design: What to Include (and What to Leave Off)
A letterhead is meant to be read past, not stared at — the best ones say who you are in the header and then get out of the way of the actual letter.