What Colors Work for an Order Confirmation Page? How to Make Order Details Easy to Review After Purchase

TIPS

After placing an online order, a large “Complete” message may feel reassuring at first. But if shoppers cannot find their order number or payment status, they may still be unsure what happened. An order confirmation page is no longer a screen for progressing through checkout. It is a place to review the outcome and order details. Rather than filling it with celebratory colors, use a clear visual structure for “What was accepted” and “What to check next.”

Show the order result first, then present details in a calm layout

Display “We have received your order” only after the system confirms that the order was successfully recorded. A check mark beside the heading can reinforce the message, but the green symbol should not be the only way to communicate success. An accepted order does not necessarily mean its payment has cleared or the goods have shipped.

Below the confirmation message, group the order number, purchased products and quantities, total price including tax, payment method, and the delivery details shoppers need to verify. Keep field labels and amounts in consistently dark text so they can be scanned without giving every piece of information a different color. Explain the real status of the confirmation email and how to access order history.

Showing another “Place order” button after a purchase may be mistaken for a required step or cause an unintended repeat action. Instead, make “View order history” or another review action the main button.

Example palette for an online stationery shop

Imagine a fictional stationery shop’s confirmation screen after someone orders two notebooks. The actual confirmed order number and amount would be inserted into the page. HEX (a hexadecimal code representing a screen color) can be used to separate the result, details, and next actions as follows:

Set the page background to white ■#FFFFFF and regular headings and body text to dark gray ■#243447. The contrast ratio (a measure of relative brightness difference) is approximately 12.67:1.
Give the order-received banner a pale mint ■#EAF5EE background and a deep green ■#21614C heading reading “We have received your order.” Their contrast ratio is approximately 6.53:1. If you add a white ■#FFFFFF check mark inside a deep green ■#21614C circle, the check mark and circle contrast at approximately 7.29:1.
Use a light gray ■#F3F6F8 panel for the order number, items, quantities, and total, with dark gray ■#243447 text. This combination has approximately 11.68:1 contrast. A gray ■#64748B border around the panel contrasts with its background at approximately 4.38:1.
Only when payment has not yet been confirmed—for example, with certain convenience-store payment methods—show “Payment confirmation pending” in dark brown ■#7A4A06 on a pale cream ■#FFF4E5 panel. The contrast ratio is approximately 6.88:1. Do not show this message for an order whose payment has already been confirmed.
Use a blue ■#215D77 “View order history” button with white ■#FFFFFF text, giving approximately 7.25:1 contrast. A secondary “Continue shopping” text link in the same blue ■#215D77 against white ■#FFFFFF also has approximately 7.25:1 contrast.
For supporting notes about confirmation email and contact options, use gray ■#475569 text on a light gray ■#F3F6F8 panel. The ratio is approximately 6.98:1, keeping helpful information visible without giving it the strongest emphasis.

Keep payment and shipping states accurate, and check the mobile layout

“We have received your order” refers to the order being accepted. If payment is awaiting confirmation, display that separately instead of claiming payment is complete. Do not say an item has shipped before dispatch, and do not mark an email “Sent” while it is still pending. Give shoppers a way to save their order number, and make sure order-history access is restricted so people can view only their own orders.

WCAG 2.2 (Web Content Accessibility Guidelines, a standard for making web content more accessible) generally requires a contrast ratio of at least 4.5:1 for ordinary text against its background and 3:1 for meaningful graphics against adjacent colors. Pair the check mark with written confirmation. If a page updates to show the result without navigating away, consider a notification that also communicates the change to screen readers.

On a phone, check that the confirmation result and order number appear near the top, and that the total does not wrap awkwardly. Reopening the confirmation page should not create a second order, and its buttons should not lead to an accidental repeat purchase. By keeping success colors restrained and important numbers and next actions explicit, the page becomes easier to review after checkout.