2.4.13 Focus Appearance

What it is

When the keyboard focus indicator is visible, an area of the focus indicator meets all the following:

is at least as large as the area of a 2 CSS pixel thick perimeter of the unfocused component or sub-component, and
has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states.

Exceptions:

The focus indicator is determined by the user agent and cannot be adjusted by the author, or
The focus indicator and the indicator's background color are not modified by the author.

Check: is at least as large as the area of a 2 CSS pixel thick perimeter of the unfocused component or sub-component, and
Check: has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states.
Check: The focus indicator is determined by the user agent and cannot be adjusted by the author, or
Check: The focus indicator and the indicator's background color are not modified by the author.
Use the sufficient techniques below as acceptable methods when applicable.
Confirm none of the common failures apply.

G195: Using an author-supplied, visible focus indicator
C40: Creating a two-color focus indicator to ensure sufficient contrast with all components
C41: Creating a strong focus indicator within the component

F55: Failure of Success Criteria 2.1.1, 2.4.7, 2.4.13, and 3.2.1 due to using script to remove focus when focus is received
F78: Failure of Success Criterion 1.4.11, 2.4.7 and 2.4.13 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator

Note 1: What is perceived as the user interface component or sub-component (to determine the perimeter) depends on its visual presentation. The visual presentation includes the component's visible content, border, and component-specific background. It does not include shadow and glow effects outside the component's content, background, or border.
Note 2: Examples of sub-components that may receive a focus indicator are menu items in an opened drop-down menu, or focusable cells in a grid.
Note 3: Contrast calculations can be based on colors defined within the technology (such as HTML, CSS, and SVG). Pixels modified by user agent resolution enhancements and anti-aliasing can be ignored.