Low color contrast
Text that blends into the background is hard to read for people with low vision and in bright sunlight.
See this on your site
Step-by-step fixes by platform
Programmatic guides combine the issue explanation with stack-specific notes and examples where we have them.
What this issue is
Automated tools compare foreground and background colors to thresholds (often 4.5:1 for normal text under WCAG AA). Thin fonts and images behind text complicate measurement.
Why it matters
Contrast affects readability for many users, not only those with diagnosed vision disabilities. Marketing palettes sometimes prioritize brand over legibility.
Fixes
Darken text, lighten background, or add a solid backdrop behind text on busy images. Re-check hover and disabled states.
Examples
- Gray `#999` body text on white often fails WCAG AA for normal size.
- Primary buttons using brand yellow on white without a darker text color.
How to fix
Increase contrast to at least 4.5:1 for normal text (AA). Test hover, disabled, and error states.
Add a solid scrim behind text on photos instead of relying on busy backgrounds.
Platform notes
- WordPress
- Theme customizer colors may override block styles; check front-end, not only the editor.
- Shopify
- Sale badges and countdowns are frequent offenders in custom CSS.
- React
- Tailwind opacity utilities reduce contrast; verify computed colors.
Related: 1.4.3 Contrast (Minimum).
FAQ
- Gradients?
- Test worst-case points; solid overlays often help.
- Large text?
- WCAG allows lower contrast for large/bold text per definition.