Skip to content
StoreA11y

Shopify · 1.4.3 Contrast (Minimum) (Level AA)

Text colour does not contrast enough with its background on Shopify

Some pieces of text fail the minimum contrast ratio. WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold). Low-contrast grey-on-white body copy, pale placeholder text, and light text over a hero image are the usual causes. This is the most frequently cited issue in automated scans and appears constantly in filed complaints.

Frequently litigated

Low-contrast text is the single most common automated failure and appears in most demand letters.

Which WCAG criterion this fails

  • Does not meet 1.4.3 Contrast (Minimum) (Level AA)

How to fix it on Shopify

Everything below is done from Online Store > Themes > Edit code. Take a copy of the theme before editing.

  1. Most of this is fixable without touching code: Online Store > Themes > Customize > Theme settings > Colors. Darken the body text colour and the "subdued"/secondary text colour.
  2. A common quick win: #767676 is the lightest grey that passes 4.5:1 on pure white. Anything lighter than that fails. #949494 is the lightest that passes 3:1 for large text.
  3. Sale badges and button text are frequent failures — white text on a light brand colour rarely passes. Either darken the badge background or switch the badge text to near-black.
  4. Text over a photographic hero: add a solid or gradient overlay behind the text, or move the text into a solid panel. Theme customizer usually exposes an "image overlay opacity" setting; 40% or more is typically needed.
  5. Placeholder text in the search and newsletter inputs is styled by the theme and is often #ccc. Fix it in assets/base.css with ::placeholder { color: #6b6b6b; }.
  6. Verify each change with a contrast checker before shipping — eyeballing it does not work.

Where this usually lives

Theme settings > Colors in the customizer first; then assets/base.css or assets/theme.css custom properties such as --color-foreground, and snippets/card-product.liquid for badges

Paths given for Dawn and its derivatives (Sense, Craft, Refresh, Studio). A heavily customised theme may differ; the CSS selector in your scan report points at the exact element.

Code

/* Lightest greys that pass on a white background */
:root {
  --color-text: #1a1a1a;        /* 16.1:1 — body copy */
  --color-text-subdued: #595959; /* 7.0:1 — safe for secondary text */
  /* #767676 = 4.54:1, the absolute floor for normal text */
}

::placeholder { color: #6b6b6b; opacity: 1; }

.onsale { background: #b3001b; color: #ffffff; } /* 7.4:1 */

How to confirm it is fixed

Re-run the scan. This rule should drop out of the findings entirely. If the instance count falls but does not reach zero, the same defect exists in another template — product cards and quick-view modals are the usual second home for it.

Effort: low. Rule id: color-contrast (axe-core).