Use a clearly visible focus indicator

The focus indicator must be clearly visible. The focus indicator shows which part has the keyboard focus. So this is important for everyone who navigates with the keyboard. It is often represented by a visible border around an element.

Each browser has a default focus indicator, but its style features can also be customized. If the style features are adjusted, make sure there is enough contrast between the colour of the focus indicator and the colour of the background. The focus indicator must have a contrast ratio of at least 3:1.

A contrast checker can be used to calculate a contrast ratio. For example, the contrast checker on the website of WebAIM or the Colour Contrast Analyser (software) of The Paciello Group.