Color Schemes That Keep Focus Indicators Visible: How to Design for Keyboard Navigation

TIPS

When navigating a website with the Tab key, it is sometimes hard to tell which link will respond when you press Enter. A focus indicator is the visible outline or appearance change that identifies the element currently ready for keyboard interaction. Choosing a single bright color does not guarantee that it remains visible on both white and dark backgrounds. This guide looks at focus-indicator colors in their actual surroundings, along with outline thickness, spacing, and situations where the indicator can be hidden.

Choose focus indicators by the background immediately beside them

The Web Content Accessibility Guidelines (WCAG) 2.2 include the Level AA criterion “Focus Visible,” which requires a visible indication of keyboard focus. When an author styles focus using an outline or another necessary non-text cue, that indicator generally needs a contrast ratio of at least 3:1 against adjacent colors. A contrast ratio measures the difference in relative brightness between two neighboring colors. There are exceptions to the author-styled non-text contrast requirement, including focus indicators left to the browser’s unmodified default appearance.

For example, a blue #1D4ED8 outline against white #FFFFFF has a contrast ratio of approximately 6.70:1. The same blue against dark blue-gray #1E293B drops to about 2.18:1, making it a poor choice for a dark section. A light-blue #93C5FD outline against white reaches only about 1.80:1. A color that appears bright on its own is not necessarily distinguishable from its background.

Focus colors do not need to match text colors or hover colors. WCAG 2.2 also has a separate Level AAA criterion, “Focus Appearance,” covering the minimum area of focus indication and the visible difference between focused and unfocused states. It is not identical to the Level AA “Focus Visible” requirement. Meeting a few measured color ratios by itself does not establish conformance for an entire page.

Example: switch outline colors between light and dark information sections

Imagine an event website with one section explaining how to reach the venue and another providing a contact link. Use a white #FFFFFF background with dark blue-gray #1E293B text for access information. The link and its focus indicator are blue #1D4ED8. For the contact section, use a dark blue-gray #1E293B background with nearly white #F1F5F9 text. The contact link becomes a light-blue #93C5FD surface with deep-navy #0F172A lettering, and its focus outline becomes pale yellow #FDE68A.

<div class="focus-example">
  <section class="focus-example__light">
    <h3>Getting to the venue</h3>
    <p>Check the entrance and the nearest station.</p>
    <a href="/access/">View access details</a>
  </section>
  <section class="focus-example__dark">
    <h3>Questions on the day</h3>
    <p>Find contact details before attending.</p>
    <a href="/contact/">View contact details</a>
  </section>
</div>

.focus-example {
  display: grid;
  gap: 24px;
  padding: 16px;
}
.focus-example section {
  padding: 28px;
  border-radius: 12px;
}
.focus-example__light {
  background-color: rgb(255 255 255);
  color: rgb(30 41 59);
  --focus-ring: rgb(29 78 216);
}
.focus-example__dark {
  background-color: rgb(30 41 59);
  color: rgb(241 245 249);
  --focus-ring: rgb(253 230 138);
}
.focus-example a {
  display: inline-block;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: underline;
}
.focus-example__light a { color: rgb(29 78 216); }
.focus-example__dark a {
  background-color: rgb(147 197 253);
  color: rgb(15 23 42);
}
.focus-example a:hover { text-decoration-thickness: 3px; }
.focus-example a:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 4px;
}

The CSS (Cascading Style Sheets) pseudo-class :focus-visible applies when the browser determines that a focus indicator should be shown, often during Tab-key navigation. The outline declaration draws a three-pixel line, while outline-offset places it four pixels away from the element. The surrounding spacing allows the line to fit within its section. The custom property --focus-ring is a reusable named CSS value, defined separately for the two background surfaces.

Blue #1D4ED8 against the white section #FFFFFF measures about 6.70:1, while yellow #FDE68A against the dark section #1E293B reaches about 11.75:1. The contact link’s deep-navy #0F172A text against light-blue #93C5FD measures about 9.90:1, above the 4.5:1 minimum for normal-sized text. However, yellow and the light-blue button surface alone differ by only about 1.45:1. In this layout, the four-pixel gap exposes the dark section background between the button and its outer outline, so that dark background is the color actually adjacent to the focus ring.

Use the keyboard to find problems that color calculations miss

Press Tab to move forward through the links and Shift+Tab to move back. Check whether you can always identify the current target. Link text also needs sufficient contrast: blue #1D4ED8 against white #FFFFFF reaches about 6.70:1, while the dark section’s pale text #F1F5F9 against dark blue-gray #1E293B reaches approximately 13.35:1. A :hover effect triggered by a mouse pointer is not a substitute for a visible keyboard-focus state.

If you use outline: none; to remove the browser’s default indicator, you must provide a clearly visible alternative. The example does not indiscriminately remove default focus styling. Also check whether a parent with overflow: hidden; clips an outline drawn outside a link, or whether a sticky header hides the currently focused control. On pages with sticky headers, a suitable scroll-padding-top based on the actual header height can help. At Level AA, WCAG 2.2 also requires that an element receiving keyboard focus is not completely obscured by author-created content.

The /access/ and /contact/ paths are placeholders; replace them with your actual destinations. Test narrower screens, zoomed layouts, and forced-colors settings to see whether the focus indicator remains visible. HueRoll can help evaluate candidate colors and show the contrast of a selected color against white or black, but it does not automatically assess arbitrary color pairs or determine whether a focus indicator conforms to WCAG. Check the adjacent colors and actual navigation behavior in the finished page.