How to make your online store WCAG-compliant without sacrificing the visual excitement that drives purchases.
Accessibility in e-commerce isn't a compromise — it's a market expansion. If users can't read your prices, understand your size options, or distinguish in-stock from out-of-stock items, they leave. Every color that conveys information must also communicate through text, icons, or patterns. Use ColorArchive's WCAG auditor to check your product page colors: price text, badge backgrounds, and status indicators are the most common failure points.
Sale badges typically use red text or red backgrounds. For color-blind users, ensure the badge also says 'Sale' or '-30%' in text, not just through color. Strikethrough pricing needs sufficient contrast for both the original and sale prices. Avoid light gray strikethrough text — it often falls below 3:1 contrast. A medium gray (55% lightness on white) maintains readability while still looking secondary.
Product filters, size selectors, and color swatches are interactive elements that often lack proper accessibility. Color swatch selectors should include the color name as a tooltip or label. Active/selected states need a visible indicator beyond color change — a checkmark, border, or scale change. These patterns are more usable for everyone, not just users with disabilities.
Move from the guide into a concrete palette lane
Guides explain the use case. Collections prove the taste. Pro handles the export and implementation layer.
