Make states stronger

Hover, active and focus should each have more contrast than rest.

From web-design-guidelines, which applies Vercel's Web Interface Guidelines.

Buttons, measured

Hover or tap, press, then Tab to each button.

Flat statesBad
Rest–
Hover–
Active–
Focus–
:hover { }
Stepped statesGood
Rest–
Hover–
Active–
Focus–
:hover L−8 · :active L−16 · ring 2px

Links that fade or sharpen

Hover or tap down each list, then Tab through it.

Fades on hoverBad
Rest–
Hover–
Focus–
a:hover { opacity: 0.6 }
Sharpens on hoverGood
Rest–
Hover–
Focus–
a:hover { color: var(--ink) }

State inspector

Type a label, then drag State step.

Flat statesBad
Rest–
Hover–
Active–
Focus–
.btn[data-state]
Stepped statesGood
Rest–
Hover–
Active–
Focus–
:hover, [data-state="hover"]

Why it matters, pros and cons

Why it matters

Hover asks “will this respond?” More contrast says yes; fading says disabled.

Pros

  • Shows which row the pointer is on.
  • Press state confirms the click registered.
  • A strongest focus ring keeps keyboard users located.

Cons

  • Touch has no hover; never hide information there.
  • Max-contrast rest leaves no darker step.
  • Dark mode flips the direction: lighter adds contrast.