Goal
Make focus indicators sufficiently large and high-contrast.
Success Criterion · WCAG 2.4.13
Focus Appearance
When the keyboard focus indicator is visible, an area of the focus indicator meets all of the following: is at least as large as the area of a 2 CSS pixel thick perimeter of the unfocused component, and has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states.
Level AAAWCAG 2.2Operable2.4 · Navigable
Copy button ready
What to do
Ensure focus indicators meet minimum area/thickness and contrast requirements and are not fully removed.
Why it matters
Thin or low-contrast focus rings are hard to see, especially for low vision users.
Success criterion
What WCAG 2.4.13 requires
Summarized directly from the official Understanding document so teams can quote the requirement accurately.
When the keyboard focus indicator is visible, an area of the focus indicator meets all the following: (1) Minimum area: The focus indicator encloses the user interface component or sub-component that is focused and has a thickness of at least 2 CSS pixels. (2) Contrast: The focus indicator has a contrast ratio of at least 3:1 between the same pixels in focused and unfocused states. (3) Adjacent contrast: The focus indicator has a contrast ratio of at least 3:1 against adjacent colors for the area of the indicator. (4) Not fully obscured: The focus indicator is not entirely hidden by author-created content.
Intent
Why WCAG created this requirement
- Focus indicators must be perceivable and reliably visible.
- Requirements cover thickness/area and contrast.
- This is a WCAG 2.2 addition (Level AAA).
Benefits
Who gains when you pass
- Keyboard users can quickly locate focus on complex pages.
- Low vision users can see focus indicators even at high zoom.
- Users avoid errors from activating the wrong control.
Why it matters
User impact when this criterion fails
Summaries drawn from the Understanding document help you socialize impact statements with product stakeholders.
Focus rings that are too thin or low contrast are effectively invisible.
Users may get lost in navigation and abandon the task.
Overview
This WCAG 2.2 AAA criterion ensures focus indicators are easy to see: they must be at least 2 CSS pixels thick and have sufficient contrast both against the unfocused state and against adjacent colors, and they must not be fully obscured.
- Use at least a 2px outline/ring (or equivalent) around the focused element.
- Ensure the ring color differs enough from both the unfocused state and adjacent background.
- Check focus indicators on gradients, images, and translucent surfaces.
- Ensure focus indicators are not fully hidden (aligns with 2.4.11/2.4.12 and 1.4.11).
Reference: All summaries and highlights originate from Understanding WCAG 2.4.13 and the W3C quick reference.
Fast facts
- Conformance level
- Level AAA
- WCAG version introduced
- WCAG 2.2
- Principle
- Operable
- Guideline
- 2.4 · Navigable
Examples
Make success tangible for teams
Share pass/fail snapshots to coach designers, engineers, QA, and content authors.
Ring thickness
Pass
Focus uses a 2px outline with a visible offset, clearly enclosing the control.
Fail
Focus uses a 1px faint shadow that is barely visible.
Contrast
Pass
Ring color changes from unfocused state and contrasts against background ≥ 3:1.
Fail
Ring is nearly the same color as background and unfocused state.
Not obscured
Pass
Focused element and ring remain visible and not hidden by sticky UI.
Fail
Sticky header covers the focus ring completely.
Evidence to keep
Document conformance decisions
Capture artifacts for VPATs, procurement reviews, and regression testing.
- Document focus ring specs and include contrast measurements for light/dark themes.
- Capture screenshots of focus indicators on representative components (buttons, links, inputs).
Official resources
Deep dives and supporting material
Keep these links handy when writing acceptance criteria or responding to audits.
Implementation checklist
Capture progress and blockers
- Define a standard focus ring token (color, thickness, offset) that meets 2.4.13.
- Apply focus ring consistently across components and states.
- Ensure focus ring is not clipped by overflow-hidden containers.
- Verify focus ring contrast in light/dark themes and on varied surfaces.
- Avoid relying only on subtle box-shadows that disappear on similar backgrounds.
Testing ideas
Prove conformance with evidence
- Tab through interactive elements and confirm focus ring thickness ≥ 2 CSS px.
- Measure contrast between focused and unfocused states for ring pixels (≥ 3:1).
- Measure contrast between ring and adjacent background (≥ 3:1).
- Test focus visibility near sticky headers/overlays to ensure not fully obscured.
- Test at different zoom levels and on mobile devices.
Related success criteria
More from Navigable (2.4)
WCAG 2.4.1Bypass BlocksLevel AWCAG 2.4.2Page TitledLevel AWCAG 2.4.3Focus OrderLevel AWCAG 2.4.4Link Purpose (In Context)Level AWCAG 2.4.5Multiple WaysLevel AAWCAG 2.4.6Headings and LabelsLevel AAWCAG 2.4.7Focus VisibleLevel AAWCAG 2.4.8LocationLevel AAAWCAG 2.4.9Link Purpose (Link Only)Level AAAWCAG 2.4.10Section HeadingsLevel AAAWCAG 2.4.11Focus Not Obscured (Minimum)Level AAWCAG 2.4.12Focus Not Obscured (Enhanced)Level AAA