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
Read Using color.
Ensure you implement focus state as directed by the Designer.
How to test
- Inspect the CSS
focusstyle of the element being tested using the browser’s developer tools.
- Inspect the background behind the element using the browser’s developer tools.
- 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.