Ensure Focus Indicators Are Sufficiently Large and Contrasting

Disabilities Affected: Cognitive, Mobility, Visual

Success Criterion: 2.4.13

Level: AAA

When the keyboard focus indicator is visible, an area of the focus indicator must meet specific contrast and size requirements:

Minimum area: At least as large as a 1 CSS pixel thick perimeter of the focused component, OR at least as large as a 4 CSS pixel thick line along the shortest side of a bounding box of the component.
Contrast: Has a contrast ratio of at least 3:1 between the colors in the focused and unfocused states.
Not fully obscured: The focus indicator area is not fully obscured by author-created content.

Why It Matters

This AAA criterion builds on “Focus Visible” (2.4.7) and “Focus Not Obscured” (2.4.11) by setting more specific requirements for the clarity of the focus indicator itself. A focus indicator that is too small, has poor contrast, or blends in with the component’s styling may still be difficult for users with low vision or cognitive impairments to perceive reliably.

Fixing the Issue

Design a highly visible keyboard focus indicator that meets these requirements. Avoid relying solely on subtle changes (like a slight color shift). Common techniques include:

Using a thick outline (outline: 3px solid blue;) with good contrast against the background and the component itself.
Using box-shadow to create a noticeable glow or border effect.
Changing the background color of the component significantly on focus.
Ensure the chosen indicator style meets the minimum area requirement (a 2px or thicker solid outline usually suffices).
Use contrast checkers to verify the 3:1 contrast ratio between the indicator color(s) and adjacent colors in both focused and unfocused states.
Ensure the indicator isn’t obscured (related to 2.4.11).

Good Code Example

A clear, high-contrast focus outline:

Markup

/* Default button style */
button {
  background-color: #e0e0e0; /* Light gray */
  border: 1px solid #a0a0a0; /* Medium gray */
  padding: 8px 15px;
  color: #333; /* Dark gray text */
}

/* Focus style meeting AAA requirements */
button:focus-visible { /* Use :focus-visible for better user experience */
  /* Thick (3px > 1px perimeter) solid outline */
  outline: 3px solid #0000FF; /* Blue */
  /* Offset to prevent overlap with component border */
  outline-offset: 2px;
  /* Ensure high contrast: */
  /* Blue (#0000FF) vs White background (#FFFFFF) = 8.59:1 (Pass > 3:1) */
  /* Blue (#0000FF) vs Button background (#e0e0e0) = 6.04:1 (Pass > 3:1) */
  /* Ensure area is sufficient (3px perimeter) */
  /* Ensure not obscured (handled by layout/2.4.11) */
}

Bad Code Example

A focus indicator with insufficient contrast or size:

Markup

button.bad-focus {
  background-color: #f0f0f0;
  border: 1px solid #d0d0d0;
  padding: 8px 15px;
}

button.bad-focus:focus-visible {
  /* Very thin outline (fails minimum area if component is large) */
  /* outline: 1px solid #cccccc; */

  /* OR: Low contrast outline */
  outline: 2px solid #b0b0b0; /* Medium-light gray */
  outline-offset: 1px;
  /* Contrast #b0b0b0 vs #f0f0f0 (button bg) = 1.64:1 (Fail < 3:1) */
  /* Contrast #b0b0b0 vs #ffffff (page bg) = 2.07:1 (Fail < 3:1) */
}

Search Ultimate Guide

Free eBook

Integrating Accessibility Compliance Into Your Budget

A Practical Guide for Healthcare Leaders Navigating the New HHS Ruling

Learn More

Need Help with Compliance?

Our team is here to guide you through the process of meeting accessibility standards. Contact us today to get started.

Schedule Consult