WCAG AA · 1.4.3Checked on every planEU · US
Text is too faint against its background
What color contrast does WCAG require?
At least 4.5:1 between text and background, or 3:1 for large text (WCAG 1.4.3, the web accessibility standard). Light grey prices and white text on pale banners are the usual misses. Logos are exempt.
Why it matters
Low contrast text is the most common failure on the web: WebAIM’s 2026 study found it on 83.9% of a million home pages. It locks out people with low vision and older shoppers, and anyone reading a phone in sunlight.
How to fix it
Shopify
- Go to Online Store, Themes, Customize, then Theme settings, Colors, and edit the color scheme the failing section uses.
- Darken the “Text” color of that scheme, or lighten its background, then check the ratio again.
- For text over a banner image, turn up the image overlay opacity in the section’s settings.
WooCommerce
- Classic themes: Appearance, Customize, Colors. Block themes: Appearance, Editor, Styles, Colors.
- Change the palette color, not single blocks, so every page picks up the fix.
- Page builders such as Elementor keep their own global colors: change them there too.
In the code
- Darken the text or lighten the background until the ratio is at least 4.5:1 (3:1 for large text).
- Fix the color in your design tokens or theme variables, not one element at a time.
Automated tools can’t judge text inside images, text over photos or video, or contrast in hover and focus states they never trigger. They also can’t tell whether color alone is carrying meaning, such as a red “sold out” label.
The standard behind this rule
A plain summary, not legal advice.