Styling focus and hover states of interactive HTML elements

Design interactive HTML elements so keyboard users can always clearly see which element is currently has focus as they tab through the page.

For mouse users, a clear hover state, in addition to the pointer changing into a hand, is considered a helpful best practice, and not a WCAG requirement.

WCAG 2.2 AA doesn’t require visual hover or focus states other than the browser defaults. But if a custom design for hover or focus state is provided, it must meet accessibility requirements.

The styling of the hover and focus state can be the same but doesn’t have to.

Option 1: Use the default focus outline of the browser

The advantage of keeping that the default focus outline is that you don’t have to do anything.

The disadvantage is that each browser displays this outline differently, and that it may be hard to see in your design. Adrian Roselli gives a clear explanation about this in Avoid Default Browser Focus Styles

Option 2: Design your own outline or border

A more reliable way to add an outline or border of hover or focus is by designing your own. Then the visual representation is consistent and independent of the browser. This also gives you the opportunity to design the states differently for dark and light mode.

Guidelines for custom hover and focus styles

A custom focus or hover indicator should have a contrast ratio of at least 3:1. The contrast applies against the background, but also against the background color of the focusable element itself. For example, for a button or input field that has a custom background color.

Best practice is to follow WGAC 2.4.13 Focus Appearance] level AAA.

Provide the outline or border with:

  • a thickness of at least 2 CSS pixels;
  • a color contrast ratio of at least 3:1 against adjacent colors;
  • a color contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states.

Another option is to skip the outline and instead change the color of the entire element. For example, a button that changes color when it receives keyboard focus. In this case as well, there must be a color contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states.

Make sure that the text inside the element always must have a color contrast ratio of at least 4.5:1 against its background color.

The topic Visibility of the keyboard focus, in the section Frontend code of this documentation, addresses the CSS and possibilities of styling keyboard focus in more detail.

Resources

WCAG Success Criteria for visual focus

Other resources