We expected worse, honestly.
When we pointed axe-core at the official demo stores for Shopify's 10 most popular free themes, we figured maybe half would pass WCAG 2.1 AA. Our previous scan of SaaS pricing pages had a 70% failure rate. E-commerce templates have carousels, product grids, complex navigation -- plenty of surface area for accessibility problems.
Seven out of ten passed with zero violations. Three failed. And the biggest offender was Shopify's own flagship theme.
What we scanned
Ten free themes from the Shopify Theme Store, all built by Shopify's internal team: Dawn, Sense, Craft, Refresh, Ride, Taste, Studio, Spotlight, Publisher, and Colorblock. For each theme, we scanned the official demo store homepage and the /collections/all page (the product listing page). That gives us two common page types per theme -- the marketing-heavy homepage and the product grid that store owners actually use.
Scanner: axe-core 4.11 via Puppeteer, headless Chromium, WCAG 2.1 AA + WCAG 2.2 AA tags. No manual evaluation, no subjective calls. Just automated checks across roughly 60 WCAG rules per page.
The scan ran on April 20, 2026.
The results
| Theme | Violations | Nodes Affected | Severity | Verdict |
|---|---|---|---|---|
| Dawn | 1 | 36 | Serious | FAIL |
| Studio | 1 | 1 | Serious | FAIL |
| Colorblock | 1 | 1 | Serious | FAIL |
| Sense | 0 | 0 | -- | PASS |
| Craft | 0 | 0 | -- | PASS |
| Refresh | 0 | 0 | -- | PASS |
| Ride | 0 | 0 | -- | PASS |
| Taste | 0 | 0 | -- | PASS |
| Spotlight | 0 | 0 | -- | PASS |
| Publisher | 0 | 0 | -- | PASS |
Pass criteria: zero critical or serious WCAG violations. Moderate and minor violations would still count as a pass, but none of the themes had those either. It was binary -- either completely clean or at least one serious issue.
Dawn: Shopify's flagship theme, and the worst performer
Dawn is the default theme. It's what new Shopify stores get out of the box. It's also the theme with the most GitHub stars, the most documentation, and probably the most installations of any Shopify theme ever built.
It had 36 DOM nodes failing color contrast checks across its homepage and collection page.
The root cause is a color scheme issue. Dawn's demo store uses foreground color #fdfdfd (near-white) against a #ffffff (pure white) background. That's a contrast ratio of 1.01:1. The WCAG AA minimum for normal text is 4.5:1. For large text, it's 3:1. Dawn's ratio isn't even close to either threshold.
The affected elements span the entire page: headings, newsletter subscription labels, email input fields, country/region selectors on the footer, product card links, and prices on the collection page. On the collection page alone, 27 nodes failed -- that's product names and prices that would be effectively invisible to users who depend on sufficient contrast, and that automated tools flag as unreadable.
To be clear: this is a demo store configuration issue, not necessarily a theme code issue. A store owner using Dawn could pick a different color scheme and pass. But the default demo -- the thing Shopify shows to prospective theme users -- fails.
Studio and Colorblock
Studio had a single scrollable-region-focusable violation on its collection page. An element with scrollable content wasn't keyboard-accessible. That means a keyboard-only user could see the content but not scroll to reach all of it. One node, but it's serious severity because it creates a dead end for keyboard navigation.
Colorblock had one color contrast violation, also on the collection page. Same category as Dawn but a much smaller blast radius -- one element instead of 36.
What the seven clean themes share
Sense, Craft, Refresh, Ride, Taste, Spotlight, and Publisher all returned zero violations across both pages. Not even moderate or minor issues. Each theme passed between 56 and 67 axe-core rules (the variation depends on which HTML patterns are present on the page -- more complex pages have more rules to check).
All ten themes are built from the same codebase. Shopify's free themes are all variants of Dawn's Online Store 2.0 architecture. They share component patterns, the same Liquid templating engine, and similar JavaScript. So what separates the clean seven from the failing three?
Color configuration. That's basically it. The seven themes that passed chose color schemes with sufficient contrast for their demo stores. Dawn, Studio, and Colorblock chose color combinations that created contrast failures in their demo configurations.
This is a narrow but important finding. The underlying theme code isn't broken. The demo store setup is.
The incomplete checks
axe-core also reported "incomplete" checks -- things it found but couldn't definitively rule as pass or fail without human judgment. Across all 10 themes, there were 29 incomplete checks. The most common:
- color-contrast (18 instances): Elements where axe-core couldn't determine the actual rendered colors, usually because of background images, gradients, or transparency
- aria-prohibited-attr (6 instances): ARIA attributes that might be invalid for the element's role
- duplicate-id-aria (5 instances): ID attributes used in ARIA references that might be duplicated
These aren't violations. They're flags that automated scanning can't resolve. But they represent the gap between "axe-core says you're clean" and "your site is actually accessible." We estimate axe-core catches 30-40% of real WCAG issues. The rest requires keyboard testing, screen reader evaluation, and manual color contrast checks in context.
What this means if you run a Shopify store
The good news: Shopify's theme team has done solid baseline accessibility work. The core theme architecture handles heading hierarchy, landmark regions, form labels, link names, and ARIA attributes correctly across all ten themes we tested. That's not nothing. Plenty of e-commerce platforms ship themes with broken heading structures or unlabeled buttons as the default.
The risk is in customization. These results are from bone-stock demo stores. The moment a store owner changes colors, adds a third-party app that injects widgets, installs a custom section with a carousel, or swaps out fonts, all of that baseline work can be undone. We've audited enough Shopify stores to know that the gap between a clean theme and a live store is usually 10-30 additional violations introduced by customization.
If you're using one of these themes:
Check your color scheme. Dawn's demo failed because of near-white text on white backgrounds. Your color choices might have the same problem even on a theme that passed in our scan. Run your actual live pages through an automated checker -- not just the theme preview.
Watch your apps. Review apps, popup tools, chat widgets, announcement bars -- these inject their own HTML and CSS. They don't inherit the theme's accessibility characteristics. Each one is a potential source of violations that the theme developer never tested for.
Test the product page. We scanned homepages and collection pages. Product pages have their own complexity: image galleries, variant selectors, add-to-cart forms, size guides, reviews. Those are the pages your customers actually interact with, and they're where customization tends to pile up.
Running a Shopify store and want to know where you actually stand? We scan real stores, not just themes. Get a Shopify accessibility audit
Top comments (0)