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.
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.
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.
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.
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.
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.
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.