What is WCAG contrast ratio?
- WCAG defines minimum contrast ratios to ensure text is readable by people with visual impairments.
- AA is the standard legal requirement in most countries. AAA is the enhanced level.
- Poor contrast is one of the most common accessibility failures on the web.
WCAG contrast requirements
For normal text (under 18pt): AA requires 4.5:1, AAA requires 7:1.
For large text (18pt+ or 14pt+ bold): AA requires 3:1, AAA requires 4.5:1.
For UI components (buttons, inputs, icons): AA requires 3:1.
Common contrast mistakes
Light gray text on white is the most frequent AA failure — it looks clean in a design tool but often lands below 3:1 in practice. Placeholder text inside form fields is easy to overlook since it's not "real" content, but it still needs to meet the same ratio as any other text a user has to read. And a color combination that passes in light mode doesn't automatically pass in dark mode — check both themes separately if your site supports a toggle.
Beyond the ratio number
Passing WCAG AA is a minimum, not a guarantee of readability for everyone. Color blindness affects roughly 1 in 12 men and 1 in 200 women, and it doesn't care about contrast ratio — a red/green combination can pass 4.5:1 and still be indistinguishable to someone with red-green color blindness. Never use color alone to convey meaning (error states, required fields, status indicators); pair it with an icon, label, or pattern too.
Should you aim for AAA instead of AA?
Low contrast text is the single most common accessibility failure on the web — it shows up on the large majority of home pages tested in independent web-wide audits, so clearing AA at all already puts a page ahead of most of the internet. AAA (7:1 for normal text) is rarely targeted for full designs because it restricts the usable palette sharply — at that ratio you're close to pure black on white or white on near-black, which rules out most brand colors as body text. Most teams treat AA as the real bar and reserve AAA for content where legibility matters most, like long-form reading text.
This is a legal risk, not just a design nitpick
Web accessibility lawsuits in the US have climbed sharply in recent years, with thousands filed annually against businesses of every size, not just large enterprises. Contrast failures are consistently the single most cited issue in these cases, ahead of missing alt text or unlabeled form fields — largely because it's the easiest violation to demonstrate and the easiest to have fixed before it becomes a real problem. Checking contrast isn't just about a wider audience being able to read your site comfortably; for any business with a public-facing website, it's genuine legal exposure that a five-minute check can meaningfully reduce.