Reviewed November 8, 2026

Your Sale Badge Is Invisible to 1 in 12 Men: Color Alone Is Not a Signal

The sale price is red. The old price is grey. To most shoppers that is a clear signal: this one is cheaper now. To a shopper with red-green color blindness, both prices are the same shade of grey, and the sale does not exist.

WCAG 1.4.1 Use of Color is one of the oldest criteria in the guidelines, and storefronts violate it every day in the same place: sale badges, error states, and required fields that communicate only through color. The fix is a word, and the word costs nothing.

Where color is the only signal

Sale pricing is the worst offender. A red price with a grey strikethrough old price communicates the discount entirely through color, and about 1 in 12 men have some form of color vision deficiency, most commonly red-green. For those shoppers the sale price and the old price look identical, and the store has advertised a discount it never delivered.

Error states do the same thing. A checkout field outlined in red with no text tells a colorblind shopper nothing, and it tells a screen reader user nothing at all, since the screen reader does not announce the border color. The field is wrong and the page will not say why. Required fields marked only with a red asterisk are the same failure in miniature: the asterisk is a shape, but the red is the signal, and the shape alone does not say required.

The test is embarrassingly simple. Screenshot the page, convert it to greyscale, and read it. If the sale, the error, or the required field is no longer clear, the meaning was carried by color alone. Most teams have never run this test, and most of their pages fail it.

The fix is a word, not a redesign

Add the word Sale next to the price, or put the discount in text: Save 20 percent. Keep the red if you like it; the color is not the problem, the color being the only signal is. A strikethrough on the old price helps too, because the line is a shape that survives greyscale, but the word is the clearest signal and it costs nothing.

Error messages get the same treatment. The field gets a red border and a written message: Enter a valid email address. The message is the signal, the color is decoration, and the page passes both 1.4.1 and 3.3.1 Error Identification at once. Required fields get the word Required in the label, not just a red asterisk.

Links inside body text need the same thinking. A link that is only a different color from the surrounding text fails 1.4.1 unless it is also underlined, and most themes strip the underline for looks. Put the underline back, or bold the link, and the link is identifiable without color.

Why teams keep shipping this

The failure survives because the people who build the page can all see the color. A design review with eight people who all perceive red will approve a red-only sale badge eight times out of eight, and the one shopper who cannot see it never gets a vote. The greyscale test exists to give that shopper a vote.

It also survives because the fix feels like a design compromise, and designers resist adding words to clean layouts. The word Sale is not a compromise. It is the information the color was trying to carry, written down. A layout that hides information from some shoppers is not clean. It is incomplete.

Frequently asked questions

What does WCAG 1.4.1 require?

Color must not be the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. If the sale price is red and the old price is grey, the color alone carries the meaning, and a shopper who cannot perceive the color gets nothing.

Does a strikethrough count as a non-color signal?

Yes. A strikethrough on the old price plus the word Sale, or the new price in bold with a Sale label, gives the meaning in shape and text as well as color. The test is whether the meaning survives when the color is removed.

Do error messages have the same problem?

Yes. A checkout field outlined in red with no text fails the same criterion, and it also fails WCAG 3.3.1 Error Identification, which requires the error to be identified in text. Red plus a written error message passes both.

How do I test for color-only meaning?

Screenshot the page, convert it to greyscale, and read it. If the sale, the error, or the required field is no longer clear, the meaning was carried by color alone. That test takes a minute and finds most of the failures.