How to Let Shoppers Choose Product Variants by Color | The Basics of Color Swatch UI

On an e-commerce product page, a row of tiny colored circles may not tell shoppers what each color is called or which option they have selected. A color swatch UI (user interface) is a set of small color samples used as interactive product choices. A useful swatch selector needs more than attractive colors: it needs clear names, an unmistakable selected state, and controls people can operate in different ways.

Make every swatch a named product option

Product variants are versions of the same item that differ in color, size, or another option. For color variants, give every swatch a name such as “Navy” or “Sand,” and show the current choice in text, for example, “Selected color: Navy.” Shoppers can then confirm a choice even when two colors look similar.

Show the selected option with a stronger border, a double outline, or a check mark. Relying only on a change of hue (the kind of color, such as red or blue) can make the selected state difficult to recognize. A change in shape or outline, supported by text, is more reliable than color alone.

A swatch is an input control, not a decoration. One practical implementation uses a group of labeled radio buttons, which let someone choose one option from several. Properly associated labels and native radio-button states help make the selector usable by keyboard and assistive technology. Show the color names visually and associate each name with its control.

Example: a four-color canvas bag selector

Imagine a canvas bag sold in four colors. Below the product photo, display “Color: Navy,” followed by a row of swatches. These HEX values (hexadecimal codes used to describe screen colors) are design examples, not a guarantee that a display matches the physical material.

• Navy: ■#24324A, a deep blue.
• Sand: ■#D9C6A7, a light beige.
• Sage: ■#61785E, a muted green.
• Terracotta: ■#A35438, a reddish brown.

Use white ■#FFFFFF for the surrounding page and dark gray ■#1F2937 for ordinary text such as color names. Their contrast ratio is approximately 14.68:1. Add an outer border in gray ■#4B5563 around each swatch. That border has a contrast ratio of approximately 7.56:1 against white, so even the pale Sand sample has a visible boundary.

For the selected swatch, add an outer ring in dark gray ■#1F2937 with a narrow white gap between the ring and the sample, and update the text to “Selected color: Sand.” You do not have to recolor the Add to Cart button for each variant. More importantly, the selected name, product details, and available stock must refer to the same variant.

Check visibility, interaction, and unavailable colors

Keyboard focus should look different from the selected-state marker. For example, a blue ■#0B57D0 focus outline has a contrast ratio of approximately 6.39:1 against white. Give the controls comfortable touch areas and spacing, rather than making shoppers aim precisely at a tiny circle.

WCAG 2.2 (Web Content Accessibility Guidelines) generally requires a contrast ratio of at least 4.5:1 for normal-size text and at least 3:1 for essential visual information identifying interface controls and their states. Check each actual pairing of text, outlines, and adjacent backgrounds when you build the selector.

If a color is out of stock, do not communicate that fact only by fading its swatch. Add an explicit “Sold out” label and make the unavailable state clear. Also test whether the color name, photo, price, and stock details stay in sync after every selection. Because people distinguish colors differently, a design that combines color and words offers a clearer way to confirm the chosen product.