Colour Contrast for Sale Badges and Promo Labels
Sale badges, discount ribbons, and promo stickers are designed to shout, and shouting often means thin text on bright colour. How to keep promotions readable for everyone.
A sale badge has one job: be noticed. Designers reach for bright backgrounds, thin type, and text laid over product photography, and each of those choices quietly lowers contrast until a share of shoppers cannot read the offer at all.
Promotions rotate faster than any other element on a store, so badge accessibility rarely survives contact with a campaign calendar. This guide covers the contrast traps badges fall into and a review pattern that keeps each new promotion readable.
Badges fail contrast in predictable ways
White text on a bright sale red or orange is the classic failure: it looks bold at full size on a design monitor and falls below readable contrast for low vision shoppers, especially once the badge shrinks to a thumbnail overlay on a listing page.
Text over photography is the second trap. A badge placed on a busy product image has no single background colour, so its contrast changes from product to product. A solid badge background with its own tested colour pair removes the guesswork.
Test the badge at the sizes it actually ships
A badge is read at listing size, in search results grids, and inside a cart drawer, rarely at the size it was designed. Check contrast at the smallest rendered size, where anti aliasing thins strokes and borderline colour pairs fail first.
Zoom and greyscale passes help. If the discount value cannot be read in greyscale at 200 percent zoom, the colour pair is carrying more than it should, and the fix is a darker text colour or a stronger badge background, not a bigger badge.
Do not let colour be the only signal
A badge that communicates only through colour, red for clearance, gold for member pricing, fails shoppers who cannot distinguish those colours. Pair every colour meaning with text that says the thing itself: the percentage, the word sale, or the member label.
The same rule applies to price treatments. A struck through price beside a coloured sale price needs the saving stated in text somewhere a screen reader reaches, not implied by styling alone.
Add badges to the campaign sign off checklist
Promotions are usually built by marketing, approved on a screenshot, and shipped. Add two checks to that flow: a contrast measurement of the badge colour pair, and one pass of the listing page with a screen reader to confirm the offer is announced in text.
Keep a small library of pre approved badge colour pairs that pass. When a campaign needs a new look, it starts from the library instead of inventing a pair under deadline, which is when unreadable badges get made.
Related reading
If this topic is useful, these earlier guides go deeper on connected questions: Keyboard Navigation for Product Image Galleries, Accessible Size Guides and Fit Finders That Actually Help, and Accessible Checkout Error Recovery That Saves the Order.
Frequently asked questions
What contrast ratio should sale badge text meet?
The same as any text: 4.5 to 1 for normal sized text, 3 to 1 only for genuinely large text. Most badges are small text, so the 4.5 to 1 target is the honest one to design against.
Why do badges look fine in the design file but fail live?
Because design files are viewed large, on calibrated screens, over chosen imagery. Live badges render small, over arbitrary product photos, on every screen quality. Testing at production size over real products is the only reliable check.
Can a badge rely on a border instead of a background?
A border helps separate the badge from the image, but it does not fix text to background contrast inside the badge. The text still needs a background colour it passes against.
Who should own badge accessibility, design or development?
Design owns the colour pair, development owns the component that keeps text and background paired correctly at every size. Campaign sign off should name both checks so neither assumes the other did it.