Focus Indicator Colors for Keyboard Accessibility

Why Focus Indicators Matter

Keyboard users rely on focus indicators to know which element is active. WCAG 2.2 requires focus indicators with at least 3:1 contrast against the surrounding background and the element's unfocused state.

Tailwind Focus Ring Pattern

<!-- Standard focus ring -->
<button class="bg-blue-600 text-white px-4 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
  Focused Button
</button>

<!-- Focus ring on dark background -->
<button class="bg-slate-800 text-white px-4 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-slate-800">
  Dark Background
</button>

<!-- Focus-visible to show only for keyboard -->
<a class="text-blue-600 underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2">
  Keyboard-only focus
</a>

Focus Color Rules

• Use ring-offset to create a gap between focus ring and element edge
• On light backgrounds: Use a dark or saturated ring (blue-500, slate-900)
• On dark backgrounds: Use white or light ring with matching ring-offset color
• Use focus-visible: instead of focus: to avoid showing rings on mouse clicks
• Ring must have 3:1 contrast against both the element and surrounding area

Global Focus Style

/* Apply consistent focus styles globally */
@layer base {
  *:focus-visible {
    @apply outline-none ring-2 ring-blue-500 ring-offset-2;
  }
  .dark *:focus-visible {
    @apply ring-blue-400 ring-offset-slate-900;
  }
}