Shopify WCAG 2.2 Color Contrast — What Fails, What Passes, How to Audit
Color contrast is one of the most frequently violated WCAG requirements in Shopify themes. Light gray text on white backgrounds, white text on light product images, and pale color-on-color button designs all fail the minimum 4.5:1 contrast ratio required for WCAG 2.1 AA compliance — which is what the European Accessibility Act and most accessibility standards require. Failing contrast means your store is inaccessible to users with low vision, color blindness, and anyone viewing in bright sunlight. This guide explains the requirements and gives you a systematic audit process.
WCAG 2.2 contrast requirements explained
WCAG 2.2 defines three contrast requirements: Normal text (under 18pt or 14pt bold) requires 4.5:1 contrast ratio against its background. Large text (18pt/24px or larger, or 14pt/18.67px bold) requires 3:1 contrast. UI components and graphical objects (button borders, icons, focus indicators) require 3:1 contrast against adjacent colors. Contrast ratio is calculated from relative luminance values — a ratio of 1:1 is identical colors (zero contrast), 21:1 is black on white (maximum contrast). The most common failure in Shopify themes is light gray (#999999, #aaaaaa, #bbbbbb) on white (#ffffff), which fails 4.5:1.
Most common contrast failures in Shopify themes
Price text in sale color (light red or pink on white), secondary text in muted gray (typically #999 on #fff = 2.85:1 — fails), placeholder text in form inputs (browsers default to very low contrast), badge text on colored backgrounds (white on light green or yellow fails), navigation link colors on near-white backgrounds, and CTA button text when merchants change brand colors in theme settings. Theme customizer color settings are particularly risky — merchants can unknowingly create failing combinations.
How to audit contrast in your Shopify theme
Method 1: Chrome DevTools. Open DevTools > Elements, select a text element, look at Styles panel — Chrome shows a contrast ratio indicator next to the color property. Method 2: axe DevTools browser extension — runs an automated accessibility audit and flags all contrast failures with specific element locations and color values. Method 3: WebAIM Contrast Checker (webaim.org/resources/contrastchecker/) — enter foreground and background colors to calculate ratio. Method 4: Lighthouse accessibility audit in Chrome DevTools > Lighthouse tab. Run on your store pages and review the Accessibility section.
Fixing contrast failures in theme settings
For Shopify themes where merchants configure colors via theme settings, implement minimum contrast enforcement in Liquid: calculate contrast ratio between text and background colors and output a warning in the Theme Editor if the combination fails. More practically, provide clearly labeled color setting pairs (text + background) with guidance on choosing sufficient contrast, set default color values that all pass contrast requirements, and add inline contrast validation in the theme settings documentation.
The fix: before and after
// CODE_COMPARISON
Frequently asked questions
- What is the minimum passing contrast ratio for body text in Shopify themes?
Normal text requires 4.5:1 contrast ratio for WCAG 2.1/2.2 Level AA compliance. The most commonly used dark-on-white colors that pass: #595959 on #ffffff (7:1), #767676 on #ffffff (4.54:1 — barely passes), #6e6e6e on #ffffff (5.32:1). Colors lighter than #767676 on a white background fail the 4.5:1 requirement. For text on colored backgrounds, calculate each combination individually using a contrast checker.
- Does the contrast requirement apply to placeholder text in form inputs?
Yes. Placeholder text (styled with ::placeholder) must meet the 4.5:1 contrast requirement if it conveys necessary information. Browser defaults for placeholder text (#757575 on white) are borderline — approximately 4.6:1. If you style placeholders with lighter colors for aesthetic reasons, you likely fail the requirement. Always check placeholder contrast explicitly.
- What is the European Accessibility Act (EAA) and does it apply to my Shopify store?
The EAA entered into force in June 2025 and requires that products and services sold in the EU meet accessibility standards equivalent to WCAG 2.1 Level AA. This includes e-commerce websites. If you sell to EU customers through your Shopify store, color contrast requirements are legally enforceable under the EAA. Stores that fail to comply may face complaints and enforcement actions from EU member state authorities.
// SCAN_YOUR_CODE
Does your theme have this bug?
Paste your code. Syphio automatically detects and fixes this error and hundreds of others — in seconds.
Validate my Liquid →