Free Shopify Color Contrast Checker

Check every color scheme in your Shopify theme for readable contrast in a few seconds. Enter your store address and see which schemes have text, links, buttons or badges that are too faint to read. No install, no sign-up and no email address.

It reads the color schemes your theme publishes, works out the color each piece of text is actually drawn in (Dawn, for example, draws body text at 75% strength), and measures it against the WCAG level AA minimums: 4.5 to 1 for normal text and 3 to 1 for large headings. Works with Dawn, Horizon and the free and paid themes built on them.

Works with any public Shopify store, including yourstore.myshopify.com. Password-protected stores cannot be read from outside.

Check any two colors

For a theme this check cannot read, or a color you are thinking of using, pick a text color and a background.

Text color Background color

Free shipping over $50

Our linen is washed for softness and shipped within two business days.

How to fix a failing color in Shopify

In your Shopify admin, go to Online Store, then Themes, and click Customize. Open Theme settings (the paintbrush or gear icon), then Colors, and click the scheme this check named. Darken the text or lighten the background until the check passes, and press Save. Every section that uses the scheme updates at once, so one fix often clears several pages.

What a quick check cannot see

It reads your theme's color settings, not the finished page. It cannot see text placed over photos or videos, gradient backgrounds (it uses the base color and says so), colors set in custom CSS or by apps, or text in images. Schemes marked as not used on your home page may still be used on other pages. A pass here means the colors themselves are readable, not that every page of your store is.

Fix contrast without picking new brand colors

Remedy is our Shopify app. It corrects color contrast, tap target size, links marked only by color, and the keyboard focus ring through its app block, tests each fix on your store, and discards any that fail. Your live theme is never edited: fixes go into a copy you preview and publish. It also scans your storefront in a real browser with axe-core and keeps a dated record of what was found, fixed and still open. The Audit plan is free.

See Remedy on the Shopify App Store

More free tools: all our free Shopify store checkers.

Questions

Is this checker free?: Yes. There is no sign-up and nothing to install. Results are not stored anywhere.
What contrast ratio does my Shopify store need?: WCAG level AA (version 2.1, which EU law currently points to, and version 2.2 alike) asks for at least 4.5 to 1 for normal text and 3 to 1 for large text (about 24px, or 19px bold). Button labels and links count as normal text.
Why does my body text fail when the color looks dark enough?: Many themes draw body text a little transparent so it looks softer. Dawn draws it at 75% strength, so a dark grey becomes a mid grey on the page. This check measures the color actually drawn, which is what a shopper sees.
Which Shopify themes does it work with?: Dawn and Shopify's free themes built on it, such as Refresh, Sense, Craft and Studio, and Horizon and the themes built on it. Heavily customized versions may not publish their colors in the standard way; use the manual checker for those.
What does "sits over images" mean?: Some schemes have a transparent background because they are meant for text on top of a photo or video. Contrast then depends on the image, so only the parts with a solid background of their own, such as buttons, are measured. Check the rest by eye, or add an overlay to darken the image.
Is there a check for the rest of my store?: Yes: the free Shopify accessibility checker looks for 12 common problems on your home page and a product page, and the free alt text checker finds product images with no description.