Similar colors are hard to distinguish; a screen reader cannot use hue as a label.
Color and size names as text, not just symbols
Provide readable color and size names. A swatch supplements the text rather than replacing it.
Research context: Baymard · Product-list information ↗
Unique names and selection states help everyone. Technical variants should include their units.
Try the pattern
Task and expected result
- 01
Use the keyboard to select a color and check its readable name.
- 02
Switch language: retain the same variant.
- 03
Check sold-out text without relying on gray styling alone.
How to investigate value
Ask shoppers to explain their variant choice and fit. Later measure confirmed purchases per eligible product visitor, with return reasons as follow-up.
Watch for side effects
Wrong sizes, unknown details shown as facts, mismatched expectations and product-related support/returns.
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 ↗