Fix · Serious · cited in audits
How to fix: low color contrast
Body text in pale gray on white, sale prices in faint red, focus rings invisible against background. Text must hit 4.5:1 (regular) or 3:1 (large). UI components and graphical info need 3:1.
- WCAG references
- 1.4.3, 1.4.11
- Severity
- Serious
What it looks like in the wild
Body text in pale gray on white, sale prices in faint red, focus rings invisible against background.
The screen-reader user, keyboard user, or low-vision user encountering this issue does not get an error message. The page just stops working for them. Which is why this kind of bug rarely shows up in your error tracker; it shows up in support tickets, lawsuits, and abandoned conversions.
Why it fails WCAG
Text must hit 4.5:1 (regular) or 3:1 (large). UI components and graphical info need 3:1.
Map this back to 1.4.3, 1.4.11 when you log the bug. Auditors and procurement teams expect that mapping; "broken" is not enough context.
The wrong pattern (avoid)
body { color: #aaa; background: #fff; } /* 2.3:1, fails */The right pattern (copy this)
body { color: #525252; background: #fff; } /* 7.4:1, AAA */
.muted { color: #6b7280; } /* 4.6:1, AA */Notes from real audits
Use a contrast checker; never trust the eye.
Test brand colors against your full palette before standardising.
Dark mode often regresses light-mode wins — audit both themes.
Related fixes
How to fix: missing alt text on images
1.1.1
How to fix: form fields without labels
3.3.2, 1.3.1, 4.1.2
How to fix: missing H1 / wrong heading order
2.4.6, 1.3.1
How to fix: missing skip-to-main-content link
2.4.1
How to fix: keyboard trap in modal or widget
2.1.2
How to fix: missing lang attribute on <html>
3.1.1
Find every accessibility issue on your site in 60 seconds.
Free public scan. No card. AI-generated fixes for every issue we find.