# Elements must meet minimum color contrast ratio thresholds

Source: https://www.fixreports.com/issues/color-contrast

WCAG 1.4.3 Contrast (Minimum) · Level AA

Some text doesn't stand out enough from its background to be read by people with low vision.

## 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
1. Find the text with low contrast and note its text and background colors: a contrast checker or your browser's developer tools show both.
2. 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).
3. Pay special attention to sale badges, placeholder text, footer links and buttons on images.

### On Shopify
1. Find the text with low contrast and note its text and background colors: a contrast checker or your browser's developer tools show both.
2. 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.
3. Pay special attention to sale badges, placeholder text, footer links and buttons on images.

### On WooCommerce and WordPress
1. Find the text with low contrast and note its text and background colors: a contrast checker or your browser's developer tools show both.
2. 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).
3. 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.

## Sources
- axe-core rule documentation (Deque): https://dequeuniversity.com/rules/axe/4.13/color-contrast
- Understanding WCAG 1.4.3 (W3C): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum