WCAG Color Accessibility Guide: Contrast Ratios Explained
A practical guide to WCAG color contrast requirements. Learn the difference between AA and AAA, how to calculate contrast ratios, and common mistakes designers make.
Color accessibility is one of the most commonly overlooked aspects of web design — and one of the most impactful. About 8% of men and 0.5% of women have some form of color vision deficiency. Even users with perfect color vision struggle to read low-contrast text in bright sunlight or on cheap screens. WCAG (Web Content Accessibility Guidelines) gives us a measurable standard to ensure text is readable for everyone.
What is WCAG?
WCAG is a set of guidelines published by the W3C (World Wide Web Consortium) that defines how to make web content accessible to people with disabilities. The current version, WCAG 2.1, includes success criteria for color contrast under the Perceivable principle. WCAG 2.2 (2023) builds on this without changing the core contrast requirements. Compliance is required by law in many countries — including the ADA in the US, EN 301 549 in the EU, and the Equality Act in the UK.
Contrast Ratios Explained
Contrast ratio is calculated using the relative luminance of two colors. The formula: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker. Black on white = 21:1 (maximum). White on white = 1:1 (minimum). The human eye can detect differences down to about 3:1, but comfortable reading requires higher contrast, especially for small text.
AA vs AAA: Which Do You Need?
WCAG AA (4.5:1 for normal text, 3:1 for large text) is the legal minimum for most compliance requirements. WCAG AAA (7:1 for normal text, 4.5:1 for large text) is enhanced accessibility — required for some government and healthcare sites. For most product teams: target AA as the floor and AAA where possible. 'Large text' means 18px+ regular or 14px+ bold.
5 Common Color Accessibility Mistakes
1. Using placeholder text that's too light — placeholder is often 40% opacity on white, failing AA. 2. Relying on color alone to convey meaning (e.g. red = error, green = success) — always add an icon or text. 3. Forgetting disabled states — disabled inputs still need 3:1 contrast for their text. 4. Not testing dark mode — a palette that passes in light mode may fail in dark mode. 5. Trusting your eye — colors that look fine to you may fail; always measure with a tool.
How to Check Color Contrast
The fastest way: use a contrast checker tool and enter your foreground and background hex codes. You'll get the exact ratio and WCAG level instantly. For design tools: Figma has a built-in accessibility plugin (A11y). For development: browser DevTools accessibility panel highlights contrast failures. For live sites: axe browser extension flags issues automatically.
Recommended Accessibility Tools
Free tools: colorcode.tools/contrast-checker (instant ratio + WCAG level), colorcode.tools/accessible-colors (find compliant foreground colors for any background), axe DevTools browser extension, WAVE accessibility checker. Design tools: Figma Contrast plugin, Stark (Figma + Sketch). For development: eslint-plugin-jsx-a11y for React, Lighthouse accessibility audit in Chrome DevTools. Build these checks into your design and development workflow rather than auditing after the fact.
Accessibility Is Good Design
Accessible color contrast isn't a constraint — it's a quality signal. High-contrast designs are easier to read for everyone, in all conditions. The designers who internalize WCAG requirements don't think of them as limitations; they think of them as the minimum bar for good work. Start with your text colors, check your interactive elements, and build a habit of running contrast checks before shipping. Your users — all of them — will notice the difference.