Reviewed November 9, 2026

Contrast on Sale Prices: 4.5:1 Is the Floor, and Strikethrough Text Still Has to Pass

The original price, the sale price and the discount all have to meet the 4.5:1 contrast ratio for normal text under WCAG 1.4.3. Strikethrough does not exempt text from the rule. The most common failure is a light grey original price on a white background, which drops below 4.5:1 and becomes unreadable for low-vision shoppers.

The sale price is red, bold and impossible to miss. The original price is light grey, struck through, and almost invisible. That is a design choice, and it is also a WCAG failure, because the original price is text, and text has to meet the contrast ratio whether or not it has a line through it.

WCAG 1.4.3 Contrast (Minimum), Level AA, requires a 4.5:1 contrast ratio for normal text and 3:1 for large text. The struck-through original price is normal text. The discount percentage is normal text. The sale badge is normal text. None of them get a pass because they are decorative, because none of them are decorative: they are the price, and the price is the information the shopper came for.

Why the original price fails most often

The original price is deliberately de-emphasized. The designer wants the eye on the sale price, so the original goes light grey, small, and struck through. On a white background, a common grey like #999999 against white measures about 2.8:1, far below the 4.5:1 floor. The shopper with low vision, or anyone on a phone in sunlight, cannot read the number that tells them how much they are saving.

The irony is that the de-emphasis is the point of the failure. The original price matters precisely because it establishes the discount. A shopper who cannot read it cannot verify the sale, and a shopper who cannot verify the sale has no reason to trust it. The design choice that makes the sale look good is the choice that makes the sale unverifiable.

The fix is not to make the original price as loud as the sale price. It is to darken it until it passes 4.5:1, which usually means a medium grey around #595959 on white, and to keep the strikethrough. The visual hierarchy survives: the sale price is still red and bold, the original is still smaller and struck through, and both are now readable. Hierarchy does not require invisibility.

Strikethrough, small text, and the 3:1 trap

Large text gets the easier 3:1 ratio, and some teams try to claim their sale prices are large text. WCAG defines large text as at least 18 point, or 14 point bold, which is about 24 pixels or 18.66 pixels bold. A sale price at 16 pixels bold is normal text, and it needs 4.5:1. Measure the actual size before claiming the easier ratio.

Strikethrough creates a second problem. The line through the text reduces the visible strokes, which makes the text harder to read at the same contrast ratio. The standard does not adjust for this, so a struck-through price at exactly 4.5:1 is technically compliant and practically harder to read than unstruck text at the same ratio. Aim above the floor for struck-through prices, not at it.

The discount badge has its own failure mode. A red badge with white text on a red background often passes, but a light red badge with darker red text, or a yellow badge with white text, frequently fails. Check the badge text against the badge background, not against the page background. The badge is a small element, and small elements fail contrast more often than large ones.

Checking contrast the way a tester would

The test is mechanical. Pick the text, pick its background, measure the ratio. The WebAIM contrast checker and the browser's own accessibility inspector both do it in seconds. Test the original price, the sale price, the discount percentage and the badge text, each against its own background, at the sizes they actually render.

Test the hover and focus states too. A price that passes at rest and fails on hover, because the hover state lightens it, is still a failure for the shoppers who hover. Test on a phone in sunlight if you can, because that is where marginal contrast becomes unreadable, and that is where most shopping happens now.

Document the numbers. A contrast audit that records the ratio for each element is the evidence that the fix happened, and it is the evidence that answers a demand letter. A screenshot of a red price is not evidence. A ratio of 4.6:1, measured and recorded, is.

Frequently asked questions

Does strikethrough text need to meet the contrast ratio?

Yes. Strikethrough does not exempt text from WCAG 1.4.3. The original price is normal text and needs a 4.5:1 ratio against its background, the same as any other text. The line through it makes it harder to read, so aim above the floor for struck-through prices rather than exactly at it.

What is the contrast ratio for large text?

Large text needs 3:1 under WCAG 1.4.3. Large means at least 18 point, or 14 point bold, roughly 24 pixels or 18.66 pixels bold. Most sale prices render smaller than that, so they count as normal text and need 4.5:1. Measure the actual rendered size before claiming the easier ratio.

How do I check the contrast of a sale badge?

Measure the badge text against the badge background, not against the page background. A red badge with white text usually passes, but a light badge with light text often fails. The WebAIM contrast checker or the browser accessibility inspector will give you the ratio in seconds.

Is 4.5:1 enough for a price on a phone in sunlight?

It is the floor, not the target. Sunlight washes out screens, and marginal contrast becomes unreadable outdoors. For prices, aim above 4.5:1 where you can, especially for struck-through original prices. The standard is a minimum, and the minimum assumes indoor viewing.