# Interactions Increase Contrast

**MUST** · **ID:** `design-interactions-increase-contrast` · **Category:** design
**Source:** [Vercel](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/design-interactions-increase-contrast

> MUST: Increase contrast on `:hover/:active/:focus`

Hover, active, focus states have more contrast than rest state

Interactive states should draw attention. Increase contrast on hover, active, and focus states by darkening text, strengthening backgrounds, or adding shadows. This provides clear feedback that the element is interactive.

## Bad — do not do this

`design-interactions-increase-contrast-bad`

```tsx
export function InteractionsIncreaseContrastBad() {
  return (
    <div className="w-full max-w-sm">
      <div className="space-y-2">
        <button className="w-full px-4 py-2 bg-primary text-primary-foreground rounded-lg transition-colors text-sm">
          Hover Me (same color)
        </button>
        <a href="#" className="block text-primary hover:text-primary text-sm">
          Link with no hover change
        </a>
      </div>
      <p className="text-xs text-error mt-4">
        No visual feedback on interaction states
      </p>
    </div>
  );
}
```

## Good — do this

`design-interactions-increase-contrast-good`

```tsx
export function InteractionsIncreaseContrastGood() {
  return (
    <div className="w-full max-w-sm">
      <div className="space-y-2">
        <button className="w-full px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 active:bg-primary/80 transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring text-sm">
          Hover Me (darkens)
        </button>
        <a href="#" className="block text-primary hover:text-primary/80 hover:underline transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring rounded text-sm">
          Link darkens on hover
        </a>
      </div>
      <p className="text-xs text-success mt-4">
        Clear visual feedback with increased contrast
      </p>
    </div>
  );
}
```

## References

- [Interactive States](https://www.nngroup.com/articles/clickable-elements/)