Insufficient Color Contrast: The 4.5:1 Rule Explained

Light grey text on a white background looks clean in a design mockup. For millions of people with low vision — including most people over 40, whose contrast sensitivity naturally declines with age — it can be difficult or impossible to read. WCAG's answer to "how much contrast is enough" isn't a subjective judgment call; it's a precise mathematical ratio, which is exactly why it's one of the most reliably automated checks available. Industry data puts insufficient contrast at roughly 68% of ADA web accessibility complaints — the third most-cited issue after alt text and form labels.

The actual numbers

WCAG Success Criterion 1.4.3 (Contrast Minimum), Level AA, requires:

• 4.5:1 for normal body text
• 3:1 for large text — defined as 18pt+ regular weight, or 14pt+ bold

The ratio is calculated from the relative luminance of the text color and the background color, not a simple visual estimate — this is why a scanner like axe-core can compute it exactly and flag a failure with zero false positives, unlike almost any other WCAG check.

Where this actually breaks in practice

• Grey-on-white or grey-on-grey text — the single most common source, usually from a design system's "muted" or "secondary" text color being set too light
• Text over images or gradients — a caption that has enough contrast against the lightest part of a background photo but not the darkest
• Placeholder text in form fields, which designers frequently style lighter than body text by convention, often dropping well below 4.5:1
• Disabled-looking buttons that are actually still interactive and readable text, not truly disabled

How to fix it

Pick colors that meet the ratio, and verify with a real contrast calculator rather than eyeballing it — the difference between passing and failing is often a shade most people can't distinguish by eye. WebAIM's contrast checker and Chrome DevTools' built-in color picker (which shows the live ratio as you adjust) are both free and accurate.

/* Before: 2.8:1 — fails AA */
color: #999999;
background-color: #ffffff;

/* After: 4.6:1 — passes AA for normal text */
color: #767676;
background-color: #ffffff;

If a design system's token is the actual source of the failure, fix the token once rather than patching individual pages — a single "muted foreground" color that's too light usually cascades into dozens of individual violations across a site.

A more accurate model is coming, but isn't the standard yet

APCA (Accessible Perceptual Contrast Algorithm) is a newer, perceptually-based contrast model being developed for WCAG 3.0 that more accurately reflects how the human eye actually perceives contrast — WCAG 2.x's ratio formula is known to both over- and under-flag certain color combinations. AllyProof reports APCA scores as an informational preview alongside the standard WCAG check, but 2.x's 4.5:1/3:1 ratio is still the enforceable standard today — treat APCA results as a heads-up on borderline cases, not a replacement.

Official references

• Deque University: color-contrast
• W3C Technique G18