Can low color contrast on your Shopify buttons trigger an ADA demand letter?

Yes. Color contrast failures are one of the most frequently cited issues in ADA website demand letters, and buttons are the most expensive place to fail. WCAG requires text and images of text to hit a 4.5 to 1 contrast ratio against their background, and 3 to 1 for large text. Most Shopify themes ship with gray-on-white buttons, light placeholder text, and sale badges that miss those ratios by a wide margin. The good news: contrast is one of the cheapest findings to fix.

What the contrast rules actually require

WCAG 2.2 success criterion 1.4.3 sets the bar: normal text needs a contrast ratio of at least 4.5 to 1, and large text, defined as 18 point or 14 point bold and up, needs 3 to 1. Non-text elements that a user needs to identify or operate, like the borders of input fields and focus indicators, fall under criterion 1.4.11 at 3 to 1. Logos and purely decorative text are exempt, but almost everything else on a storefront is covered.

The ratio is measured between the text color and its immediate background, which trips up a lot of themes. A button that looks fine on a white product page can fail on the announcement bar, in the footer, or over a hero image where the background is a photograph. Contrast is contextual, so a single check of the homepage palette is never enough.

Where Shopify themes fail most often

The repeat offenders are remarkably consistent across audits. Secondary buttons with light gray text on white backgrounds are the classic failure. Placeholder text inside search and newsletter inputs is usually styled in a faint gray that falls well below 4.5 to 1. Sale and discount badges use light pink or yellow backgrounds with white text. Disabled-looking checkout buttons, error messages in thin red on white, and star ratings rendered in pale gold all show up regularly.

Theme customizers make this worse, not better. A merchant who changes the brand color in one setting often has no idea the same color now fails on buttons, links, and the announcement bar. Every palette change should trigger a contrast recheck across templates, and almost nobody does that manually.

How to check your store properly

Start with an automated scan of every template, not just the homepage: product pages, collection pages, the cart, the search results page, the account pages, and the footer. Automated tools catch the numeric failures. Then spot-check the contextual cases by hand: text over images, buttons in hover states, and any element whose background shifts. Note that brand guidelines are not a defense: "our gray is part of our identity" does not satisfy WCAG. The fix is to darken the gray, not to argue for it.

Fixing it without breaking the design

Most contrast fixes are palette adjustments, not redesigns. Darkening a secondary button's text from a light gray to a charcoal keeps the same visual language while jumping from a 2 to 1 ratio to well above 4.5 to 1. Placeholder text can be darkened without changing the input's appearance in any meaningful way. Error messages in a deeper red read as more urgent, which is arguably better design.

The harder cases are brand colors that fail on white. The practical approach is a two-tier palette: the brand color for decorative elements and large headings where the 3 to 1 bar is lower, and a darkened variant for body text, buttons, and links. Document the pair so the next theme edit does not silently reintroduce the failure.

Contrast is the easy win, treat it that way

Of all the issues that show up in ADA demand letters, contrast has the best ratio of legal risk to fix cost. It takes an afternoon of palette work to clear dozens of findings, it makes the store genuinely easier to use for shoppers with low vision, and it removes the simplest evidence a testing firm can collect. Run the scan, fix the grays, and recheck after every theme change.