How to Display Delivery Status Using Color | Web UI That Makes Order Statuses Easy to Tell Apart

After ordering online, shoppers may open a delivery status page but still wonder whether the parcel has been dispatched, is moving through the carrier’s network, or has already been delivered. Colored dots alone do not answer those questions. An order-status UI (user interface, the part of a page that displays the order’s state) should pair color with clear labels, update times, and useful next steps. Here is how to present the delivery journey without making claims the store cannot verify.

Separate order received, shipped, in transit, and delivered

An order can be accepted without being shipped. “Order received” means the purchase has been recorded. “Shipped” means the seller has confirmed dispatch. “In transit” should indicate that movement or transport is supported by the carrier’s tracking information or another reliable update. Show “Delivered” only after the delivery has actually been reported as completed by the carrier or another authoritative source.

Not every store receives updates for all four stages. If the system cannot verify an intermediate event, do not guess that the stage is complete; use fewer steps instead. An estimated delivery date is also a forecast, not a confirmed delivery event, so label it as an estimate rather than promising that the parcel will arrive at a particular time.

A progress indicator (a display showing how far a process has advanced) should combine numbers, status names, and words such as “Done,” “Current,” and “Not yet reached.” Give completed stages a check mark and the current stage a stronger outline. This makes the meaning understandable without relying on differences in hue, or the type of color, such as blue and green.

Example colors for a folding-umbrella delivery page

Imagine a fictional accessories shop where a customer orders a folding umbrella. The carrier’s tracking information currently confirms that the parcel is “In transit.” HEX codes are hexadecimal values used to describe colors on a screen. The following colors are an interface proposal, not a universal color system used by delivery companies.

• Use white ■#FFFFFF for the page and dark gray ■#243447 for text such as order numbers and dates. Their contrast ratio (a measure of the difference in relative brightness) is approximately 12.67:1.
• Show “1 Order received (Done)” and “2 Shipped (Done)” on a pale gray ■#F2F5F8 background with dark gray ■#475569 text. Text-to-background contrast is approximately 6.93:1. Include a check mark and “Done” so these steps are not mistaken for the current stage.
• Use a pale blue ■#E8F3FC panel for the current stage, “3 In transit,” with deep blue ■#174B75 text and outline. The text and outline contrast with the panel at approximately 8.11:1. Add a heading such as “Current status: In transit.”
• For “4 Delivered,” which has not yet been reached, use the pale gray ■#F2F5F8 background and dark gray ■#475569 text, together with “Not yet reached.” Only once delivery is verified should the completed delivery state switch to pale green ■#E7F6ED with deep green ■#175D46 text. The green combination has approximately 6.99:1 contrast.
• If connecting lines carry useful progress information, use gray ■#64748B against white ■#FFFFFF for approximately 4.76:1 contrast. The line’s color must not be the only way to determine which stages have passed.
• For a “Track with carrier” link, deep blue ■#174B75 on white ■#FFFFFF has approximately 9.13:1 contrast. Show the carrier’s name and tracking number only when they are actually available, and connect the link to the correct tracking service.

Handle delays, update times, and delivery questions carefully

If the carrier has reported a delay, keep the delivery timeline accurate and add a separate notice such as “Delivery delay update,” along with the confirmed explanation and where to find further information. A pale cream ■#FFF5DD background with dark brown ■#895305 text provides approximately 5.86:1 contrast. Do not invent a delay message or promise a new arrival date based on speculation.

Show the time of the most recent update and its source when the information is available. The store may record “Shipped” at a different time from the carrier recording “In transit.” If tracking shows “Delivered” but the shopper cannot find the parcel, keep the tracking and contact options accessible instead of assuming that the customer has physically received it.

WCAG 2.2 (Web Content Accessibility Guidelines, standards for accessible web content) generally requires a contrast ratio of at least 4.5:1 for normal-size text against its background and at least 3:1 for meaningful graphics and essential UI indicators against adjacent colors. On mobile, check that the stage name still lines up with its status and update time. By describing verified delivery events in words and using color as a secondary cue, a store can make order updates easier to understand.