How to fix low color contrast in a Shopify theme

Low contrast text, such as pale grey on white or white on a light photo, is hard to read for people with low vision or color blindness, and for anyone using a phone in bright light. It was the problem affecting the most page elements in our own scans of small stores.

The rules in plain English

WCAG 2.1 Success Criterion 1.4.3 (Level AA) says (Understanding Success Criterion 1.4.3: Contrast (Minimum) (W3C WAI)):

• Normal text needs a contrast ratio of at least 4.5:1 against its background.
• Large text needs at least 3:1. "Large" means at least 18 point, or 14 point bold, which the W3C says is roughly 24px, or about 18.5px bold.
• Logos and brand names are exempt, and so is purely decorative text.
• The thresholds are not rounded: 4.499:1 does not pass.

Shopify's theme accessibility guide applies the same thresholds and adds that non-text elements such as input borders and icons should have at least 3:1 against their background (Accessibility for themes (Shopify Help Center)).

What the numbers look like

Where to change colors in Shopify

Shopify's Help Center explains that, depending on your theme, colors are managed with either color palettes (newer themes such as Horizon 4.0.0 and later) or color schemes (most themes, including free Shopify themes released before Horizon 4.0.0) (Customizing theme settings: Colors (Shopify Help Center)).

If your theme uses color schemes

1. From your Shopify admin, go to Online Store.
2. Click Edit theme next to the theme you want to customize.
3. Open theme settings and click Colors.
4. In Schemes, click the scheme you want to change.
5. Click the swatch for the color you want to change (for example text or background) and enter a darker or lighter hex code.
6. Click Save.

Each section of your store uses one of these schemes, so check every scheme, not just the first one (Color customizations settings (Shopify Help Center)).

If your theme uses a color palette

Changing a palette color updates every setting that uses it, which makes it a quick way to fix a low-contrast brand color across the whole store (Customizing theme settings: Colors (Shopify Help Center)). Sections and blocks can also override palette colors, so check any section that has its own color settings.

Text over images and slideshows

Shopify says text over images, including slideshows, banners and videos, needs the same contrast against its background, and notes that some themes let you place a color overlay between the text and the image to improve readability (Accessibility for themes (Shopify Help Center)). Because photos vary from light to dark, an overlay or a solid text background is usually more reliable than picking a text color by eye.

Common contrast traps on stores

• Grey "compare at" prices, sold-out labels and small print under product titles.
• Placeholder text in search and newsletter boxes (WCAG includes placeholder text in this rule (Understanding Success Criterion 1.4.3: Contrast (Minimum) (W3C WAI))).
• White text on pastel buttons and announcement bars.
• Footer text in light grey on a slightly darker grey.
• App widgets (reviews, pop-ups, chat) that have their own color settings outside the theme.

Sources

• Understanding Success Criterion 1.4.3: Contrast (Minimum) (W3C WAI)
• Accessibility for themes (Shopify Help Center)
• Customizing theme settings: Colors (Shopify Help Center)
• Color customizations settings (Shopify Help Center)

Related guides

• How to add alt text to images in Shopify (and what to write)
• What WCAG 2.1 AA means for a small online shop, in plain English
• The most common accessibility problems we found on small Shopify and WooCommerce stores