Checking Contrast in Sale Badges and Discount Labels
Sale badges love white text on bright colors, and shoppers with low vision pay for it. Here is a practical contrast check for the labels that carry your prices.
The most important text on a sale page is often the hardest to read. White lettering on a coral badge, pale green discount labels, and thin percentage text over product photography all test well in a design review and badly in real light for real eyes.
Contrast failures on pricing are not a cosmetic issue. A shopper who cannot read the discount cannot judge the offer, and a shopper who misreads a price feels deceived at checkout. Both outcomes are avoidable with a short check.
Test badges where they actually sit
A badge rarely sits on a flat background. It overlaps photos, shadows, and packaging, so its effective contrast changes from product to product. Check the badge against the lightest and busiest images in your catalog, not only against the clean studio shot in the design file.
Text over imagery needs a solid backing shape or a strong shadow that genuinely separates the letters. If some photos make the badge unreadable, the fix belongs to the badge design, a solid background with tested colors, not to the photography.
Measure the numbers, do not eyeball them
Use a contrast checker on the exact badge colors and the exact label colors, including hover and disabled states. Normal sized text needs a ratio of at least 4.5 to 1 against its background, and the discount percentages shoppers rely on are normal sized text, whatever the design team hoped.
Record the approved color pairs in a short list the marketing team can reuse. Most contrast failures enter through a one off seasonal palette nobody measured. An approved list turns a recurring argument into a quick lookup.
Do not let color carry the meaning alone
A red label for clearance and a green label for new pricing only works for shoppers who distinguish those colors the same way you do. Add the words that carry the meaning: the label should say Clearance or the exact saving in text, not rely on tint to explain itself.
The same rule applies to strikethrough pricing. The original price, the sale price, and the saving should all be readable as text in a logical order, so a screen reader shopper hears the same offer a sighted shopper sees.
Check badges again every promotion cycle
Seasonal sales bring new badge colors, new label wording, and new landing page banners, usually under time pressure. Build the contrast check into the promotion launch list, next to price verification, so it happens while fixes are still cheap.
Keep last season failures in the launch notes. Teams repeat the pale badge mistake because nobody wrote down that it failed. A two line record saves the same finding from being rediscovered every quarter.
Related reading
If this topic is useful, these earlier guides go deeper on connected questions: Checking Link Purpose on Cards, Tiles, and Blog Teasers, Autoplay Video on Product Pages: The ADA Risk Nobody Tests, and Checking Heading Order on Collection Pages Without Reading All the Code.
Frequently asked questions
What contrast ratio do sale badges need?
Badge text is usually normal sized text, so it needs at least 4.5 to 1 against its background. Check the real color pair with a contrast tool, and check it over your lightest product photos too, because badges sit on imagery, not on flat color.
Why do badge problems keep coming back each season?
Promotions are built quickly with new colors that nobody measures. Recording approved, measured color pairs and adding a contrast check to the promotion launch list stops the same pale badge from returning every sale cycle.
Is color coding discounts by category acceptable?
Only when the meaning is also written in words. Color alone excludes shoppers with color vision differences and anyone viewing in bright light or grayscale. The label should state the offer plainly, with color as decoration rather than the message.
How should strikethrough prices be handled for screen readers?
Present the original price, sale price, and saving as readable text in a sensible order, with the reduction labeled in words. A screen reader shopper should hear the complete offer, not a pair of unexplained numbers.