Insufficient colour contrast in Shopify

WCAG 1.4.3 (AA) · EN 301 549 9.1.4.3

There is {fontSize} text with a contrast ratio of {ratio} against its background, where the standard requires {required}.

Where to change it in Shopify

In the theme editor, Settings › Colors lets you change the theme colour schemes without touching code.

Shopify themes are edited under Online Store › Themes. "Edit code" opens the Liquid templates. Many colour and typography settings can be changed without coding, from the theme editor.

As it is

/* 2.85:1 — fails */
.old-price { color: #999999; background: #ffffff; }

As it should be

/* 4.83:1 — passes */
.old-price { color: #717171; background: #ffffff; }

Why it matters

This is the most widespread barrier and the one that affects the most people: anyone with tired eyes, a phone in bright sunlight, or a cheap screen. You do not need a diagnosed disability to be unable to read light grey on white.

On other platforms

Insufficient colour contrast in WooCommerce

Does your Shopify shop have this failure?

We detect your platform automatically and give you the instructions for it. Free, no sign-up.