Visual difference between states must exceed noise

What it is

Drawing all five states is not enough. If default and hover differ by a few percent of lightness, or pressed only drops a one-pixel shadow, real backgrounds, compressed screens, and averted gaze will swallow the change as noise. The gap between states has to exceed a just noticeable difference (JND) so people can read which state they are in without staring at the transition. What must be discriminable is state identity, not whether a style pass happened.

Why it happens

Vision detects change by contrast. Button state changes often occur just as gaze leaves, or while a finger occludes the control. The remaining signals are a lightness step, a hue step, or a sudden shift in position or scale. If that step sits inside glare, subpixel rendering, a low-contrast theme, and motion from nearby animation, detection fails: the machine exists in code and collapses to one state in perception. Weber’s law is the reminder that a detectable increment is a proportion of the current baseline, not an absolute swatch. A slightly lighter hover on an already light rest fill falls under that ratio; a slightly darker press on a dark fill is swallowed the same way. Scrolling, skeleton flicker, and the button’s own loading spinner compete for the same contrast channel.

Studying it

Use paired comparison or forced choice—“same state or different?”—with frames composited on the real UI background, not a white artboard. Vary lightness gap, presence of scrolling or flicker, and viewing distance.

Independent variables: ΔL* or contrast between a state pair, interfering motion, whether people must fixate the button. Dependent variables: discrimination accuracy, reaction time, subjective “did it take the press?” judgments.

Side-by-side stills in the lab overestimate discriminability. In use, states appear sequentially and are often occluded. Sequential presentation plus occlusion is closer to a swallowed pressed state in the field.

Where it stops holding

High-contrast modes and some visual impairments will either amplify or flatten a small stylistic gap; one step size will not hold everywhere. If a brand demands an almost invisible hover, discriminability is deliberately pushed below threshold and pointer users must be paid back on another channel (cursor glyph). That is a channel swap, not evidence the gap was already enough. A loading state that replaces the label (“Save” → “Saving…”) moves discriminability onto a semantic channel, so the color step can be weaker. Continuous animation can feel like “something is moving” without naming which state was entered; motion is not identity.

Applying it

• Capture the five states on default, photographic, and dark backgrounds as a side-by-side strip; drop any adjacent pair that reads as one color at a glance.
• Check default–hover, hover–pressed, and default–disabled with contrast or color-difference calculations, not only a zoomed mock.
• Give pressed and loading at least one non-color cue each (offset, label change at the same type size, a progress ring) so they are not hue-only.
• Verify by recording a click during real scrolling on the target device. If playback needs a pause to see the state change, the difference is still inside the noise.

Related

• Within the group: E1.02.1 Default, hover, pressed, disabled, and loading states all have to exist · E1.02.3 A missing pressed state causes repeated clicks
• Adjacent: B1.08 Weber’s law · E1.11 Button state completeness across contexts · J2.10 Non-text contrast
• Search terms: just noticeable difference · state discriminability · Weber's law