Reviewed October 13, 2026

Are your Shopify sale badges accessible to everyone?

Many sale badges use small white text on bright red or orange, which fails contrast ratios, and they are often coded as decoration that screen readers skip. Check contrast, never rely on color alone, and make the saving readable as text.

Why badges are an accessibility weak spot

Badges are usually added by a theme or app as a visual flourish, so they get less scrutiny than body text. Small bold text on a saturated background looks punchy to a designer and can be nearly unreadable to a shopper with low vision.

Because badges sit on top of product images, the background behind the text can vary from photo to photo, which means a badge that passes on one product can fail on the next.

Check contrast the practical way

Measure the badge text against its badge background, aiming for at least 4.5 to 1 for small text. If the badge floats over an image, add a solid background or a subtle outline so the ratio does not depend on the photo.

Test at the size customers actually see, including mobile thumbnails. Contrast that works on a large desktop image can fall apart when the badge shrinks to a few pixels tall.

Never let color carry the meaning alone

A red badge that just says Sale in a shape, or a color change with no text at all, leaves out shoppers who cannot distinguish that color. The badge should always include readable words, such as Sale, Save 20 percent, or Clearance.

The same rule applies to variant swatches and stock indicators nearby. Text labels protect both accessibility and conversion, because every shopper gets the message.

What screen reader users should hear

The discount should appear in the accessible name of the product, not only in a visual overlay. A good pattern is for the product title link to be followed by text that a screen reader announces, such as the sale price and the original price.

Check your theme by navigating a collection page with a screen reader or by inspecting the accessibility tree in your browser. If you never hear the saving, neither do your customers.

A quick badge audit

List every badge style your store uses, check each for contrast, text, and screen reader output, and fix the template rather than individual products. One theme edit usually repairs hundreds of badges at once.

Retest after any theme update or new app install, because badges are often reintroduced by apps with their own default styles.

Frequently asked questions

What contrast ratio should sale badge text meet?

Small badge text should meet at least 4.5 to 1 against its background. Large bold text has a lower minimum, but badges are rarely large enough to qualify.

Do I need to announce sale badges to screen readers?

Yes. The saving is meaningful content, so it should be available as text that assistive technology can read, ideally alongside the price.

Can an app fix badge accessibility automatically?

Apps can add labels and improve markup, but contrast and placement still depend on your theme settings. Audit the result after installing any badge app.

Should badges move or flash to attract attention?

Avoid flashing or moving badges. Motion can distract and can be a problem for shoppers sensitive to movement, and the information should work while sitting still.