Home › Shopify Theme Store accessibility report

Shopify theme accessibility: we tested all 340 themes in the Theme Store

Automated WCAG results for every theme demo store, including a contrast measurement of each add-to-cart button.

Scans ran on 19 September 2026 using axe-core 4.10.2. Data free to download and reuse under CC BY 4.0.

What we found

Shopify does not publish install counts for themes, so there is no honest way to pick the "most popular" ones. We audited the whole catalogue instead. Every theme listed in the Shopify Theme Store English sitemap on 19 September 2026 was scanned: 340 themes, of which 335 had a demo store that answered on both pages we asked for. For each theme we loaded the demo home page and one product page, injected axe-core, and recorded every rule that reported a violating element.

Almost nothing came back clean. 332 of the 335 scannable themes (99%) had at least one violation across the two pages, and the median theme failed six distinct rules. Only three themes, all of them free Shopify-built themes, finished both pages with no violations at all.

Text contrast was the single most common WCAG failure: 240 themes (72%) had at least one element below the ratio WCAG 1.4.3 requires. That matches what we see on merchant stores every day. Contrast failures come from a handful of color values in the theme settings, which means one theme decision can put hundreds of failing elements on every page of a store.

These are vendor demo stores with vendor colors and vendor content. They are the starting point a merchant buys, not the finished store. That cuts both ways, and the section on what this means for your store spells out how.

The add-to-cart buttons that fail WCAG AA

We singled out the primary add-to-cart control on each product page because it is the element that takes the money. Of the 332 buttons we located, 13 were disabled "Sold out" controls, which WCAG 1.4.3 exempts, and a further group sat on gradients or images where no single background color exists. That left 302 buttons with a measurable flat-color contrast. 29 of them (10%) fail the WCAG AA threshold for their text size, confirmed by two independent measurements.

The worst is at 2.05:1 against a required 4.5:1, which is white text on a mid-green fill. Several of the failures sit on themes that cost more than $300. Price is not a proxy for accessibility here: the free Shopify themes had no failing buy button at all.

Click or press Enter on a column heading to sort. Ratios are from the rendered screenshot of the button in its default state.

The last three rows are worth a note. Noble at 4.48:1 and District at 4.49:1 miss the threshold by a rounding error. They are still failures under the letter of WCAG, and they show how close a lot of buttons sit to the line: a small change in brand color pushes them either way.

Buttons where our two methods disagree

We measured every button twice, once from the browser's computed styles and once from a screenshot of the rendered button. On 14 buttons the two methods reached opposite verdicts, usually because the theme paints the button with a pseudo-element or an overlay that the style walk cannot see. We excluded all of them from the failure count rather than guess. They need a human to look at them: Athora, Beyond, Emerge, Gain, Handmade, Loft, Lyra, Modular, Motto, Piano, Prompt, Shapes, Veena, Zyra.

The rules themes fail most

Contrast is the headline, but it is not the only pattern. These are the ten axe rules with the widest reach across the catalogue, counted as the number of themes with at least one violating element on either page. Rules marked as best practice are not WCAG failures in themselves, but they point at structure that screen reader users rely on.

Three of these are yours to fix rather than the theme vendor's. image-alt fires on product photos you upload, link-name on icon links with no accessible text, and heading-order on sections you rearrange in the customizer. Buying a cleaner theme will not clear them.

What this means for your store

A theme result is not a store result. You pick your own colors, you upload your own images, and you install apps that inject their own markup into the page. So treat the table above as a risk signal, not a verdict:

• If your theme is in the failing list, check your own buy button. If you kept the vendor's default colors, you have inherited the failure. If you set your own brand color, you may have fixed it or made it worse.
• If your theme is not in the list, you can still fail. The most common way is a brand color applied to buttons in the theme settings, which the demo never used.
• If your theme had zero violations, that covers the vendor's demo content only. Your product images, your app embeds and your custom sections are all untested.

How to fix a failing buy button

In most themes this is a settings change, not a code change, and it takes about two minutes.

1. In your Shopify admin open Online Store, then Themes, then Customize on your live theme.
2. Open Theme settings, then Colors. Find the color scheme the product page buttons use. Newer themes group these as schemes, older ones list a single "Button background" and "Button text" pair.
3. Darken the button background, or switch the button label to a color that clears the threshold against it. White text usually needs a noticeably darker fill than brand palettes suggest.
4. Save, then test the exact pair in our color contrast checker before you move on.

The rule in one sentence: the label on the button needs a contrast ratio of at least 4.5:1 against the button's background, or 3:1 if the text is at least 24px, or 18.66px and bold.

Fix it in the theme settings rather than with custom CSS on one template, so the change follows every button on the store. Then check the rest of the page, because a theme that fails contrast on the buy button usually fails it on prices, badges and helper text too. That is what a full site scan is for, and the wider list of what to check is in our ADA compliance checklist. If you want the Shopify-specific version of the legal picture, see our guide to Shopify ADA compliance.

Methodology

We are publishing the method in full so anyone can check the numbers or repeat the audit.

• Date. Scans ran on 19 September 2026, between 07:13 and 08:05 UTC.
• Sample. Every theme listed in the Shopify Theme Store English theme sitemap, which was 340 unique themes on that day. Shopify does not publish install counts, so "most installed" cannot be measured and we audited the whole catalogue instead. For each theme we used the demo store of the theme's default preset.
• Pages. Two per theme: the demo home page and the first product page linked from it, falling back to the all-products collection. Desktop viewport 1366 by 900, headless Chromium, 2.5 seconds of settle time after the page loaded.
• Tooling. The AdaClear scanner running axe-core 4.10.2, with the rule tags wcag2a, wcag2aa, wcag21a, wcag21aa, wcag22aa and best-practice. Shopify's own injected preview bar was excluded from the scan, because it is Shopify's interface rather than the theme's.
• Buy button contrast. On each product page we located the primary add-to-cart control by form action, button name, common theme classes, then by label text. Shopify's dynamic "Buy it now" button is excluded because Shopify renders it, not the theme. We then measured the button twice: once from computed styles, compositing the element and ancestor backgrounds, and once from a screenshot of the rendered button, taking the most frequent color as the background and the most distant color with at least 2% of the remaining pixels as the text. Both use the WCAG 2.2 relative luminance formula. The threshold is 4.5:1, or 3:1 for large text.
• Exclusions. A button counts as failing only when both methods fail. Disabled and "Sold out" buttons are excluded, because WCAG 1.4.3 exempts inactive components. Buttons whose rendered background is not a flat color, such as gradients and images, are indeterminate and excluded. The 14 buttons where the methods disagree are listed above for manual review and are not counted as failures.
• Counting. A failing rule is an axe rule with at least one violating element on a page. Best-practice rules are reported separately from WCAG success criteria, because they are not WCAG failures.
• Politeness. We read and honoured each demo host's robots.txt, left at least 2 seconds between requests to the same host, and kept at most four hosts in flight.

Limitations

Things this data does not tell you, stated plainly:

• Demo content, not real stores. Merchants change colors, fonts, images and structure. A theme that passes here can fail after customisation, and a theme that fails here can be fixed in the customizer.
• Automation catches a minority of issues. Roughly 30 to 40 percent of WCAG problems are machine detectable. Zero violations does not mean compliant.
• One preset per theme. Vendors ship several color presets, and the others may score differently.
• One moment in time. Themes update frequently, so a failure listed here may already be fixed. The date is on every row for that reason.
• Some demos redirect to a localised language, which changes the button label but not the colors we measured.
• Five themes are missing because their demo returned an error or a 404 during the run.

Questions