Most websites fail WCAG contrast checks on their first audit. The fix is usually a 10-second tweak — adjusting a gray from #999 to #767676 — if you know what to look for. This guide explains exactly what WCAG contrast is, why it matters legally and practically, and how to audit and fix your own pages.
What is WCAG and why does it exist?
WCAG stands for Web Content Accessibility Guidelines — a set of technical standards published by the W3C to make web content usable by people with disabilities. The first version (WCAG 1.0) appeared in 1999. WCAG 2.0 arrived in 2008, 2.1 in 2018, and 2.2 in 2023.
Each version defines three conformance levels:
Level A
Minimum requirements. Removing these barriers is essential — failure makes content inaccessible for some users entirely.
Level AA
The standard for legal compliance in most countries. Includes contrast requirements, resizable text, and keyboard navigation.
Level AAA
Enhanced accessibility. Exceeds legal requirements. Recommended for high-stakes content like medical, legal, or financial information.
Color contrast falls under WCAG 2.1 Success Criterion 1.4.3 (Contrast — Minimum) for AA and 1.4.6 for AAA. These are the most commonly failed criteria in accessibility audits.
The contrast ratio explained
A contrast ratio is a number — always expressed as X:1 — that describes the luminance difference between two colors. The scale runs from 1:1 (identical colors, invisible text) to 21:1 (pure black on pure white, maximum contrast).
| Color Pair | Ratio | Normal AA | Normal AAA |
|---|---|---|---|
| #000000 on #ffffff | 21.00:1 | Pass | Pass |
| #595959 on #ffffff | 7.00:1 | Pass | Pass |
| #767676 on #ffffff | 4.54:1 | Pass | Fail |
| #949494 on #ffffff | 3.00:1 | Fail | Fail |
| #bbbbbb on #ffffff | 1.74:1 | Fail | Fail |
Notice that #767676 on white just barely passes AA at 4.54:1. One shade lighter — #787878 — drops to 4.38:1 and fails. This is why using a checker rather than eyeballing is essential.
WCAG AA vs AAA: the practical difference
WCAG AA
- ✅ Normal text: 4.5:1 minimum
- ✅ Large text: 3:1 minimum
- ✅ UI components: 3:1 minimum
- ⚖️ Legally required in most countries
- 🌍 Required under ADA, EN 301 549, AODA
WCAG AAA
- 🌟 Normal text: 7:1 minimum
- 🌟 Large text: 4.5:1 minimum
- 🌟 UI components: not specified
- 📋 Recommended for medical/legal/financial UI
- 🏆 Best-in-class accessibility
For most websites, targeting AA is the right goal. Body copy on a white background with a dark gray text color (like #1e293b) will pass AAA automatically. Focus your AAA effort on secondary text, placeholders, and disabled states — these are where most failures hide.
What counts as “large text”?
WCAG definition of large text:
- 📏 At least 18pt (24px) in regular weight — contrast requirement drops to 3:1 for AA
- 📏 At least 14pt (~18.67px) in bold weight — same lower threshold applies
The most common mistake: designers work in pixel sizes without knowing the pt mapping. In CSS, font-size: 24px with normal weight qualifies as large text. font-size: 18px with font-weight: 700 also qualifies. A 16px bold paragraph does not — it falls short of the ~18.67px bold threshold.
When in doubt, test the pair at the 4.5:1 threshold. Passing the stricter normal-text requirement means you automatically pass for large text too.
Check Your Colors Now — Free
Enter any foreground/background pair and instantly see the WCAG AA and AAA pass/fail for normal text, large text, and UI components — with a live preview and accessible color suggestions.
♿ Open Color Contrast Checker →Advertisement
How the contrast ratio is actually calculated
The WCAG contrast ratio uses relative luminance — a measure of how bright a color appears to the human eye, not just how bright it is numerically. The formula weights the RGB channels differently because our eyes are far more sensitive to green than blue:
L = 0.2126 × Rlinear + 0.7152 × Glinear + 0.0722 × Blinear
Each channel is first converted from the sRGB gamma-encoded value (the number in your hex code) to a linear light value. This step is important — without it, the math would misrepresent perceived brightness, especially for mid-tones.
Once you have luminance values L1 (lighter) and L2 (darker), the ratio is:
Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)
The +0.05 offset prevents division by zero for absolute black and ensures the scale is perceptually reasonable. Pure black has luminance 0; pure white has luminance 1; giving the familiar 21:1 maximum. Our checker handles all of this automatically — just enter your colors and read the result.
5 most common contrast failures
Light gray text on white
The classic failure. #999999 on white = 2.85:1. #767676 is the darkest gray that passes AA (4.54:1). Many design systems set secondary text too light.
Fix: Use #767676 or darker for any body or secondary text on white.
Brand color text on mid-tone backgrounds
Blue links that pass on white often fail on light colored cards or panels. The background shifts the effective contrast dramatically.
Fix: Test every combination, not just on white. Check text on all card/panel backgrounds.
Placeholder text in form fields
Browsers default to roughly 40% opacity on placeholder text. This nearly always fails WCAG AA, even when the input text itself passes.
Fix: Set explicit placeholder color in CSS: color: #6b7280 (passes on white at 4.61:1).
White text on medium-lightness brand colors
Medium teal (#008080), medium blue (#0066cc at some lightness), or purple buttons often drop below 4.5:1 with white text. Looks fine on screen but fails the math.
Fix: Check every brand color button with white text. Darken the background or use dark text instead.
Text on gradients or image overlays
Gradients create a range of effective backgrounds. Text must pass at the worst (lowest contrast) point — which is usually where the gradient transitions.
Fix: Test at the lightest point of the gradient behind the text, not the average.
How to audit your website in 5 steps
- 1
Identify your foreground and background color pairs
List every unique text/background combination: body text, headings, links, buttons, labels, placeholders, disabled states. Include text on colored cards and image overlays.
- 2
Extract the exact color values
Use browser DevTools (inspect element → Computed tab) or your design tool (Figma, Sketch) to get exact hex or RGB values. Do not eyedrop from screenshots — screen gamma can mislead.
- 3
Check each pair in the contrast checker
Enter foreground and background into the checker. Note which pairs fail AA and which also fail for large text.
Open Color Contrast Checker → - 4
Apply the suggested accessible alternatives
For failing pairs, use the checker's suggestions to find the nearest passing color at the same hue. Usually a small lightness adjustment is enough.
- 5
Document passing colors in your design system
Save the verified pairs as named tokens (e.g. "text-secondary: #767676 on white"). This prevents regressions when design updates happen later.
Advertisement
3 myths about color contrast
❌ Myth: “Only users with disabilities need good contrast.”
✅ Truth: Everyone benefits. Bright sunlight washes out screens. Aging eyes lose contrast sensitivity. Cheap displays render colors differently. Good contrast serves all users in all conditions.
❌ Myth: “If it looks fine to me, it's fine.”
✅ Truth: Approximately 8% of men and 0.5% of women have some form of color vision deficiency. What looks clearly readable to you may be nearly invisible to them. The WCAG formula is based on scientific luminance perception — not designer subjectivity.
❌ Myth: “AAA is impossible to achieve in real designs.”
✅ Truth: Most body text on a clean background already passes AAA. Dark gray (#595959) on white hits exactly 7:1. The failures concentrate in secondary text colors, brand-colored links, and UI element borders — not body copy.
Frequently Asked Questions
What is the minimum contrast ratio for WCAG AA?▾
WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold). UI components also need 3:1. AA is mandated under the ADA (US), EN 301 549 (EU), AODA (Canada), and many other laws.
What is the difference between WCAG AA and AAA?▾
AA is the legal compliance level — 4.5:1 for normal text. AAA is the enhanced level — 7:1 for normal text, 4.5:1 for large text. AAA is recommended for critical content but not legally required in most contexts.
What counts as large text in WCAG?▾
At least 18pt (24px) in regular weight, or at least 14pt (~18.67px) in bold. Large text only needs 3:1 for AA. When in doubt, test against the normal text threshold of 4.5:1.
How is the WCAG contrast ratio calculated?▾
Via relative luminance: L = 0.2126R + 0.7152G + 0.0722B (after linearising each channel). Ratio = (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color. Range is 1:1 to 21:1.
Do background patterns need to pass contrast checks?▾
WCAG 1.4.3 applies to text and images of text. Decorative backgrounds with no text are exempt. Text over gradients or patterns must pass at the lowest-contrast point.
Ready to check your colors?
Use the free WCAG Color Contrast Checker to test any color pair instantly — with live preview, AA/AAA pass/fail results, and accessible color suggestions when you need them.