Creating a strong focus indicator within the component

Metadata

CSS

When to Use

CSS.

Description

The objective of this technique is to create a highly visible focus indicator that has sufficient contrast against the internal background color of a component.

Examples

The examples demonstrate a simple implementation where a focus styles is applied to blue background. As the indicator is contained inside the component, you can be sure it maintains contrast whatever background the component is placed on

Inner border

HTML

<button type="button">Example button</button>

CSS

CSS to provide the indicator. It narrows the scope to buttons within the main element.

button { 
  background-color: #236AB8; /* medium-dark blue */
  color: white;
  padding: 10px;
}

main button:focus { 
  outline: 3px #fff5be solid; /* light yellow */
  outline-offset: -4px;
}
Three blue buttons with a dark border, the middle button showing a bright yellow outline inside the button.
The default and focused states of the button.

Tests

Procedure

For each focusable user interface component:

  1. Place keyboard focus on each focusable user interface element on the page using the keyboard.
  2. Check that the focus indicator area is at least the size of a 2 CSS px border around the component.
  3. Check that the change of contrast of the indicator between focused and unfocused states has a ratio of 4.5:1 for the minimum focus indicator area.

Expected Results

The required change of contrast for Focus Appearance (Minimum) is 3:1, this technique goes slightly beyond the minumum requirement.

Resources