Monitoring Contrast in Sale Badges, Promo Text, and Price Colours
The lowest contrast text on most stores is the text added for a promotion: sale badges, strikethrough prices, promo bar copy, and low stock warnings. Monitoring those colours specifically.
Run a contrast scan on a store during a sale and the failures cluster in the same places. A red sale badge with white text that lands just under the ratio. A was price in light grey strikethrough. Promo bar text in a brand colour on a tint of the same colour. None of these are body copy, so a check that samples headings and paragraphs can report a clean page while the prices, which are the part a shopper has come for, are the hardest text on it to read.
WCAG 1.4.3 Contrast Minimum sets 4.5 to 1 for normal text and 3 to 1 for large text at AA. Badges and prices are usually normal sized text, often small and bold, which does not make them large text in the WCAG sense. Large means at least 18 point, or 14 point bold. A 12 pixel bold sale label is normal text and needs the full 4.5 to 1.
Colours that are set outside the theme
Sale colours usually come from a promotion app, a merchandising tool, or a seasonal stylesheet somebody loads for six weeks. That is why they drift. The theme palette was checked once, carefully, and the campaign palette was picked from a brand deck under deadline. Monitoring needs a list of the colour pairs actually rendered on promotional elements, extracted from the live page, not read from the design tokens.
Strikethrough pricing deserves its own entry. The was price is information, not decoration, when a discount claim rests on it. Rendering it at 2.8 to 1 in light grey and calling it decorative does not hold up if a shopper needs that figure to judge the offer. Treat any text that carries the deal as text that has to be read.
Badges on images are the hard case
A badge placed over product photography has no single background colour. Its contrast changes with every image it lands on, passing over a white shirt and failing over a grey one. Monitoring that samples one product will miss the range. Sample across the catalogue, and where the badge sits on imagery, the durable fix is a solid badge background or a backing plate, not a hunt for a text colour that survives every photograph.
The same applies to text set directly on hero images and to countdown timers over campaign banners. If a timer matters enough to show, its digits matter enough to read, including in the final hour when a design often switches the colour to signal urgency.
What to put in the report
Report the pair, the ratio, the element, and the template, in that order. Red on white at 3.9 to 1 on the sale badge, product template, is an actionable line. A page score of 94 is not. Group repeat failures by the component that owns the colour, because one badge component can account for thousands of failing pages and a single fix clears all of them.
Track promotional periods separately in the trend line. A store that is compliant in ordinary weeks and fails every sale week has a campaign process problem, and the fix belongs in the campaign checklist: no promotional colour ships until the pair is checked. That is a cheaper conversation than remediating a live sale.
Related reading: Monitoring Focus Order in Sticky Add to Cart Bars, Monitoring Aria-Live Regions for Cart and Search Updates, Monitoring Skip Links: The First Tab Stop Nobody Tests.
Frequently asked questions
Is a sale badge large text if it is bold?
Only if it also meets the size threshold, at least 14 point and bold, roughly 18.66 pixels. Most badges are smaller than that, so they are normal text and need 4.5 to 1. Bold alone does not lower the requirement.
Does strikethrough price text have to meet contrast?
If the price is information the shopper uses, yes. Text that is purely decorative or incidental is exempt, but a comparison price supporting a discount claim is not incidental. Keep it at 4.5 to 1 and let the strikethrough carry the meaning that it is the old price.
What ratio should a promo bar aim for?
At least 4.5 to 1 for its text, and check the dismiss button and any link inside the bar separately, since those are often set in a lighter tint of the bar colour. Also check the bar in its second state if the message rotates, because rotating messages may use different colours.
Can automation check contrast over product images?
It can estimate it by sampling the pixels behind the text, but results vary by image and are easy to misread. Use automation to flag badges that sit on imagery, then decide the design fix, usually a solid background behind the badge, which removes the variable entirely.