Reviewed October 18, 2026

Color contrast on sale badges and product labels that everyone can read

Red sale badges on busy product photos fail contrast for millions of shoppers. How contrast ratios work on storefronts, where Shopify themes fail, and practical fixes.

Badges sit on the worst possible background

Most storefront text sits on a calm, solid background the theme controls. Badges do not. A sale or sold out badge floats over product photography, which means its background is whatever color the product happens to be at that corner: white bedding one day, black leather the next. A badge color that passes on one product fails on another.

That is why badge contrast cannot be checked once on the homepage and filed away. It has to survive the full range of your photography, or the badge needs its own solid backing so the background stops mattering.

The ratios, in plain terms

Accessibility guidelines ask for a contrast ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text. A ratio compares the brightness of text and background; black on white is 21 to 1, and pale gray on white can be under 2 to 1 while still looking fine to a designer on a bright monitor.

Free contrast checkers take two color values and return the ratio instantly. Use them for every badge style, button state, and sale price color in the theme, including the lighter sale red many brands pick because it looks friendly. Friendly and unreadable is a bad trade.

Where Shopify storefronts commonly fail

Sale prices in light red or orange beside full price text, low stock warnings in pale amber, white badge text over light product photos, and discount banners announced sitewide in thin light lettering. Star ratings rendered in pale yellow are another classic: visible as a cluster, illegible as information.

Hover only price changes and image only badges with the discount baked into the photo fail a second way: the information never exists as text at all. Keep the discount in real text near the price, where every shopper and every tool can find it.

Fixes that keep the design

Give badges a solid background chip with tested colors, add a subtle outline or shadow only as a supplement rather than the whole fix, and darken sale colors until they pass, since a slightly deeper red still reads as sale. Test badges against your lightest and darkest product photos, not the average one.

Then check the whole purchase path with the same eye: variant labels, error text, and the checkout button states. A badge fix that leaves the add to cart button at 2.5 to 1 has polished the shop window while the door stays locked.

Frequently asked questions

What contrast ratio do sale badges need?

Treat badge text as normal text: 4.5 to 1 against its background. If the badge sits on photography, the background is unpredictable, so give the badge a solid fill you can test, or test against the lightest and darkest photos in your catalog and pass against both.

Why does my theme pass an automated check but badges still fail?

Automated tools often cannot evaluate text over images, and they sample the page state they can reach. A badge over a photo may be skipped entirely or measured against an assumed background. Manual checks with a contrast tool on your real badge colors catch what scanners miss.

Does a drop shadow fix low contrast?

A strong shadow can genuinely help legibility over photos, but it is hard to measure and easy to overestimate on your own bright screen. Prefer a solid badge background with tested colors. Use shadow as seasoning on a fix that already passes, not as the fix itself.

Are star ratings a contrast problem too?

Yes, commonly. Pale yellow stars on white often fall far below 3 to 1, and the rating's meaning should also exist as text, like 4.5 out of 5, somewhere a screen reader and a low vision shopper can reach. Color alone should never be the only channel for information.