How to Show In-Stock, Low-Stock, and Sold-Out Statuses with Color

When shoppers choose between color variations of the same product, unclear “In stock,” “Low stock,” and “Sold out” indicators make it harder to identify what can actually be purchased. Green, amber, and gray can help organize the information, but color alone is not enough to communicate availability. Pair each status with explicit wording and make sure the available purchase action matches the item’s actual inventory state.

Prioritize the status wording and whether the item can be purchased

Start by giving each product variation a written label: “In stock,” “Low stock,” or “Sold out.” A variation is an option such as a different size or color of the same product. You might associate green with available items, amber with limited stock, and gray with sold-out items, but the wording must remain readable even when the colors are difficult to distinguish.

“Low stock” should have an operational definition tied to actual inventory. Decide what quantity counts as low, and update the label whenever stock levels change. If you show an exact count, use only a verified current number. Avoid inventing urgency with unsupported claims such as “Only three left.”

When an option is sold out, make that state affect purchasing behavior as well as the label. Do not leave an active “Add to cart” button that appears to allow an unavailable product to be ordered. Show “Sold out” clearly. If the shop offers an actual restock-notification feature, present that separately from a purchase action, without promising a restock that has not been confirmed.

Example status colors for a stainless-steel bottle with three variations

Imagine a shop selling a stainless-steel bottle in navy, ivory, and charcoal. Their availability in this example is fictional and is used only to demonstrate the design. HEX is a hexadecimal color code for web colors. The contrast ratios below measure the difference in relative brightness between specified neighboring colors.

• Page and product-card surfaces: Use a very pale blue-gray ■#F7F9FB for the page and white ■#FFFFFF for the product cards. The ratio between them is only about 1.06:1, so use spacing and consistent product-name placement to organize the cards. Product names in dark blue-gray ■#233445 have about 12.74:1 contrast against white.
• Navy bottle — In stock: Place “In stock” in dark green ■#25613D on a pale-green ■#ECF8F0 label. Text and background have about 6.74:1 contrast. The green is an availability cue, not the color of the navy bottle itself; keep those two meanings separate.
• Ivory bottle — Low stock: Use a light amber ■#FFF4DB label with dark brown ■#805415 wording reading “Low stock.” This pair has about 6.01:1 contrast. If the remaining quantity has not been verified, do not add a made-up number such as “Only two left.” When this variation can still be ordered, use the same purchase-button color as the in-stock variation.
• Charcoal bottle — Sold out: Display “Sold out” in dark gray ■#4B5563 on a light-gray ■#F0F2F5 label, with about 6.74:1 contrast. Avoid fading the product image so much that its shape and color become difficult to judge. Keep the photo inspectable, while ensuring the unavailable variation cannot be purchased through an enabled order action.
• Purchase button for available options: Use a deep blue ■#1D5874 “Add to cart” button on a white ■#FFFFFF card, with white ■#FFFFFF lettering. Both the filled button against white and the white text against the fill have about 7.78:1 contrast. Use that same action color for in-stock and low-stock variations, leaving stock status to the labels.

Give the product’s own color choices written names such as “Navy,” and place availability labels next to the relevant choice. The product-color selector should identify which item is selected; the stock label should explain whether it can be ordered. These are two different jobs, even though both may use color.

Check small-screen layouts and keep inventory information current

On a smartphone, variation swatches, prices, and availability labels may sit close together. Keep the labels large enough to read and near the selected variation, so shoppers do not accidentally associate a stock message with the wrong color option. If sold-out variations are hidden entirely, consider whether shoppers still need to know that other product colors exist. “Sold out” and “Discontinued” do not mean the same thing; do not promise that an item will return without confirmed plans.

WCAG (Web Content Accessibility Guidelines) 2.2 requires that color not be the only way to communicate information. Ordinary-size text generally needs at least a 4.5:1 contrast ratio against its background, while visual details necessary to identify interactive controls or their states generally need at least 3:1 against adjacent colors. A pale stock-label surface is not necessarily an interactive button, so these requirements do not mean every label fill must contrast with white by 3:1. Evaluate label-text readability and interactive control visibility separately.

HueRoll lets you adjust candidates using HEX and check a selected color against white or black. It cannot compare arbitrary pairs of colors or automatically assess WCAG AA or AAA conformance. Calculate actual text-to-label color pairs separately, and check that the inventory status shown to shoppers is current.