Do all clickable components have a focus indicator with a contrast of at least 3:1 against their background?

Goal

Ensure that users can find the focused item on the page.

Why it matters

People using the keyboard as their primary or only navigation input need to be able to see what they’re focusing on in order to act on it.

How to implement

Designer

Read Using color.

Developer

Ensure you implement focus state as directed by the Designer.

How to test

If either the element being tested or the background color is using opacity, you’ll need a way to figure out what the actual hex codes are with the opacity in effect. Sampling with a third-party application is usually faster than finding two or three calculators to string together for valid results.

1. Inspect the CSS focus style of the element being tested using the browser’s developer tools.
2. Inspect the background behind the element using the browser’s developer tools.
3. Compare the hex color of the focus style being tested to the hex color of the background using one of the contrast checkers on List of Contrast Checkers. The contrast ratio should be 3:1 or higher.