Sighted individuals who can’t use a mouse often use a keyboard to navigate digital content. They rely on seeing a visible focus indicator to understand where they are on a page. This indicator is the keyboard focus. If the keyboard focus indicator doesn’t have good contrast, people who are colorblind or have low vision will have difficulty seeing it. Even when a focus indicator is visible and designed well, they may be completely unable to see it if the contrast is low. Good focus indicator contrast is essential for these individuals to understand where they are on a page and to complete tasks.
The focus indicator shows sighted keyboard navigators which part of a web page they are currently on as they tab through it. People who prefer or need to use only the keyboard to navigate a website must have a visible focus indicator. These individuals are primarily people with motor or cognitive disabilities, but may include people who are color blind or have low or limited vision. See Visible Focus for more information.
In addition to ensuring the focus indicator is visible, it must be distinguishable from surrounding content so that people can perceive it. For example, people with low vision or color blindness depend on good contrast to see elements like focus indicators. For this reason, the focus indicator must have adequate contrast with any adjacent colors, such as the page background. It is also a best practice for the focus indicator to be large enough to be seen easily and to have good contrast between its focused and unfocused states. See Focus Indicator Appearance for more information.
Contrast is the difference in luminance (the perceived brightness) between two colors that makes one object distinguishable from another or its background. Good contrast makes visual content easier to see and text easier to read for everyone. The greater the contrast between elements, the easier it is for people to perceive them, making it easier to understand content and complete tasks. See Non-text Contrast for more information.
It is necessary to maintain consistency in focus indicator design across a website. Consistent design elements help people quickly learn how to orient themselves and navigate through content on a new website. This approach contributes to a more consistent and satisfying user experience.
People with low vision or color blindness who use an alternative input device like a keyboard to navigate digital content instead of a mouse must have a clear focus indicator with good contrast.
People with cognitive and learning disabilities who are keyboard navigators may also benefit from clear focus indicators with good contrast.
People with situational disabilities, such as those using phones in sunlight, may benefit from good color contrast for the focus indicator, as they can better perceive it.
People with light sensitivity or medical conditions such as dry eye syndrome may benefit from good color contrast, which can help reduce eye strain and discomfort when interacting with digital content.
People using low-resolution or poor-quality screens may benefit from good color contrast, as this ensures that content is perceived correctly regardless of the device’s display limitations.
The Web Content Accessibility Guidelines (WCAG) Success Criterion 2.4.7 Focus Visible requires that all interactive elements have a visible focus indicator.
When navigating with a keyboard, the focus indicator highlights where you are on the web page. All browsers have a built-in default focus indicator for interactive elements. The style of this focus indicator varies depending on the browser, and it may or may not be possible to see the default focus indicator as it moves over different parts of the page. Even when you provide a custom focus indicator, some people may have difficulty seeing it, depending on the indicator’s color and the background color.
For these reasons, we need other criteria to ensure the focus indicator is perceptible to everyone. WCAG Success Criterion 1.4.11 Non-text Contrast requires the focus indicator to have at least a 3:1 contrast ratio to adjacent colors.
There are four possible focus indicator locations. The “adjacent color(s)” used to test for contrast vary for each location.
Location 1: Outside the interactive element
The focus indicator must contrast with the color of the background on which the interactive element is located.
Figure 1: Focus Indicator Outside the Interactive Element
Note that an external focus indicator does not need to have good contrast to the interactive element itself, as it visually changes (enlarges) the element’s appearance. The change in size means the focus indication does not rely on color alone. However, depending on the size change is not a best practice unless the focus indicator is large enough to be seen easily. See Never Rely on Color Alone to learn more about not relying on color to convey information.
Location 2: Inside the interactive element
The focus indicator must contrast with the interactive element’s color.
Figure 2: Focus Indicator Inside the Interactive Element
Note that if the border is the same color as the rest of the button, there’s only one color to be concerned about. If the border is a different color and the indicator is adjacent to it, then there are two colors the indicator must contrast with.
Location 3: Partly inside and partly outside the interactive element
At least one part of the focus indicator must have a color that contrasts clearly with nearby colors.
Figure 3: Focus Indicator Partly Inside and Partly Outside the Interactive Element
Location 4: The border of the component
The focus indicator must contrast with the color of the background on which the interactive element is and the color of the interactive element.
Figure 4: Focus Indicator is the Border of the Component
External focus indicators are usually the best choice for several reasons:
External focus indicators visually change the appearance of the focused element in ways that don’t rely only on color.
External focus indicators do not change the construction of the focused element when the “outline” property is used.
This guidance means the indicator won’t affect the element’s layout in responsive designs.
It also ensures a consistent button size when borders are part of a button’s style.
External indicators are still visible when people use a “forced color mode.”
Forced color modes change the display colors using either platform settings or assistive technology.
For example, an offset external focus indicator is still easy to see when someone uses a “forced color mode,” such as yellow and black. However, the focus indicator located inside the button is no longer visible.
These other considerations can help you choose colors with good contrast that will work with your site’s design.
Use colors that provide high contrast with the background and nearby elements so they stand out.
Use complementary colors to help focus indicators stand out. Complementary colors are those that are opposite each other on a color wheel. Examples of complementary colors are red and green, blue and orange, and yellow and purple.
Test the focus indicator at different screen brightness settings to ensure it is visible in all situations.
Ensure the contrast of the focus indicator is adequate in both dark and light modes. This consideration may involve setting different focus colors for each mode.
In complex interfaces, the focus indicator’s contrast must be high enough to stand out and not get lost on a page with changing background colors. This consideration may involve setting different focus colors for different background colors.
It is important to remember that a fully accessible focus indicator requires more than a visible focus indicator with good contrast. There is no specific requirement for the look of a visible focus indicator, but there are best practices regarding its size and the contrast between its focused and unfocused states.
The browser’s DevTools are a good option for testing interactive elements with multiple states, such as hover and focus, as they can force elements to appear in these inactive states. See Browser Inspect / DevTools (Ta11y) for more information on testing with DevTools. Forcing an element to appear in an inactive state lets you test its color for correct contrast with its adjacent colors.
Right-click on an element and select “Inspect” to open DevTools and expose the code for that element.
Go to the “Styles” pane and select the “:hov” button. Selecting this button reveals a list of possible states for the element.
Select the state you want to test, usually “focus” and “focus-visible.”
Selecting the state forces the chosen state to appear on the web page.
The change will persist until the option is deselected, DevTools is closed, or you reload the page.
Figure 5: Browser DevTools Styles Pane with Forced Focus
As an alternative to using the browser’s DevTools, you can take a screenshot of interactive elements in their focused state. Contrast checkers like CCA and WebAIM can then test the color contrast of the element’s changed state using the screenshot.
Use tools with grayscale options, like WAVE, or color blindness simulators, like Color Oracle, to check focus indicator contrast visually. This check does not confirm WCAG compliance but can provide quick insight into potential contrast problems. See WAVE and Color Oracle (Ta11y) for information on using these tools.
Testing with the high contrast settings available in operating systems is also a good practice to verify that the focus indicator is still visible and has good contrast. See Browser & Platform Settings (Ta11y) for more information.
Verify that focus indicators in hidden content have good contrast when revealed. For example, the links in a drop-down menu are initially hidden from view, but when you open the menu, the links are visible; their focus indicator must have good contrast against the menu’s background.
