Should the Button Color Change After Adding an Item to the Cart? Color Schemes That Communicate the State

Should an online store turn its “Add to cart” button green immediately after someone presses it? A color change can help people notice a result, but it does not explain whether the item was actually added or whether the button can be pressed again. After an add-to-cart action, clarify whether the request is still processing, has succeeded, or has failed, and explain which action is available next.

Communicate the result and next action before choosing a new button color

On an e-commerce site that allows shoppers to add the same product more than once, the main button can keep its original color after a successful addition. Its wording might change to “Add another one,” while a separate message with a check mark says “Added one item to your cart.” This communicates success through words and shape, not color alone. There is no need to fade a button to disabled-looking gray while the action remains available.

When the product cannot be added a second time, it may be more useful to replace the original action with a functioning “View cart” button. Avoid leaving a button labeled “Added” when customers cannot tell what pressing it would do. The displayed wording should always match the button’s real behavior.

While the request is processing, do not treat it as success yet. Show a message such as “Adding…” and, when appropriate, temporarily prevent repeated submissions. If the request fails, provide a clear error and a way to retry rather than displaying a success color. Color should reinforce the actual outcome, not substitute for it.

Example colors for three stages on a food-storage-container product page

Imagine a fictional online shop selling sets of food-storage containers, with the option to add the same set multiple times. HEX is a hexadecimal code used to specify colors on the web. The following contrast ratios measure the difference in relative brightness between the two colors that actually touch.

• Page and product-information area: Use pale gray ■#F6F8FA around the page and white ■#FFFFFF behind the product information. These surfaces differ by only about 1.06:1, so spacing and headings should also distinguish the content. Dark blue-gray ■#263849 product-name text has about 12.04:1 contrast against white.
• Before adding — “Add to cart”: Place a deep blue-teal ■#185875 button on the white ■#FFFFFF product area, with white ■#FFFFFF lettering. Both the white lettering against the fill and the fill against the white surrounding area have about 7.80:1 contrast. Keep this color consistent with the store’s other purchase actions.
• While adding — “Adding…”: Keep the same deep blue-teal ■#185875 surface and white ■#FFFFFF text while the request runs. Explain the pending state with wording and, if useful, a progress indicator rather than a color that could suggest completion. Also consider protection against accidental duplicate submissions.
• After success — confirmation message: Show a small message on a pale-green ■#E6F4EA background next to the button, with a check mark and dark-green ■#205C43 text reading “Added one item to your cart.” The text and mark have about 6.92:1 contrast against that green surface. The pale green differs from surrounding white ■#FFFFFF by only about 1.14:1. If a visible panel boundary is useful, a darker green ■#287052 outline has about 5.24:1 contrast against the inside and 5.95:1 against white outside.
• Next steps — “Add another one” and “View cart”: Keep the active primary button in deep blue-teal ■#185875 and change its label to “Add another one” when repeating the action is allowed. Offer a separate “View cart” action with blue-gray ■#315C74 text and outline on white ■#FFFFFF; both the text and border have about 7.21:1 contrast against white. The two controls have different purposes, made clear by their labels.

Check error handling, screen-reader announcements, and keyboard access

If adding fails, an error message can use a pale-red ■#FFF0ED background and dark reddish-brown ■#923B30 text such as “Could not add the item. Please try again.” That combination has about 6.55:1 contrast. A delayed response can sometimes make the result uncertain, so verify the server’s actual outcome and the cart quantity before settling on the final status. Do not let the message and cart contents disagree.

When a result appears without navigating away from the page, communicate it to people using assistive technology as well. For example, role="status" can identify an update such as “Added to cart” so that it may be announced without moving keyboard focus. Use appropriate handling for errors and progress messages too. Ensure the focus indicator remains visible whenever an interactive button is available.

WCAG (Web Content Accessibility Guidelines) 2.2 generally requires at least 4.5:1 contrast for ordinary-size text against its background and at least 3:1 for visual information needed to identify user interface controls or their states against adjacent colors. A color change must not be the only means of conveying success or failure. HueRoll lets you adjust candidate HEX colors and compare the selected color against white or black, but it cannot compare arbitrary pairs or automatically determine WCAG AA or AAA compliance. Calculate pale notification surfaces against their actual text colors separately.