Skip to content
Accessible Cart

Fixing “Background and foreground colors do not have a sufficient contrast ratio” in Shopify

The most common accessibility failure on Shopify stores. Usually a handful of theme colors cause dozens of flagged elements.

Found on 75.3% of 3,151 Shopify homepages we tested in our 2026 study.

What the message means

WCAG 2.1 asks for a contrast ratio of at least 4.5:1 between text and its background, or 3:1 for large text (24 px, or about 19 px bold). Light gray prices, white text on pale banners and pastel sale badges are the usual suspects.

Low contrast hurts people with low vision, but also everyone reading on a phone outdoors.

Where it comes from in a Shopify theme

In Dawn-based themes (Dawn, Refresh, Sense, Craft, Studio and others) colors live in color schemes under Theme settings → Colors, stored in config/settings_data.json. One low-contrast scheme applied to many sections produces many failures at once.

Text over images is the second source: the heading color is fine, but the image behind it is light.

How to fix it

Darken the text color of the affected scheme rather than changing your brand color everywhere. For text on images, raise the section's image overlay opacity instead of recoloring the text.

Check placeholder text in search and newsletter fields too. Many themes set it with a low opacity:

/* assets/base.css */
.field__input::placeholder {
  /* opacity 0.5 on a light background usually fails; use a real color */
  color: rgb(var(--color-foreground));
  opacity: 0.75;
}

How to verify

Run Google PageSpeed Insights again or use our free check. Both use the same engine (axe-core) for this rule, so the element list should be empty afterwards.

More guides