How to fix low color contrast in a Shopify theme

Low color contrast means text that is too faint against its background: light grey prices, pale sale badges, white text on a bright photo. People with low vision, color blindness or a phone in bright sunlight struggle to read it. In most Shopify themes you can fix it from the theme editor's color settings, without code. It is also the most common issue we found: in our scan of 501 Shopify homepages, 63% of stores had low-contrast text.

The short answer

• Normal text needs a contrast ratio of at least 4.5:1 against its background.
• Large text needs at least 3:1. Large means 18pt (24px), or 14pt (about 18.7px) if bold.
• In Shopify, adjust the colors in Online Store > Themes > Customize > Theme settings > Colors, then check each section that uses a different color scheme.

What WCAG asks for

WCAG success criterion 1.4.3 Contrast (Minimum) says "the visual presentation of text and images of text has a contrast ratio of at least 4.5:1", with 3:1 for large-scale text. The ratio is not rounded: 4.49:1 fails.

There are exceptions:

• Text that is part of a logo or brand name has no contrast requirement.
• Pure decoration and text in inactive controls, such as a disabled button, are exempt.

Where low contrast hides in Shopify themes

How to fix it in the theme editor

1. Go to Online Store > Themes and click Customize.
2. Open Theme settings > Colors. Recent Shopify themes use color schemes: each scheme sets the background, text, buttons and other colors for the sections that use it.
3. For each scheme, check the text color against the background color with a contrast checker such as the WebAIM Contrast Checker.
4. Darken the text (or lighten the background) until normal text reaches 4.5:1.
5. Open sections that sit on images, such as image banners, and turn on the overlay or increase its opacity so the text has a solid backdrop.

When you need CSS

Some colors are not exposed in the theme editor, often sale prices or badges. Your developer can override them in the theme's stylesheet or the Custom CSS setting:

.price--on-sale .price-item--regular {
  color: #5a5a5a;
}
.badge--sale {
  background: #b3261e;
  color: #ffffff;
}

Class names differ between themes, so check the actual element in your browser's developer tools first.

WooCommerce stores

Colors usually live in Appearance > Customize or, for block themes, in the site editor's Styles. Page builders such as Elementor have their own global colors, which override the theme's.

How to check your fix

1. Run a free scan of your homepage or a product page. Low contrast may show up as "Text has insufficient color contrast", with the number of affected elements. The free scan shows the most serious issues on the page you enter, so it may not appear if others rank higher.
2. Check every color scheme you use, plus hover and sale states.
3. Look at the page on a phone outdoors. If you squint to read it, so do your customers.

For the full picture across your store (25 or 150 pages, depending on the plan), with the affected elements on each page and the ratios to aim for, see what a FixRamp report contains. Also see our guide to missing alt text on Shopify.