Should Sold-Out Products Be Faded? How to Communicate Their Status on E-commerce Sites

Some e-commerce sites fade an entire product card to indicate that an item has sold out. But if the image and product name both become faint, shoppers may struggle to identify the product they were interested in. The goal is not simply to make a sold-out item pale. It is to communicate that it cannot currently be purchased while keeping its details and any available next steps clear.

Use a sold-out label and purchasing state instead of fading everything

You do not need to fade every product image and line of text. Keep the item’s shape, color, and name recognizable, and add an explicit “Sold out” label near the image or price. A softer background or slightly reduced saturation (the vividness of a color) can support that message, but should not be the only signal.

Reducing the opacity of the entire product card makes all of its contents more transparent, including the price and the message explaining that the item is sold out. That can make the most important information harder to read. Avoid treating the whole card as one element that must be faded.

For a sold-out item, make sure the Add to Cart control cannot actually add it to the order, and show that restriction on the page. If the store offers a working restock-notification service, provide that as a separate action. If only one size is unavailable, label that size “Sold out” rather than making the entire product appear unavailable.

Color example: two ceramic mugs in a product listing

Imagine a listing containing two ceramic mugs. One can be purchased, while the other is sold out. The HEX values below (hexadecimal codes for screen colors) illustrate a possible design, rather than colors that every store must use.

• Keep both cards on a white ■#FFFFFF background, with a pale gray ■#F3F5F7 area behind each product photo. Preserve the real product colors in the sold-out photo.
• Use dark gray ■#243344 for product names and prices. Against white, the contrast ratio (the difference in relative brightness) is approximately 12.87:1. Keep this text color the same for sold-out items.
• Place a “Sold out” label at the upper-left corner of the unavailable mug’s photo. Use a dark gray ■#3D4756 label background with white ■#FFFFFF text; the text-to-background contrast ratio is approximately 9.40:1.
• For the available mug, set the Add to Cart button in blue ■#1D5871 with white ■#FFFFFF text. This combination has a contrast ratio of approximately 7.82:1.
• For the unavailable mug, use a pale gray ■#E5E9EE purchase button labeled “Unavailable” in dark gray ■#475569. The contrast ratio is approximately 6.21:1. Disable the purchasing action in the site’s functionality as well.

If restock alerts are genuinely offered, add a separate “Notify me when available” control. A white ■#FFFFFF background with blue ■#285D79 text and border gives both the text and border a contrast ratio of approximately 7.16:1 against white.

Check what is faded and what must remain readable

If you want sold-out items to recede slightly in the listing, apply the subtle fading only to the photo area. Keep the product title, price, and “Sold out” label at their normal strength. When buyers need to inspect a product’s color, leave a detail page where they can see an unfaded image. Give any label placed over a busy photo an opaque background so it remains legible.

WCAG 2.2 (Web Content Accessibility Guidelines) generally calls for at least 4.5:1 contrast between normal-size text and its background, and at least 3:1 between the essential visual boundaries of operable controls and adjacent colors. There is an exception for controls that are genuinely inactive, including disabled buttons. Even when that exception applies, explanatory sold-out text and any working restock button should remain easy to perceive.

Finally, check the page on a phone: can customers tell immediately which mug is unavailable, is the sold-out item actually prevented from entering the cart, and does the restock-notification option really work? Do not display a promise of notifications where the store does not provide that service or cannot offer a restock.