Reviewed October 22, 2026

Accessible color contrast for sale badges and banners

Sale badges are where storefront contrast goes to die: white text on bright red, light grey on a photo, percentages in the thinnest font on the page. The contrast rules that apply, how to check a badge in two minutes, and fixes that keep the urgency.

Why badges fail first

Sale design runs on urgency, and urgency has a house style: saturated reds, oranges, and yellows with white text knocked out on top. Measured against contrast standards, that palette is a minefield. White on a typical sale red often lands around 3.5 to 1, below the 4.5 to 1 required for normal text, and white on orange or yellow fails by a wide margin.

Banners add a second problem: text over photography. A headline that reads fine over the dark left side of a hero image washes out where the image brightens, and the contrast ratio changes across the very same line of text. Automated checkers sampling one pixel will miss it, which is why banners pass tools and fail people.

The rules that actually apply

For standard text, WCAG asks for 4.5 to 1 against its background. Large text, roughly 18 point or 14 point bold and up, needs 3 to 1. A sale percentage in big bold numerals may qualify as large text; the small print under it, the dates, exclusions, and shop now labels, almost never does, and those small elements are the ones that fail audits.

Badges count as text containers, not decoration, whenever they carry information a shopper needs, which is nearly always. The discount percentage, the word sale, the end date: all information. That means the badge background and its text need the ratio, and the badge itself should also stand out from the product image behind it if its border is the only thing marking it as an element.

A two minute check you can run today

Open your busiest sale page and screenshot it. Drop the screenshot into any contrast checker that lets you sample colors, and measure the badge text against the badge color at its lightest point, then the banner headline against the brightest part of the image behind it. Checkers are free and this takes less time than reading this section.

Then do the human version: view the page on a phone in bright light, or squint at it from arm's length. Low contrast text disappears under those conditions for everyone, which is the everyday version of what low vision shoppers experience indoors. If the sale terms vanish in sunlight on your own phone, they were never really published.

Fixes that keep the urgency

Darken the badge color until the white text passes, rather than abandoning the color. A deeper red keeps the entire visual language and buys back the ratio. Alternatively keep the bright brand color and switch the badge text to a very dark shade; black on sale orange passes easily and still reads as urgent.

For banners, put a solid or near solid panel behind the text, or add a strong scrim over the whole image, and test against the panel rather than the photograph. Adding a genuine text shadow is not a fix; checkers and eyes both see through it at small sizes. The pattern to remember: if the meaning matters, the background under text should be boring, flat, and measurable.

Frequently asked questions

What contrast ratio do sale badges need?

The text on a badge needs 4.5 to 1 against the badge background if it is standard sized text, or 3 to 1 if it qualifies as large text. Most badge fine print is standard sized, so design to the 4.5 to 1 figure to be safe.

Does a border around a badge fix contrast?

A border helps the badge separate from what sits behind it, but it does nothing for the text inside the badge, which is measured against the badge fill color. Both relationships matter; the border solves only one of them.

Are hover and mobile banners checked too?

Yes. Contrast rules apply to every state a shopper can encounter, including mobile layouts where banners get cropped and text lands on different parts of the image. Check the mobile crop specifically, since it often shifts text onto brighter image areas.

Can I keep bright yellow in my sale design?

Yes, with dark text on it. Yellow fails mainly with white text. Near black text on yellow is one of the highest contrast combinations available and keeps the full energy of the color.