Closely spaced swatches can select the wrong variant when tapped with a thumb.
Touch targets for colors, sizes and cart controls
Give small choices sufficient hit area and spacing. A visible swatch may be small while its button is larger.
Research context: W3C WAI · Target size and spacing ↗
Measure the target, not just its icon. WCAG minimums and exceptions are no reason to minimize important controls.
Try the pattern
Task and expected result
- 01
At 390 px, select adjacent colors and check the correct variant.
- 02
Measure the button around the swatch rather than just the dot.
- 03
Test keyboard and zoom: larger targets must not hide labels.
How to investigate value
Observe whether shoppers can select variants, correct errors and return from a dialog without assistance.
Watch for side effects
Hidden focus, keyboard traps, unexplained errors and controls covering content when zoomed.
This is a proposed investigation, not a measured result. Choose one hypothesis and define the audience before testing.
Build a measurement plan for this concept ↗