Creating a strong focus indicator within the component

Important Information about Techniques

See Understanding Techniques for WCAG Success Criteria for important information about the usage of these informative techniques and how they relate to the normative WCAG 2.1 success criteria. The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.1.


All technologies that support CSS.

This technique is not referenced from any Understanding document.


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>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.
Figure 1 The default and focused states of the button.


Resources are for information purposes only, no endorsement implied.



For each focusable user interface element:

  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.