Tips for Using Red in Sale Displays | E-Commerce Color Schemes That Don’t Feel Too Strong

When using red for sale displays, it is usually easier to control the design by limiting red to the key discount information instead of spreading it across the whole page. This example uses deep red ■#B42318 with white ■#FFFFFF, pale red ■#FFF1F0, and a dark body-text color ■#2B2B2B to keep an e-commerce sale design from feeling too strong. Red does not create a fixed sense of savings or urgency on its own; its effect depends on area, lightness, and surrounding colors, so giving it a limited role is a practical starting point.

Limit the area used for sale emphasis

Use red ■#B42318 for short pieces of information such as “10% OFF,” “SALE,” or “Limited Time.” With white ■#FFFFFF as the page background and dark gray ■#2B2B2B for body text, red ■#B42318 can be separated as a small accent. A contrast ratio, the difference in relative luminance between a foreground and background, is about 6.57:1 for red ■#B42318 against white ■#FFFFFF and about 14.16:1 for dark gray ■#2B2B2B against white ■#FFFFFF.

If an entire sale card is filled with red ■#B42318, it can compete visually with product photos, prices, and the purchase button. Instead, use pale red ■#FFF1F0 for the card surface and reserve red ■#B42318 for the sale label or discounted price. This keeps the colors related while narrowing the area of strongest emphasis. Red ■#B42318 against pale red ■#FFF1F0 has a contrast ratio of about 5.98:1.

Separate the roles of price, discount, and purchase action

On a product card, one option is to show the regular price in gray ■#667085, the sale price in red ■#B42318, and the background in white ■#FFFFFF. Gray ■#667085 against white ■#FFFFFF is about 4.97:1, while red ■#B42318 against white ■#FFFFFF is about 6.57:1. Labeling the values as “Regular Price” and “Sale Price,” rather than relying only on a strikethrough or color difference, also makes the meaning clearer for people who may not distinguish the colors easily.

If a discount badge uses red ■#B42318 as its background, white ■#FFFFFF text provides about 6.57:1 contrast. Using the same red ■#B42318 for the purchase button, however, can make the discount information and primary action compete for attention. Use a different color already assigned to the site’s main purchase action, or, if red ■#B42318 is also used for that action, separate “purchase” and “discount” through area, position, and text labels. Do not communicate a sale state through color alone; include visible text such as “20% OFF” or “Limited Time.”

Check text contrast before using a very bright red

Pure red ■#FF0000 has a contrast ratio of about 4.00:1 against white ■#FFFFFF, which does not meet the 4.5:1 minimum required by WCAG (Web Content Accessibility Guidelines) 2.2 for normal-size text. Large text has a 3:1 minimum, but for normal-size text such as prices or notes, choosing a darker red such as ■#B42318 gives more contrast margin.

WCAG 2.2 also requires that color not be the only visual means of conveying information. In addition, non-text information needed to identify user-interface components or states must have at least 3:1 contrast against adjacent colors. Pale red ■#FFF1F0 and white ■#FFFFFF have a ratio of about 1.10:1, so their difference alone should not be used as a necessary boundary for an input or button.

In HueRoll, you can adjust candidate colors with three- or six-digit HEX codes, a hexadecimal notation used to represent web colors, or with the color picker, then check the selected color against white and black. HueRoll does not compare arbitrary color pairs or automatically determine WCAG AA or AAA conformance, so verify the actual adjacent background, text, and boundary colors used in the sale display separately.