ToolSahla, Tools Sahla

My sale price is in bright red on white and looks very clear. Why does it fail the contrast check?

Because contrast measures the difference in lightness, not how vivid a colour is, and pure red is lighter than it looks. #FF0000 on white gives 4.00:1, short of the 4.5:1 needed for normal text. A slightly deeper red such as #D32F2F gives 4.98:1 and still reads as a sale colour.

Published · 3 min read

What the ratio actually measures

The tool turns each colour into a single number called relative luminance, then compares the two. In that number the three channels are not equal: green contributes about 0.7152, red about 0.2126 and blue about 0.0722. You can see the formula under 'Formulas used' at the bottom of the tool.

Pure red fills the red channel completely, so its luminance is 0.2126, which is not small. Against white, with a luminance of 1, the ratio the tool shows is 4.00:1. The eye sees red as loud because it is saturated, while the ratio sees a mid-lightness colour. Loud is not the same as readable, especially for a small number like a price.

What the tool shows

  • #FF0000 on #FFFFFF: 4.00:1. Passes AA large text and UI components, fails AA normal text.
  • #D32F2F on #FFFFFF: 4.98:1. Passes AA normal text and AAA large text.
  • #FF0000 on a cream #FFF4E5 background: 3.68:1, so it gets worse on off-white backgrounds.

If your sale price is shown big, at 24 px or more, pure red passes AA for large text. A price on a product card at 14 or 16 px is normal text and needs 4.5:1.

Finding a red that passes and still looks red

  1. Open the Color contrast checker, type #FF0000 in 'Text color' and your product card background in 'Background color'.
  2. In the suggestions section, choose the 4.5:1 target.
  3. 'Nearest darker color' shows #EE0000 at 4.53:1, the smallest change on that path.
  4. If you want more headroom, try a shade like #D32F2F by typing it in yourself: 4.98:1.

Why pick #D32F2F over #EE0000? It clears the line comfortably, so it keeps passing if a designer lightens the background a touch later. #EE0000 sits almost on the edge.

Common sale price mistakes

  • Translucent red: the tool composites #FF000080 over white first, giving #FF7F7F, and the ratio drops to 2.44:1.
  • A pale grey struck-through old price: it is text too, and worth checking so shoppers can see what they save.
  • Relying on colour alone: add 'Sale' or the percentage next to the price, since some shoppers cannot tell red from green at all.

To work out the discounted price and the saving itself, use the Discount calculator, then confirm here that the resulting number is readable. A passing ratio is a check of two colours only and does not on its own show that a product page is accessible to everyone.

Common questions

Is 4.00:1 close enough to 4.5:1?

No. The tool judges by the exact, unrounded ratio, and anything under 4.5 fails for normal text however close it gets.

Why does #D32F2F feel less exciting?

It is darker and a little less saturated. It still reads clearly as red, and the loss in punch is much smaller than the gain in legibility.

Is green better for sale prices?

Check it rather than assume. Green carries the biggest weight in lightness, so many bright greens are very light on white.