WCAG Accessibility Guide

Everything you need to know about WCAG color contrast — what AA and AAA mean, how contrast ratios work, and how to make your design accessible to everyone.

What Is WCAG?

WCAG stands for Web Content Accessibility Guidelines — the international standard for web accessibility published by the W3C (World Wide Web Consortium). WCAG 2.2 is the current version, released in 2023.

WCAG defines success criteria at three conformance levels: A (minimum), AA (standard) and AAA (enhanced). For color contrast, the relevant criteria are:

1.4.3 Contrast (Minimum): AA level
1.4.6 Contrast (Enhanced): AAA level
1.4.11 Non-text Contrast: AA level (for UI components and graphics)

The Contrast Ratio Thresholds

Level	Normal Text	Large Text
AA	4.5:1	3:1
AAA	7:1	4.5:1

What counts as large text? Text that is at least 18pt (24px) in its regular weight, or 14pt (18.66px) when bold. Below these sizes, the stricter threshold applies.

How Contrast Ratio Works

The contrast ratio is a number from 1 (identical colors — invisible text) to 21 (maximum possible — black on white). It is calculated using the relative luminance of the two colors:

Contrast = (L1 + 0.05) / (L2 + 0.05)

Where L1 is the relative luminance of the lighter color
and L2 is the relative luminance of the darker color.

Relative luminance of each RGB channel (normalized 0-1):
  if c ≤ 0.03928: c' = c / 12.92
  else: c' = ((c + 0.055) / 1.055) ^ 2.4

L = 0.2126 × R' + 0.7152 × G' + 0.0722 × B'

The formula is specified by the W3C and is what every compliant contrast checker uses.

Why These Thresholds?

WCAG's contrast thresholds are based on research on visual perception and readability. Roughly:

3:1 is the minimum for very large text and non-text UI elements
4.5:1 is the minimum for regular body text that most people can read comfortably
7:1 is the enhanced level for users with moderate low vision or in difficult viewing conditions

These are not arbitrary — they reflect actual thresholds at which text readability drops dramatically for users with various vision conditions.

What Fails WCAG

Common design choices that fail WCAG AA:

Light gray text on white — placeholder text, secondary labels and "subtle" text often fail
Bright colors on white — yellow, lime green, light pink usually fail
Colored text on colored background — unless both are carefully chosen
Brand colors used for text — many brand blues and greens fail at 4.5:1 on white
White text on brand color — often just fails (like white on yellow or white on light blue)

How to Fix Failing Contrast

1. Darken the text

The fastest fix. Reduce the lightness of your text color until it passes. A common rule: a text color with lightness below 50% usually passes on white.

2. Lighten the background

If you are using a tinted background, increase lightness toward white. Most AA-compliant backgrounds are above 90% lightness.

3. Increase font size

If the text is close to 4.5:1 but not quite, increasing font size to 18pt+ allows you to use the 3:1 threshold instead. This is a valid fix but note that it changes the visual design.

4. Bold the text

Similarly, bold text at 14pt+ qualifies as "large" and can use the 3:1 threshold.

5. Use a solid color instead of a gradient

Text on gradient backgrounds is tricky — the contrast varies across the gradient. Use a solid background or a semi-transparent overlay instead.

WCAG AA in Practice

Everyday color pairings that pass AA

#000000 on #FFFFFF: 21:1 (maximum)
#15243B on #FFFFFF: 14.53:1 (dark navy on white)
#4A5A75 on #FFFFFF: 7.12:1 (medium gray on white)
#FFFFFF on #155EEF: 4.86:1 (white on primary blue)
#FFFFFF on #D93025: 5.34:1 (white on danger red)
#0F9D58 on #FFFFFF: 3.64:1 (success green — large text only)

Everyday color pairings that fail AA

#7A8699 on #FFFFFF: 3.05:1 (light gray — fails normal text)
#FFC107 on #FFFFFF: 1.74:1 (yellow — fails all text)
#FFFFFF on #FFC107: 1.74:1 (white on yellow — fails all text)
#E3EAF5 on #FFFFFF: 1.18:1 (very light blue — fails all text)

Beyond Text Contrast

WCAG accessibility also involves:

Focus indicators: Visible keyboard focus must have 3:1 contrast against adjacent colors
Icons and UI components: Essential icons must meet 3:1 contrast
Charts and graphs: Data must not rely on color alone — use patterns, labels or shapes
Error states: Error indicators must not rely on color alone
Links in text: Links in body text must have sufficient contrast AND a non-color indicator (underline)

Level AAA — When You Need It

AAA is recommended for:

Government and public sector websites (often legally required)
Healthcare and medical information
Educational content for young or elderly users
Critical financial information
Content for users with known vision impairment

AAA is not always practical for every element — even W3C acknowledges that some AAA criteria are not achievable for every website. But for text contrast, achieving AAA is straightforward: use near-black text on white backgrounds for body content.

Common Myths

"My colors look fine to me"

Your perception is not the standard. Users with low vision, older users, and users on mobile in daylight see your colors very differently.

"AA is enough"

For legal compliance in many jurisdictions, yes. For real usability, aim higher — especially for body text. 7:1 is not much harder to achieve and dramatically improves readability.

"WCAG is just for disabled users"

WCAG contrast improvements benefit everyone — you benefit when reading on your phone in sunlight.

Tools to Check Contrast

Contrast Checker — check any two colors
WCAG Contrast Checker — detailed WCAG-specific validation
Text Contrast Checker — text-focused testing
Accessible Color Palette — generate WCAG-compliant palettes

Frequently Asked Questions

Open Contrast Checker →