Focus Indicators Contrast

title: "Focus Indicators and Contrast" weight: 20 description: "Learn the contrast requirements for keyboard focus indicators: minimum 3:1 contrast against adjacent backgrounds, visible at all times during keyboard navigation, and the WCAG SC 2.4.7 and 2.4.13 requirements." date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, color-contrast]

Focus indicators must have a minimum 3:1 contrast ratio against adjacent background colors and be fully visible during keyboard navigation, satisfying WCAG SC 2.4.7 Focus Visible and the newer SC 2.4.13 Focus Appearance for enhanced visibility.

## What You'll Learn

You will understand focus indicator contrast requirements, design visible focus indicators, test focus visibility across different backgrounds, and implement WCAG-compliant focus styles.

## Why It Matters

Users who navigate by keyboard rely on focus indicators to know their current position. A focus indicator with insufficient contrast or that disappears against certain backgrounds makes keyboard navigation impossible.

## Real-World Use

A site uses a blue focus outline (#4A90D9) that works well on white backgrounds but disappears against a blue hero section. The fix uses a multi-part focus indicator: a dark outline plus a light inner ring, ensuring visibility on any background.

## Focus Indicator Requirements

```mermaid
flowchart TD
  A[Focus Indicator] --> B[SC 2.4.7: Must be visible]
  A --> C[SC 2.4.13: Minimum size and contrast]
  B --> D[Visible during keyboard navigation]
  C --> E[3:1 contrast against background]
  C --> F[Minimum area: 2px thick or 4px perimeter]

Designing Focus Indicators

Create focus indicators that work on any background color on your site.

<!-- Interactive elements with focus indicators -->
<button class="btn-primary">Submit</button>
<a href="/products" class="nav-link">Products</a>
<input type="email" class="form-input">

/* WCAG-compliant focus indicator */
*:focus-visible {
  outline: 3px solid #4A90D9;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Multi-part indicator for variable backgrounds */
*:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
  box-shadow: 0 0 0 4px #4A90D9;
}

/* Custom focus for buttons */
.btn-primary:focus-visible {
  outline: 3px solid #FFD700;
  outline-offset: 3px;
  box-shadow: 0 0 0 2px #1a1a1a;
  /* Gold outline has high contrast against both light and dark backgrounds */
}

// Focus indicator contrast checker
function checkFocusContrast(element) {
  const computed = window.getComputedStyle(element);
  const outlineColor = computed.outlineColor;
  const bgColor = getComputedBackground(element);
  const outlineWidth = parseFloat(computed.outlineWidth);

  if (outlineColor === 'transparent' || outlineWidth === 0) {
    return { passes: false, issue: 'No focus indicator' };
  }

  const ratio = getContrastRatio(outlineColor, bgColor);

  return {
    element: element.tagName,
    outlineWidth,
    ratio: ratio.toFixed(1),
    passes: ratio >= 3 && outlineWidth >= 2,
    threshold: '3:1 contrast, 2px minimum width'
  };
}

// Test all focusable elements
document.querySelectorAll('a, button, input, select, textarea, [tabindex]').forEach(el => {
  el.addEventListener('focus', () => {
    console.log(checkFocusContrast(el));
  });
});

Common Mistakes

• Removing focus outlines entirely (outline: none)
• Using focus indicators that disappear on dark backgrounds
• Using thin focus indicators (1px or less)
• Making focus indicators the same color as the element
• Not testing focus indicators on every background
• Using only a color change for focus (no outline)
• Forgetting to add focus styles to custom interactive elements

Practice and Challenge

Practice 1: Check if your site has a visible focus indicator on all interactive elements. Practice 2: Test focus indicator contrast on both light and dark backgrounds. Practice 3: Create a focus indicator that works on any background color. Practice 4: Verify focus indicator width meets the minimum requirement. Practice 5: Test focus visibility with keyboard navigation on every page.

Challenge: Design a focus indicator system that works across a site with light mode and dark mode. The indicator must be at least 2px thick, have 3:1 contrast against the background in both modes, and use the same visual style (color, shape, offset) consistently across all interactive elements.

FAQ

Mini Project

Create a focus indicator testing page with 10 elements (buttons, links, inputs, custom widgets) on different colored backgrounds. Apply a consistent focus indicator style. Test each element with keyboard navigation and document the contrast ratio of the focus indicator against each background. Identify any backgrounds where the indicator fails.

What's Next

Custom Themes and Contrast covers contrast considerations for custom and user-generated themes.