Reviewed October 26, 2026

Color Contrast Failures: The Store Pages That Fail Most Often

Contrast is the most common accessibility failure on store sites, and it clusters in the same places: sale badges, image overlays, footers, and placeholder text. Where it hides and how to check it.

Contrast fails where design gets decorative

Text contrast failures are the single most common accessibility defect category on commercial websites, and on stores they cluster predictably. Body text written by a careful theme usually passes. The failures live in the decorative layer added later: sale badges in brand colors, text laid over photography, footer links in tasteful gray, placeholder text standing in for labels, and promotional banners designed in a graphics tool where nobody ran a ratio check.

The standard is a ratio: 4.5 to 1 for normal text, 3 to 1 for large text, measured between the text color and its background. Low vision shoppers do not experience a slightly elegant gray. At insufficient contrast, text effectively disappears, and the information it carried, a price condition, a shipping note, a form instruction, disappears with it. Contrast is not an aesthetic preference. It is whether the words exist.

The five hiding places on store pages

Sale and promo badges fail first, because brand accent colors chosen for pop rarely carry enough contrast for the white or dark text placed on them, in both directions. Second, hero and banner text over images, where contrast varies across the photograph itself: the same white headline passes over the dark corner of the image and fails over the bright sky in the middle. A ratio measured at one point is not a pass for the whole banner.

Third, footers, where light gray on slightly darker gray is a design cliché and a reliable failure. Fourth, form placeholders and helper text, set pale by default in many themes. Fifth, disabled and secondary elements that still carry information: out of stock labels, compare at prices, review counts, and size options rendered unavailable in ghost gray. If a shopper needs to read it to decide, it needs contrast, whatever its visual priority.

How to check without guessing

Contrast checking is one of the cheapest audits in accessibility. Browser tools and free checkers report ratios for any color pair, and automated scanners flag the obvious failures across a whole page in seconds. The manual part is the judgment calls scanners cannot make: text over images, text over gradients, and states like hover and sale that only appear in specific conditions. Audit your templates in their real states, with a sale running and a banner live, not in the clean default state nobody shops.

Fix at the system level, not the instance level. Adjust the design tokens: darken the badge color or switch its text color once in the theme settings, set a proper footer palette, add a subtle overlay or shadow treatment behind image text or move the text off the image entirely. A store that fixes tokens fixes every current and future page that uses them. A store that hand patches individual banners buys the same failure again next campaign.

The business reading of a contrast pass

Contrast fixes are unusually good investments. They are cheap, permanent at the token level, and they help every shopper in bright sunlight on a phone, which is to say most mobile shoppers in real conditions, not only people with diagnosed low vision. The legal exposure shrinks as a side effect of words becoming readable. It is rare that the accessible choice, the usable choice, and the low risk choice are the same edit. Contrast is that edit.

Build the check into the campaign workflow. Every new banner, seasonal color swap, and sale badge gets a thirty second ratio check before it ships, done by whoever designs it, with the checker bookmarked and the thresholds known. Contrast debt accumulates one unrechecked promotion at a time. It is prevented the same way.

Related reading

If this topic is useful, these earlier guides go deeper on connected questions: WCAG Levels A, AA, and AAA Explained for Store Owners, Accessible PDFs for Product Manuals: The Documents Nobody Checks, and Website Accessibility Basics for Small Businesses: Where Risk Starts.

Frequently asked questions

What contrast ratio does text need to pass?

For WCAG AA, normal text needs at least 4.5 to 1 against its background, and large text, roughly 24 pixels or 18.5 pixels bold, needs at least 3 to 1. Logos and purely decorative text are exempt, but prices, labels, and instructions are not decorative.

How do I check text over a photo banner?

Check the ratio at the worst point, where the background image is closest in brightness to the text, not the most favorable point. If any meaningful area fails, add a darkening overlay behind the text, move the text off the image, or give the text block a solid background.

Are gray footer links really a problem?

They are one of the most flagged patterns in store audits. Footers carry legal links, contact routes, and accessibility statements that users actively hunt for. Light gray small text on a pale or dark gray background routinely falls below the ratio, and it is a token level fix away from passing.

Do sale badges and prices count as large text?

Only if they meet the size and weight thresholds. Most badge text is small and needs the full 4.5 to 1. Compare at prices and stock labels are ordinary text too. Assuming the large text allowance is how many badges end up failing an audit the owner thought they would pass.