Colour contrast on Shopify themes: how to check and fix it

By AbleAisle. Updated .

Low colour contrast is one of the most common accessibility problems on online stores. Light grey text on white, white text over a busy photo, or a pale "Sale" badge can be hard or impossible to read for people with low vision, colour vision deficiencies, or anyone looking at a phone in bright sunlight.

This guide explains the contrast rules in WCAG, where contrast problems usually appear on Shopify themes, how to check them, and how to fix them in the theme editor.

What the guidelines say

The Web Content Accessibility Guidelines (WCAG) 2.1 set these minimums at Level AA:

  • Text: 4.5:1. Success criterion 1.4.3, Contrast (Minimum) requires a contrast ratio of at least 4.5:1 between text and its background.
  • Large text: 3:1. Large text is at least 18 point (roughly 24 CSS pixels), or at least 14 point (roughly 18.5 CSS pixels) when bold.
  • Buttons, form fields and icons: 3:1. Success criterion 1.4.11, Non-text Contrast requires 3:1 for the visual parts needed to identify controls (like the border of a text field) and for meaningful graphics such as icons.

There are exceptions. Logos and brand names don't have a contrast requirement, and neither does purely decorative text or text on disabled controls.

A related rule, success criterion 1.4.1, Use of Color (Level A), says colour must not be the only way information is shown. For example, if a sale price is only shown in red, add a strikethrough on the old price or a "Sale" label too.

The contrast ratio runs from 1:1 (no contrast, the same colour) to 21:1 (black on white).

Where contrast problems hide on Shopify themes

These are the places worth checking first:

  • Text over images. Image banners and slideshows with white headings over a light or busy photo. The ratio changes across the image, so check the lightest area behind the text.
  • Muted text. Light grey used for prices, vendor names, "Tax included" notes, footer links and form placeholder text.
  • Badges and labels. Sale, sold out and "new" badges, often small text on a coloured background.
  • Secondary buttons and links. Outline buttons with a thin pale border, and links styled only with a slightly different colour.
  • Announcement bars. Small text on brand-coloured strips.
  • Form fields. Light borders on email sign-up and search fields, which fall under the 3:1 non-text rule.

How to check contrast

  1. Use a contrast checker. Paste the two colour values (hex codes) into a free tool such as the WebAIM Contrast Checker. It shows the ratio and whether it passes for normal and large text.
  2. Use your browser's developer tools. In Chrome or Edge, right-click some text, choose Inspect, and click the colour swatch next to the color property. The colour picker shows the contrast ratio against the background.
  3. Run an automated scan. Automated checkers such as axe and WAVE, and Shopify apps built on them, flag text that fails across many pages at once. They work well for solid backgrounds. For text over images or gradients, they often can't calculate the ratio, so check those by eye with a contrast checker.

How to fix contrast in the Shopify theme editor

Most Online Store 2.0 themes, including Shopify's free themes, control colours with colour schemes. In the Shopify admin go to Online Store > Themes > Customize, then open Theme settings and look for Colors. A scheme sets the background, text, button and button label colours that sections use.

  • Adjust the scheme, not each section. Darken the text colour or the button colour in the scheme and every section using it is fixed at once. Re-check the ratio after each change.
  • Darken image overlays. Image banner and slideshow sections usually have an overlay opacity setting. Increasing it puts a dark layer between the photo and the text. Alternatively, choose a calmer image or move the text into a solid box.
  • Increase size or weight. Bold, larger headings only need 3:1 instead of 4.5:1. That's not a fix for small body text, though.
  • Check badges separately. Sale and sold-out badge colours are often set in their own theme settings.
  • Ask your developer about custom CSS. If your theme has hard-coded colours that the editor doesn't control, a developer can change them in the theme code.

Keep a note of your original colours before you change anything, so you can revert if needed. Shopify themes also let you duplicate a theme first and test changes on the copy.

How AbleAisle helps

AbleAisle, our Shopify app, scans the pages customers use most (home, collections, products, cart and information pages) with automated checks based on WCAG 2.1 AA, including colour contrast. For each issue it shows which page and element is affected, explains it in plain English, and gives steps for the theme editor, plus technical details for your developer. AbleAisle doesn't change your theme or add an overlay; you stay in control of your design.

This guide is general information, not legal advice. Automated checks find many contrast problems but not all of them, and no tool can guarantee that a store meets every accessibility requirement or law.

More guides