Skip to content

Technique C41:Creating a strong focus indicator within the component

About this Technique

This technique is Sufficient to meet 2.4.13: Focus Appearance.



This technique relates to 2.4.13: Focus Appearance (Sufficient).


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.


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

Example 1: Inner border


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


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.

Other sources

No endorsement implied.



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

  • #2 and #3 are true.

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

Back to Top