What is WCAG and why does color contrast matter?
The Web Content Accessibility Guidelines (WCAG) are internationally recognized standards that define how to make web content accessible to people with disabilities — including those with low vision, color blindness, and other visual impairments.
Color contrast measures how distinct a foreground color (text, icons) is from its background. Insufficient contrast makes content difficult or impossible to read for millions of users. In the US alone, roughly 8% of men have some form of color vision deficiency.
WCAG contrast ratio explained
The contrast ratio is calculated from the relative luminance of two colors, expressed as a ratio from 1:1 (identical colors, no contrast) to 21:1 (black on white, maximum contrast).
The formula compares perceptual brightness — a light gray on white might look fine to someone with typical vision but fail for someone with low contrast sensitivity.
WCAG 2.1 conformance levels
Level A — Minimum
The baseline requirements. Color alone must not be the only way to convey information.
Level AA — Standard (required by most regulations)
- Normal text (below 18pt / 14pt bold): minimum 4.5:1 contrast ratio
- Large text (18pt+ / 14pt+ bold): minimum 3:1 contrast ratio
- UI components and graphics (buttons, icons, borders): minimum 3:1 contrast ratio against adjacent colors
Level AAA — Enhanced (recommended for best accessibility)
- Normal text: minimum 7:1 contrast ratio
- Large text: minimum 4.5:1 contrast ratio
Common misconceptions
"Dark mode automatically passes contrast"
Not true. Dark backgrounds with dark text, or light backgrounds with light text, both fail. The background/foreground relationship is what matters, not the absolute lightness.
"If it looks fine to me, it passes"
Designers with typical color vision often underestimate how difficult low-contrast text is for others. Always measure — never guess.
"Decorative elements don't need to pass"
Partially true — purely decorative images or text don't require passing contrast. But if a decorative element conveys meaning (e.g., a colored label indicating status), it must pass.
How to test color contrast
- LiveTheme — shows real-time contrast ratios for every color pair in your theme, with WCAG AA/AAA badges as you edit.
- WebAIM Contrast Checker — quick manual checks.
- Axe DevTools — automated accessibility audit in browser devtools.
- Colour Contrast Analyser — desktop app that can sample colors from any screen.
- Chrome DevTools — inspect any element → Accessibility panel shows its contrast ratio.
Fixing failing contrast
When a color pair fails, your options are:
- Darken the foreground — move text color toward black/very dark.
- Lighten the background — increase the lightness of the surface.
- Increase font size — large text needs only 3:1 to pass AA.
- Use weight — bold text at 14pt only needs 3:1 (same as large text).
- Switch the color approach — sometimes the brand color simply can't achieve sufficient contrast at a given size; use it as an accent but not as text.
Color blindness considerations
~8% of males have color vision deficiency. The most common type is red-green color blindness (deuteranopia/protanopia). Practical rules:
- Never rely on red vs. green alone to convey status — add icons or labels.
- Test your design with a color blindness simulator (e.g., Coblis, or Figma plugins).
- Ensure interactive elements are distinguishable by shape and text, not just color.
WCAG 3.0 and APCA — what's coming
WCAG 3.0 (in development) is expected to replace the contrast ratio formula with APCA (Advanced Perceptual Contrast Algorithm), which better models how humans perceive contrast. Key differences:
- APCA is font-size and weight aware — thin small text needs much higher contrast than large bold text.
- It produces a "Lc" score rather than a ratio, with recommended minimums per text category.
- More nuanced — some color pairs that fail WCAG 2.1 pass APCA, and vice versa.
For now, design to WCAG 2.1 AA as the baseline. LiveTheme shows WCAG tiers for every color pair you edit.