How Should You Choose Colors for a Favorite Button? A Web UI That Makes Its State Clear Before and After Selection

Heart-shaped favorite buttons are common in e-commerce product listings. If their only change is color, shoppers may struggle to tell whether a heart is interactive, whether the item has already been saved, or whether the last tap worked. Make both the unselected and selected states understandable through the heart’s shape, a short label, and a purposeful color change.

Use an outline before selection and a filled heart with a clear label afterward

In a web UI (user interface, meaning the controls people use on a website), an outline heart can represent an item that has not been saved, while a filled heart can represent an item already in favorites. The shape change continues to convey meaning even for someone who cannot easily distinguish red or pink from other colors. Add visible wording such as “Saved,” and make it clear whether activating the control again will remove the item from favorites.

Do not make the unselected heart so pale that it resembles a disabled control. It still needs to look available for interaction. Check an icon and its accompanying text separately, and keep favorite-button emphasis secondary to a purchase action such as “Add to cart.” The goal is not to make the heart the most saturated object on the product card.

Under WCAG (Web Content Accessibility Guidelines) 2.2 Level AA, ordinary-sized text generally needs at least 4.5:1 contrast against its background. Visual information necessary to identify a button and its state generally needs at least 3:1 contrast against adjacent colors. Contrast ratio measures the difference in relative brightness between two colors. Color must not be the only visual cue for an important state.

Example colors for favorite buttons in a handmade tableware listing

Imagine an online shop with photos of white bowls and colorful ceramic plates. HEX is a hexadecimal color code used to specify colors on the web. Assign separate colors to the unselected favorite button, the selected state, and the purchase action. Every ratio below was calculated for the two neighboring colors described.

• Product cards and photos: Use very light gray ■#F7F9FA for the page, white ■#FFFFFF for the product card, and pale blue-gray ■#EEF2F5 for the photo area. The photo background differs from white by only about 1.13:1, so spacing or a border may be needed to separate the image from the information area. Dark blue-gray ■#293B4B product titles on white ■#FFFFFF have about 11.53:1 contrast.
• Unselected heart: Place a circular button with an opaque white ■#FFFFFF surface over the photo, outlined in blue-gray ■#5D6F80. The border contrasts with the surrounding photo surface ■#EEF2F5 at about 4.61:1 and with the white inside at about 5.18:1. Draw the outline heart in darker blue-gray ■#566679, with about 5.88:1 contrast against white. Include a nearby “Favorite” description so shoppers recognize the purpose of the control.
• Selected heart: Change the button’s interior to pale rose ■#FBECEE and use deep rose ■#92334F for the border. The border contrasts with the rose fill at about 6.53:1 and with the adjacent photo background ■#EEF2F5 at about 6.64:1. A solid deep-red-purple ■#A12247 heart has about 6.47:1 contrast on the rose fill. Add a visible “Saved” label so the state is communicated by color, shape, and text together.
• Keep purchasing distinct: Put the “Add to cart” action on the white ■#FFFFFF information area, using a deep blue-teal ■#1E5366 button with white ■#FFFFFF text. The contrast between white and the button fill is about 8.45:1. Giving the purchase action a more substantial filled treatment keeps it distinct from the smaller favorite toggle.
• Keyboard focus: When the favorite button receives keyboard focus, consider an outer dark-blue ■#1D5B91 focus outline. It contrasts with the pale photo background ■#EEF2F5 at about 6.31:1 and with white ■#FFFFFF at about 7.10:1. Focus should be recognizable independently of whether the item is saved.

Check save confirmation, mobile tapping, and accessible state

Switching immediately to a filled heart before saving has actually succeeded can incorrectly suggest that the item was added. Distinguish a pending operation from confirmed success, and if saving fails, restore the original appearance or show an error. When a shopper activates the button again to remove an item, return to the outline heart and update any “Saved” message.

The implementation should expose the same state to assistive technology. One option is to keep the accessible name “Favorite” unchanged and update the aria-pressed attribute from false to true when the toggle is activated. If the design instead changes an action label from “Add to favorites” to “Remove from favorites,” do not automatically combine that pattern with an unchanged toggle-label convention; choose a semantic approach that fits the intended interaction. On phones, make the tappable target comfortably larger than the visible heart artwork.

If the button overlays different product photographs, a translucent background will change the actual adjacent colors as the images change. Start with an opaque button surface, calculate the contrast for that specific combination, and check the result on real mobile-width layouts. HueRoll lets you adjust candidates by HEX and compare a selected color against white or black, but it cannot compare arbitrary pairs of colors or automatically determine WCAG AA or AAA compliance. Calculate the actual heart, border, and button-surface pairs separately.