Designing Accessible CSS Buttons: Focus States, Contrast, and Touch Targets

Minimum Touch Target Size

WCAG 2.2's Success Criterion 2.5.8 (Level AA) requires interactive targets to be at least 24×24 CSS pixels. The enhanced recommendation at Level AAA (Success Criterion 2.5.5) is 44×44 CSS pixels — and several platform guidelines go further still: Google's Material Design recommends 48px, and Apple's iOS guidelines specify 44 points (roughly 59px). A button that's too small is genuinely difficult for anyone with motor impairments, tremors, or simply a large finger on a touchscreen to hit accurately.

Contrast Requirements

• Text-to-button contrast: at least 4.5:1 for normal-sized text, or 3:1 for large text (18pt bold or 24pt regular and above).
• Button-to-background contrast: at least 3:1, so users with low vision can identify the button's boundary even before reading its label.

These ratios apply across every visible state — default, hover, and focus all need to independently pass, not just the resting appearance.

Never Remove the Focus Indicator

It's tempting to remove the default focus outline for aesthetic reasons — it's not always the prettiest default styling. But the focus indicator is the only way a keyboard user can tell which element is currently selected on the page. Removing it without providing a replacement breaks navigation for anyone who doesn't use a mouse. If you don't like the browser default, replace it with your own visible focus style; never simply delete it.

.button:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}

Don't Rely on Color Alone

A destructive action like "Delete" shouldn't be signaled by red color alone — someone with color blindness may not perceive the distinction clearly. Pairing color with an icon or explicit wording ("Delete permanently") makes the button's purpose clear regardless of how color is perceived.

Respect Reduced Motion Preferences

Some users configure their operating system to minimize motion, often for reasons related to vestibular disorders or motion sensitivity. Wrapping hover/click animations in a media query respects that preference:

@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }
}