Sale Badges and Promo Banners: The Contrast Failures Everyone Misses

Promotional elements are designed fast and checked never. Here is how to keep sale badges readable for everyone without killing the design.

Nobody runs an accessibility check on a sale badge. Promotional elements get designed in a hurry, shipped for a campaign, and removed before anyone audits them. In between, they sit on some of the highest-traffic pages on the site, often with white text on a bright red background that fails contrast badly. Here is how to keep promos readable without killing the design.

Why promos fail contrast so reliably

Promotional design optimizes for urgency: red backgrounds, yellow text, thin condensed type, text over busy lifestyle imagery. Every one of those choices fights readability. A badge that says '50% OFF' in thin white type on a red gradient can look exciting and be unreadable to anyone with low vision.

The problem compounds because promos are temporary. Teams skip the accessibility review for something that lives for two weeks. But two weeks of a sitewide banner is millions of impressions, and the same inaccessible pattern gets copied into the next campaign.

The quick checks that catch most of it

Check text contrast against WCAG AA: 4.5 to 1 for normal text, 3 to 1 for large text. There are free tools that sample the actual rendered colors, which matters because gradients and images change the real ratio. Test the badge, not the brand color swatch.

Check text over images separately. A badge that passes on a solid background can fail on a photo. Add a scrim or solid backing behind text that sits on imagery. And make sure the promotional message is real text, not baked into an image with no alt text.

Design patterns that stay accessible

Solid color badges with bold type pass contrast easily and still look sharp. If the brand demands a gradient, put the text on the darkest part or add a subtle dark overlay behind the text layer. Avoid thin weights for small promo text; bold carries the urgency better anyway.

For countdown timers and dynamic promo text, make sure updates are announced to screen readers politely or not at all, depending on importance. A timer that announces every second is worse than silence. And every promo needs a keyboard-reachable dismiss control.

Baking it into the campaign workflow

Add a contrast check to the promo launch checklist, right next to the link check and the analytics tags. It takes two minutes with a picker tool. Assign it to whoever builds the promo, not to a separate accessibility review, because separate reviews get skipped for fast-turnaround campaigns.

Build accessible promo components once: a badge, a banner, a countdown module, each pre-checked. Then campaigns assemble from parts that already pass. The fastest way to make promos accessible is to make the accessible version the easiest one to use.

Test promos with real users, cheaply

Checklists catch contrast and markup, but they miss the experience. Once a quarter, run a short session with three to five users who rely on assistive technology and have them complete a promo-driven task: find the sale, understand the offer, check out. Pay them for their time.

One session finds what no checklist will: the countdown timer that screen readers announce every second, the promo code field that keyboard users cannot reach, the sale page where the discount only appears in an image. Do it before big campaigns, not after. Fixing a template before launch is cheap. Fixing it mid-sale is not.

Frequently asked questions

Do decorative sale graphics need alt text?

If the graphic contains the promotional message, like '50% off ends Sunday,' that text must be available to screen readers, either as real text or alt text. Purely decorative flourishes do not.

What about animated promo banners?

Animation that plays more than five seconds needs a pause control, and flashing content must stay within safe thresholds. Keep promo animation subtle and user-controllable.

Is AA enough for promotional content?

AA is the legal and practical standard. AAA is a bonus. Hit AA reliably on every promo before chasing AAA anywhere.