This understanding document is part of the draft WCAG 2.2 content. It may change or be removed before the final WCAG 2.2 is published.
When a user interface component has keyboard focus, the focus indicator:
- Encloses the visual presentation of the user interface component and is no thinner than 2 CSS pixels;
- Has a contrast ratio of at least 4.5:1 between its pixels in the focused and unfocused states;
- Has a contrast ratio of at least 3:1 against adjacent colors.
Exceptions:
- An area of the focus indicator meets all the following:
- Is at least as large as double the area of a 1 CSS pixel thick perimeter of the unfocused component, or is at least as large as an 8 CSS pixel thick line along the shortest side of the minimum bounding box of the unfocused component, and
- has a contrast ratio of at least 4.5:1 against the same pixels in the unfocused state, and
- has a contrast ratio of at least 3:1 against adjacent non-focus-indicator colors, or is no thinner than 2 CSS pixels.
Where a user interface component has active sub-components, if a sub-component receives a focus indicator, these requirements can be applied to the sub-component instead.
The purpose of this Success Criterion is to ensure a keyboard focus indicator is highly visible. This criterion is closely related to Success Criterion 2.4.11 Focus Appearance (Minimum) and defines a higher level of visibility for the focus indicator.
In relation to Focus Visible (enhanced) this criterion:
The other aspects of the Success Criterion are the same as Focus Visible (Minimum).
The benefits of this Success Criterion are similar to Focus Appearance (Minimum).
The examples of this Success Criterion are similar to Focus Appearance (Minimum).