Focus appearance - The focus indicator has a clear thickness and colour contrast

Design Notes

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.

Developer Notes

Reliant on design influence.

Testing Notes

Steps to check

• Check the focusable element to make sure that the text background and border have sufficient contrast.
• Make sure that the focus indicator is thick enough to be visible by all users.

WCAG Reference: Understanding Success Criterion 2.4.13 Focus Appearance