How to Show Checkout Steps with Color on E-commerce Sites | Color Schemes That Make the Current Step Clear

During an e-commerce checkout, people may lose track of which information they have entered and what remains to be done. A checkout step indicator should make completed, current, and upcoming stages distinguishable—not just by color, but by numbers and text as well. This article shows how to build a color scheme that makes the current position clear in a three-step checkout.

Give completed, current, and upcoming steps distinct roles

A checkout step indicator is an on-screen guide that divides the ordering process into a series of stages. For example, a store might show “1 Cart → 2 Delivery and payment → 3 Review order,” with the current stage emphasized. Completing the cart does not mean the purchase is complete, so the indicator must not imply that an order has been placed before checkout succeeds.

For a completed step, display a check mark and the word “Complete.” For the current step, use a stronger outline or filled circle and the word “Current.” For a future step, keep its number visible and add “Not started.” Changing only the hue (the type of color, such as green or blue) can be hard for some people to distinguish. Combine color with shapes and labels. Do not rely on the connecting lines alone; include a page heading such as “Step 2 of 3: Delivery and payment.”

If the step indicator is informational rather than interactive, do not style every item like a clickable button. When customers are allowed to return to completed steps, make only those destinations into actual links. Also check that information they have already entered is preserved when they go back.

Example color scheme for a three-step checkout

Imagine a fictional online store selling earbuds. The shopper is currently entering their delivery and payment details in the second stage. HEX is a hexadecimal code that identifies a color on a screen. For a checkout page with a white background, assign these roles:

• Use white ■#FFFFFF for the page and dark gray ■#243447 for ordinary headings and explanatory text. Their contrast ratio (a measure of relative brightness difference) is approximately 12.67:1.
• For “1 Cart (Complete),” use a deep green ■#21614C circle with a white ■#FFFFFF check mark. The circle against white and the check mark against the circle both have approximately 7.29:1 contrast.
• For “2 Delivery and payment (Current),” place a white ■#FFFFFF numeral “2” inside a blue ■#1E527B circle. Frame the step label with a pale blue ■#E7F1F8 area. The white numeral against blue has approximately 8.24:1 contrast, while blue text or a blue outline against pale blue has approximately 7.20:1.
• For “3 Review order (Not started),” use a white ■#FFFFFF circle with a gray ■#64748B outline. The outline has approximately 4.76:1 contrast against white. Use darker gray ■#475569 for the numeral and label; it has approximately 7.58:1 contrast against white.
• Use the same gray ■#64748B for connecting lines. They have approximately 4.76:1 contrast against the white background. Keep the words “Complete,” “Current,” and “Not started” visible so the line color never carries the meaning by itself.

For the “Review order details” button on this page, use a blue ■#1E527B background with white ■#FFFFFF text. Their contrast ratio is approximately 8.24:1. The blue step indicator and blue button have different purposes; the button label must make its action clear.

Keep the indicator accurate as checkout progresses and on mobile

After a stage is successfully completed, update that stage to “Complete” and mark the next one “Current.” If an input error prevents progress, do not move the current-step marker forward. Instead, show what needs fixing beside the relevant field. Display an “Order complete” message only after the store has actually accepted the order, rather than after the customer merely reaches the review stage.

WCAG 2.2 (Web Content Accessibility Guidelines) generally requires at least 4.5:1 contrast for normal-size text against its background, and at least 3:1 for meaningful graphics and essential visual details of user interface components against adjacent colors. To communicate the current step to assistive technology, developers can use aria-current="step", an attribute that identifies the current item in a sequence.

On phones, test whether step names become truncated or detached from their numbers. If space is tight, stack the stages vertically and show the progress as “2 of 3” as well. When the color, number, and written status remain consistent, shoppers can find their place in the checkout from any screen.