Reviewed October 16, 2026

Shopify color contrast for sale badges, buttons, and banners that everyone can read

Sale red on white, pale grey text, and white letters on bright photos fail contrast quietly. The ratios to aim for and how to test a Shopify theme in minutes.

Where Shopify stores fail contrast most

The usual suspects are design choices that look sharp on a large monitor: light grey product text, white text over bright lifestyle photos, pastel sale badges, and thin fonts in brand colors that were chosen for packaging, not screens. Each one quietly excludes shoppers with low vision, aging eyes, or a phone in bright sunlight.

Contrast failure is also a conversion problem, not only a compliance one. A shopper who cannot read your sale price or find your add to cart button does not file a complaint. They leave, and the analytics just call it bounce.

The ratios worth memorizing

Aim for at least 4.5 to 1 contrast for normal text and 3 to 1 for large text, which generally means 18 point or larger, or 14 point bold and larger. Buttons, prices, and form labels are normal text in this sense, even when the design team thinks of them as graphics.

Sale badges deserve special attention because red and orange brand colors frequently sit near the failing line on white. Darkening the badge background or the text by a few steps usually fixes it without changing the brand feel anyone will notice.

Testing a theme without special tools

Free contrast checkers in any browser let you sample a text color and its background and get the ratio instantly. Work through the money pages first: product price and variant labels, add to cart, sale and sold out badges, announcement bar, footer links, and the checkout call to action in the cart drawer.

Then repeat the check in the situations your shoppers actually face: phone brightness down, sunlight, and the sale season banner swapped in. Contrast that passes in a dark office can fail on a sidewalk, and seasonal graphics are where last year’s careful fixes get overwritten.

Fixing contrast without wrecking the brand

You rarely need new brand colors. You need a darker text variant of the brand color for small text, a solid backing panel behind text that sits on photos, and badge colors reserved for fills while text goes dark or white depending on which side passes.

Record the approved pairs in a short style note for whoever edits the store: these text colors on these backgrounds pass, these do not. Most contrast regressions arrive with a well meant banner change, and a one page note prevents the same fix twice.

Frequently asked questions

What contrast ratio should Shopify buttons meet?

Button text should meet 4.5 to 1 against the button background, and the button itself should be distinguishable from the page around it. Large bold button text can qualify under the 3 to 1 large text allowance, but aiming for 4.5 to 1 is safer and usually costs nothing visually.

Does a photo background count if the text has a shadow?

A drop shadow helps readability in practice but rarely fixes a genuinely failing combination, and automated checks cannot credit it. The reliable fix is a solid or near solid panel behind the text, or moving the text off the photo. If the words carry a price or an offer, they deserve a background that passes cleanly.

Are sale colors like red and orange always a problem?

No, but they are frequent offenders at their brightest. A deep brick red on white passes easily while a bright coral fails. Test the exact hex values your theme uses rather than judging by eye, because screens and eyes both lie about borderline pairs.

Do contrast rules apply to sold out and disabled states?

Disabled interface elements have some exemptions in the guidelines, but sold out labels and unavailable variant text still carry information shoppers need. Keep them readable. Greyed out should mean visually quieter, not effectively invisible, especially for prices and availability.