What this rule checks
Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds.
Why it matters
WCAG 1.4.3 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Faint prices, badges and banners are hard to read for people with low vision, and for everyone in bright light.
How to fix it
On any website
- Find the text with low contrast and note its text and background colors: a contrast checker or your browser's developer tools show both.
- Update the text or background color in your theme's CSS until the ratio is at least 4.5:1 (3:1 for text 24px and larger, or 18.66px bold).
- Pay special attention to sale badges, placeholder text, footer links and buttons on images.
On Shopify
- Find the text with low contrast and note its text and background colors: a contrast checker or your browser's developer tools show both.
- In Online Store > Themes > Customize > Theme settings > Colors, darken the text color or lighten the background for the affected color scheme until the ratio is at least 4.5:1.
- Pay special attention to sale badges, placeholder text, footer links and buttons on images.
How to check the fix
- Re-run the scan and confirm color-contrast no longer appears.
- Spot-check with a contrast checker on the exact colors.
How FixReports finds it
Our scan runs the axe-core rule color-contrast in a real Chrome browser on every page it tests, and reports each failing element with its page, its markup and, where it applies, a screenshot.
An automated test confirms that this specific problem is present. It can't tell whether the rest of the page is accessible: some barriers only show up when a person checks the page.