Focus Appearance ensures that the keyboard focus indicator is easy to see, large enough, and clearly distinguishable from its unfocused state. This criterion goes beyond simply requiring a visible focus indicator. It defines how visible the indicator must be so users can reliably track focus, especially in dense, modern interfaces.
WCAG Success Criterion
2.4.13 Focus Appearance (Level AAA)
When the keyboard focus indicator is visible, an area of the indicator must:
- Be at least as large as a 2 CSS pixel thick perimeter of the unfocused component, and
- Have a contrast ratio of at least 3:1 between the focused and unfocused states
Exceptions
This criterion does not apply if:
- The focus indicator is entirely controlled by the user agent and cannot be modified by the author, or
- The author has not modified the default focus indicator or its background
Why This Matters
Many users cannot detect small or subtle visual changes.
This includes:
- Older users
- Users with low vision
- Users with reduced contrast sensitivity
- Users navigating quickly by keyboard
A thin, low-contrast outline may technically exist, but still be effectively invisible in real use. Focus Appearance exists to ensure that the focus indicator is noticeable at a glance, not just present in theory.
Who This Helps
This criterion primarily benefits:
- Keyboard-only users
- Users with low vision
- Screen magnifier users
- Users with attention or memory limitations
- Users navigating visually complex layouts
What This Criterion Requires (In Practice)
Focus Appearance has two independent requirements:
1. Minimum size (area)
The visible focus indicator must cover at least the area of a 2px thick perimeter around the unfocused component.
Key points:
- It does not have to literally be a 2px outline
- Any shape is allowed, as long as the total visible area meets the minimum
- Indicators placed inside a component usually need to be thicker to compensate
The simplest way to pass:
Use a solid 2px outline around the component.
2. Minimum change of contrast
The focus indicator must show a 3:1 contrast difference between:
- The focused state, and
- The unfocused state
Important distinction:
- This is not contrast against adjacent colours (that’s 1.4.11)
- This measures how much the pixels change between states
If the focused and unfocused states look too similar, the criterion fails—even if both have good contrast against the background.
Focused Component vs Focus Indicator
This criterion evaluates the focus indicator, not the component itself.
However:
- If the indicator is too small, it fails
- If the indicator is too subtle, it fails
- If only part of the indicator meets contrast, only that part counts toward the required area
Decorative effects such as shadows or glows outside the component do not count toward the minimum area.
What Counts as a Valid Focus Indicator
The focus indicator may be:
- An outline
- A border
- A background change
- A combination of multiple visual effects
As long as:
- The visible area meets the size requirement, and
- The contrasting portion meets the 3:1 change-of-contrast requirement
Not all pixels of the indicator must meet contrast, only enough to satisfy the minimum area.
Inline Links and Multi-Line Focus
For inline links that wrap across lines:
- outline usually creates a valid indicator around each line fragment
- border may split across lines but is still acceptable
WCAG allows these to be assessed as if the link were a single bounding box.
Gradients and Partial Contrast
If a focus indicator uses gradients:
- Only the parts that meet the 3:1 change-of-contrast count
- Low-contrast portions are ignored for area calculations
If too much of the indicator is subtle, the remaining contrasting area may be insufficient, causing failure.
Relationship to Other Criteria
Focus Appearance works together with:
- 2.4.7 Focus Visible — a focus indicator must exist
- 1.4.11 Non-text Contrast — the indicator must contrast with adjacent colours
- 2.4.11 / 2.4.12 Focus Not Obscured — the indicator must remain visible on screen
It is common to pass one of these criteria and fail another.
Common Failure Patterns
Focus Appearance often fails when:
- Default browser focus styles are overridden with thinner outlines
- Focus indicators rely only on subtle colour changes
- Indicators are inset too far inside components
- Contrast is reduced to “look cleaner”
- Designers assume visibility for mouse users equals visibility for keyboard users
Examples
Passing examples
- A 2px solid outline around focused buttons with strong contrast
- A thick inner border that compensates for being inset
- A full background colour change with sufficient contrast difference
Failing examples
- A 1px dotted outline with low contrast
- A background colour change that is visually subtle
- A thick indicator where only a thin portion meets contrast
Rule Description
When focus is visible, the focus indicator must be:
- Large enough to be easily seen, and
- Distinct enough from its unfocused state
Both conditions must be met.
The Algorithm
- Tab to a focusable element
- Identify the visible focus indicator
- Check:
- Is it at least as large as a 2px perimeter?
- Does it change by at least 3:1 contrast?
- If either answer is “no”:
- The criterion fails
How to Meet Focus Appearance Reliably
- Use a solid 2px (or thicker) outline
- Avoid subtle colour-only changes
- Test indicators against both light and dark backgrounds
- Ensure focus styles scale with component size
- Avoid relying on shadows or glows alone
How to Test This
- Navigate using Tab only
- Test multiple components (buttons, links, inputs)
- Zoom to 200%
- Compare focused vs unfocused states directly
- Verify size and contrast visually and with tools
Conformance Context
Focus Appearance is a Level AAA criterion.
Level AAA success criteria:
- Are not required for WCAG conformance claims
- Are often aspirational or used as internal quality benchmarks
- Represent the highest standard of usability, not minimum compliance
Wrapping Up
Focus Appearance ensures that keyboard focus is not just visible, but unmistakable. A focus indicator that users cannot reliably see is functionally equivalent to no focus indicator at all. By enforcing minimum size and contrast, this criterion removes guesswork and supports confident keyboard navigation, even in visually complex interfaces. At Level AAA, clarity is the goal.
