How Should You Choose Focus Ring Colors? Making Keyboard Navigation Easier to Understand

A focus ring is a visual indicator that shows which link, button, or control currently has keyboard focus when someone navigates with the Tab key or another keyboard method. WCAG (Web Content Accessibility Guidelines) 2.2 Success Criterion 2.4.7 Focus Visible requires a mode of operation in which keyboard focus is visible. When choosing a focus-ring color, do not rely on brand preference alone; check the contrast between the ring and the adjacent background.

Aim for at least 3:1 contrast between the focus indicator and adjacent colors

When an author customizes a focus indicator, WCAG 2.2 Success Criterion 1.4.11 Non-text Contrast requires visual information needed to identify the focused state to have at least 3:1 contrast against adjacent colors. An unmodified browser-provided focus indicator is exempt from that author-controlled contrast requirement, but once you replace it with a custom color, the surrounding background needs to be checked.

WCAG 2.2 Success Criterion 2.4.13 Focus Appearance is an additional Level AAA criterion. It sets requirements for the area of the focus indicator and for at least a 3:1 contrast change in the same pixels between focused and unfocused states. It is not a Level AA requirement, but it is useful guidance when you want the focus ring to be especially easy to locate.

Three practical focus-ring color patterns for different backgrounds

1. Use a deep blue on a white background

On a white ■#FFFFFF page, a blue ring such as ■#0B57D0 has a contrast ratio of about 6.39:1 against the background.

:focus-visible {
  outline: 3px solid rgb(11 87 208);
  outline-offset: 2px;
}

The :focus-visible pseudo-class applies when an element has focus and the browser determines that focus should be visibly indicated. It is useful when you want keyboard focus to stand out while allowing the user agent to decide when pointer-focused elements need the same indicator.

2. Use a bright amber on a dark background

On dark navy ■#1F2937, an amber ring ■#FFD166 has a contrast ratio of about 10.18:1. A blue ring that works well on white may not work on a dark surface. For example, ■#0B57D0 against that dark navy is only about 2.30:1, so that pair should not be used for the ring and its adjacent background.

3. Use a two-color ring when backgrounds vary across the site

When focusable components appear on both light and dark areas, one ring color may not work everywhere. W3C Technique C40 describes a two-color focus indicator that combines a light band and a dark band. For example, light gray ■#F9F9F9 and dark blue ■#193146 have a contrast ratio of about 12.71:1 with each other.

:focus-visible {
  outline: 2px solid rgb(249 249 249);
  outline-offset: 0;
  box-shadow: 0 0 0 4px rgb(25 49 70);
}

Technique C40 explains that when the two indicator colors contrast with each other by at least 9:1, and the entire indicator is drawn over one solid background color, at least one band is guaranteed to reach 3:1 against that background. That guarantee does not automatically extend to photographs, gradients, or other changing backgrounds, so those cases still need to be checked in the real interface.

Do not remove the focus ring without a replacement, and test every background with a keyboard

Avoid using outline: none by itself to remove the visible focus indicator. A focus style that relies only on box-shadow can also disappear in some forced-color modes, which is why W3C Technique C40 keeps an outline in the implementation. After styling, move through links, buttons, and form controls with the Tab key and confirm that the focus indicator remains visible on light backgrounds, dark backgrounds, cards, and other surfaces.

In HueRoll, you can choose candidate ring colors with a three- or six-digit HEX code or the color picker, then compare the selected color against white or black. HueRoll does not compare arbitrary color pairs or automatically determine WCAG AA or AAA conformance, so the ratio between a custom focus-ring color and the actual page background still needs to be checked separately.