Designing High Contrast Focus States: A Practical Guide

January 3, 2023

Home > Blog > Accessible Design > Designing High Contrast Focus States: A Practical Guide

Updated October 9, 2023

One of the most common color contrast issues we see when reviewing a site for potential accessibility improvements relates to focus states. Focus states are absolutely critical to providing an accessible user experience for visitors or customers that navigate via keyboard, but they are often not well understood. For users that primarily use a mouse to navigate the web, it is very easy to miss this even if you are otherwise paying attention to designing with accessible color combinations in mind. In fact, many popular and widely used libraries and frameworks that are otherwise accessibility-forward fall short on this very point.

What is a focus state?

When users navigate via keyboard, they use the tab key to move from element to element. But they need a way to see where they are on the screen. Most browsers automatically apply a colored outline around interactive elements such as links, buttons or input fields as you tab. But there are still things that a developer must take into account. For example, some elements may not be focusable by default and need to have a focus state added manually. In other cases, the order in which the user will tab through the elements needs to be manually adjusted to match user expectations for how the site would typically work.

Why is color contrast important for focus states?

While most browsers do have default focus outlines, they don’t always play well with a website design. Just as with any other element, focus (and hover) states need to be perceivable by users with visual impairments or low color contrast sensitivity. But even for users without any visual impairment, color contrast visibility can be just as important. Users with fine motor control impairments need to be able to see where the focus currently is. So do those with attention or memory limitations that rely on the focus state to more easily keep track of where they are on a page.

This importance is reflected in the upcoming WCAG version 2.2 guidelines, which became an official W3C recommendation in October 2023. WCAG 2.2 adds a set of brand new guidelines for focus appearance to ensure that this is done properly. (Update Oct 9, 2023: This Focus Appearance success criterion has been moved to Level AAA.)

Common focus state issues

Style conflicts with browser defaults

It is very common for the browser defaults to conflict with custom designs in a way that makes the focus outline difficult (or impossible) to see. For example, the default blue outline may not be visible for links or buttons on a blue background. Similarly, it may be hard to distinguish between the blue focus outline and a blue button.

On the left is a button in its focus state on a blue background. The default blue focus outline around the button has insufficient contrast against the blue background. On the right, the same button is on a white background and the default blue focus outline has sufficient contrast to be accessible.

Switching between light and dark backgrounds

In other cases, the site developer may have added custom styles for the focus state but did not consider how the focus color should change depending on the background. In that case, you would run into similar problems as a page switched between lighter and darker background sections or elements.

On the left is a button in its focus state on a dark grey background. The custom black focus outline around the button has insufficient contrast against the grey background. On the right, the same button is on a light background and the custom black focus outline has sufficient contrast to be accessible.

Unfocusable elements

Not all focus visibility issues relate to color. By default, browsers will focus on certain interactive HTML elements such as links, buttons, and form inputs. But it’s common, especially when making use of frameworks, to custom code interactive elements without using these specific HTML elements. For example, a developer might adapt a framework that uses highly styled divs to accomplish some of these same objectives. If that element is not manually added to the tabindex, keyboard users will be unable to bring it into focus to navigate or interact with it.

How to design focus appearance by the book

If your site design doesn’t work well with browser defaults or you just want to style focus states to match the rest of your brand, there are three simple steps you can take to ensure that the focus appearance remains visible at all times. (Of course, there is also room to add complexity once you’ve mastered the basics.)

Focus should solidly enclose

Most focusable elements are roughly rectangular (such as form field inputs, buttons, or links) and browser default focus states follow the same shape. While focus outlines can be any shape, it’s usually easiest to keep them rectangular unless you have good reason to change shapes. But no matter what shape the focus outline is, it should be a solid line. There are circumstances in which using a broken or dotted line can pass the new WCAG 2.2 guidelines, but in our opinion the juice is not worth the squeeze.

From left to right: a circular play button, star rating button, and rectangular button with text. All are surrounded by a rectangular focus outline and all pass accessibility guidelines.

Focus and unfocused state color contrast

Imagine a button on a plain white background. If the focus state outline is a light grey, it’s likely that many users will have a hard time distinguishing it from the unfocused state. Like any other non-text element, the focus state should have at least a 3:1 color contrast ratio with the unfocused state.

On the left, a circular play button enclosed by a light grey focus outline has insufficient color contrast with the (white) unfocused state. The center image is a star rating button enclosed by a black focus outline, which is accessible. The right image of a rectangular button with a text label is surrounded by a blue focus outline with sufficient contrast.

Focus state contrast against adjacent colors

But we also have to consider the button color. If we were to position a blue focus outline directly against a blue button, the blue focus state may not have a high enough color contrast ratio against the button itself. Adding some padding between the button and the focus state can help ensure that it can be distinguished from the button even if the colors are similar.

On the left, there are two examples of a blue circular play button against a white background. When the button is enclosed by a rectangular blue outline, it has sufficient color contrast with the adjacent color. When the play button's focus outline touches the blue button, it has insufficient contrast with the button. A star rating button is enclosed by a black rectangular focus outline which has sufficient contrast with the adjacent white background. A white button is enclosed by a rectangular blue focus outline that overlaps with the button perimeter, but the color contrast with the white button is sufficient. The same white button and blue focus outline with padding inserted between the button and outline is also accessible.

Bonus Tip: Two color focus outlines

The three rules above can ensure that your focus outline will always be visible. But accounting for all of the different background colors in your palette can be easier said than done. But you can ensure you’ll always be in the clear by creating a focus outline style that incorporates one light outline and one dark outline. That way, you can build a single focus outline style that works in all scenarios. Your light outline will be visible on darker backgrounds and your dark outline will be visible on lighter backgrounds.

On the left, a white button on a dark grey background is surrounded by one white and one black focus outline. The white outline has sufficient contrast with the dark grey background. On the right, a white button on a light grey background is also surrounded by black and white focus outlines. In this case, the black outline has sufficient contrast with the light grey background.

What if I want to design something more complex?

For some designers, focus states are another opportunity to apply creativity to a web design. And once you have some familiarity with the principles behind focus appearance, there is a ton of room for experimentation within the guidelines if you’re willing to do a little math. (You can check out the focus appearance guidelines here.) But using our simplified approach as a starting point, you can be confident you’ve accounted for this overlooked aspect of accessible web design.

Share this post: