How to Distinguish Regular and Sale Prices by Color on E-commerce Sites

On an e-commerce site—an online store—regular and sale prices may appear together, making it unclear which amount shoppers would pay now. Enlarging a red number is not enough to explain whether a figure is a former price or the current selling price. Combine color with clear labels, a strikethrough where appropriate, and a consistent difference in text emphasis so shoppers can identify the current price without guessing.

Emphasize the current selling price and make comparison prices secondary

For a product that is not discounted, display its current selling price clearly in a dark, restrained color. For a sale item, emphasize the current discounted price and place the comparison price in a less prominent position. Since the numbers have different meanings, keep their labels and relative placement consistent across product cards.

Use visible descriptions such as “Regular price” and “Sale price.” A former price can also be crossed out, but neither color nor strikethrough should be the only cue. People who cannot easily distinguish hues, or who see a page in grayscale, still need to know which amount applies. In HTML (the markup language that structures webpages), the del element is one way to mark an amount that is no longer current; keep the accompanying text label to make its role understandable.

If the discount price and an “Add to cart” button both use equally strong emphasis, the price and the next action may compete for attention. Assign a role to each: the sale color identifies the current discounted amount, while a separate color already used for purchasing controls identifies the button.

Example regular-price and sale-price cards for a storage box

Imagine an online shop displaying storage boxes, some discounted and others sold at their ordinary prices. The amounts below are fictional examples for explaining the layout. HEX is a hexadecimal color code used to specify web colors. Each contrast ratio measures the difference in relative brightness between the stated text or interface color and the adjacent background.

• Product-card backgrounds: Use pale blue-gray ■#F7F9FB for the page and white ■#FFFFFF for the cards. Their contrast ratio is only about 1.06:1, so spacing and heading placement should help separate the cards. Keep the area around prices free of unnecessary accent colors.
• Item sold at its regular price: On a white ■#FFFFFF card, use dark slate ■#253449 for “Selling price ¥8,000.” This text color has about 12.60:1 contrast against white. Avoid attaching a sale-colored highlight to an item that is not discounted.
• Comparison price on a sale item: On the white ■#FFFFFF sale card, show muted blue-gray ■#627184 text such as “Our regular price ¥8,000,” with the former amount smaller than the current sale price. Blue-gray against white has about 4.98:1 contrast. Use a comparison price only when its accuracy is supported by genuine pricing history; both the label and the strikethrough help explain that it is not the amount currently charged.
• Current sale price: On the same white ■#FFFFFF card, use deep rose red ■#9A2439 for “Sale price ¥6,400.” The ratio against white is about 7.82:1. Make the current amount bolder and larger than the comparison amount, so the price shoppers would pay is encountered first.
• Small sale label: Put the words “Sale price” in deep reddish purple ■#8B2333 on a pale pink ■#FFF0F2 label. Text against its label has about 7.96:1 contrast. Pale pink against the surrounding white ■#FFFFFF differs by only about 1.11:1, so the background tint alone cannot communicate the sale status. Deep rose red ■#9A2439 on pale pink has about 7.07:1 contrast if that combination is used nearby.
• Purchase action: Use a deep teal ■#205D71 “Add to cart” button on the white ■#FFFFFF card for both regular-price and discounted products. Teal against white, and white ■#FFFFFF text against the teal button, each give about 7.33:1 contrast. Keep the purchasing action consistent and reserve the sale color for the price information.

Verify the comparison price and review the mobile layout

A comparison amount labeled “Our regular price” should be based on a verifiable selling price, not an invented high figure designed to make the offer appear better. In Japan, the Consumer Affairs Agency publishes guidance on displaying former prices alongside discounted prices. Check the actual pricing history and applicable local rules before making a dual-price claim.

On smartphones, keep each label close to the amount it describes even when the text wraps onto additional lines. Convey the discount through wording as well as visual treatment, and do not rely solely on a strikethrough. Explain any relevant tax, shipping, or other purchase conditions clearly so shoppers can understand the amount they will ultimately pay.

WCAG 2.2 (Web Content Accessibility Guidelines) generally requires ordinary-size text to have at least 4.5:1 contrast against its background, and it requires that color not be the only visual means of communicating information. HueRoll lets you adjust colors using HEX and check a selected color against white or black, but it cannot compare arbitrary color pairs or automatically assess WCAG AA or AAA compliance. Check the actual background combinations separately.