Differently-functioning elements must be visually distinguishable

What it is

This is similarity turned around: if looking alike gets read as evidence of the same function, then elements with different functions have to carry enough visual difference on their own, rather than relying on position or a text label to tell them apart. The requirement isn't "not exactly identical" — it's a difference large enough that the similarity-grouping mechanism itself treats them as two separate categories.

Why it happens

Similarity grouping is computed separately per feature channel, and a value that still falls within the same discriminable range on that channel gets grouped together regardless of small differences. Two icons that differ only slightly in shade will likely still be treated as the same category under a quick glance; only once the difference crosses into a range that channel can reliably separate — a genuinely different hue, a different outline shape — does the system sort them into two categories.

This means "distinguishable" isn't a binary judgment; the difference has to land on some feature channel and be large enough on it to actually trigger the classification mechanism that keeps the two apart.

Where it stops holding

Whether a difference is large enough depends on viewing conditions: a difference that reads clearly up close under good lighting can vanish entirely under dim light, a small screen, a quick glance, or reduced vision — those conditions need a bigger margin, and the discriminability threshold under ideal viewing can't be used to judge whether a difference is good enough in general.

Widening a difference along only one dimension (say, only shade) still gives limited separation if that dimension itself is weakly discriminable for part of the user population (color-vision differences, for instance) — a single dimension isn't enough to guarantee reliable distinction in that case.

Applying it

• Give differently-functioning elements a difference on at least one highly discriminable dimension — shape, icon content, or a distinct hue — rather than a shade or weight variation within the same hue, which can't carry the distinction on its own.
• For function pairs with high-stakes consequences (confirm vs. cancel, save vs. delete), prioritize differentiating on a dimension that doesn't depend on color, such as shape or icon, rather than one that only color-normal viewers can reliably tell apart.
• Keep the distinction working under realistic viewing conditions — thumbnails, blur, distance — not just the standard viewing conditions of a design mockup.
• To verify, shrink screenshots of the two elements down to distance-viewing scale, or lower the contrast to simulate dim lighting, and check whether they can still be told apart at a glance.

Related

• Same group: A2.02.1 elements that look alike are perceived as one category · A2.02.2 inferring sameness from similarity causes functional misjudgment
• Nearby: A2.01.4 within-group spacing must be smaller than between-group spacing · A1 visual perception
• Search terms: visual distinguishability · similarity avoidance · icon differentiation