In 2020, while building our new design system, Pharos, we needed to decide how to style the focus states for our components. I dove in head first to what could be possible for expressing a branded and accessible focus state style across our set of interactive components.
If you’ve ever tabbed your way through a site, you may have noticed outlines that appear around interactive elements like buttons, links, and inputs. These are known as focus states.The key purpose of focus states is to give a user guidance. Without it, navigation via keyboards or other directional input devices is virtually impossible. Many people exclusively use keyboards to navigate, and rely on the focus state to know where they are on the page. Focus state users may be a person with limited mobility, someone using a screen reader, or someone who wants to use their keyboard to quickly navigate.
When it came to deciding how to create focus styles, there were a couple of approaches. The first would be to just use the default browser styling. The second would be to create our own unique focus style that would still meet accessibility needs.
Much of the internet's websites use the browser's default focus state styling, but I identified some issues with this approach.
1. Default focus style varies across browsers.
Each browser has their own varying focus state style, causing an inconsistent experience across browsers.
2. The default browser focus styles can lack contrast.
Depending on the color being used for the focusable element, there can be color contrast issues with the default colors used by browsers, like in this blue on blue example.
Because of these issues, I decided we should create our own custom focus styles to have a unified, consistent experience across all browsers, while making sure there was sufficient contrast.
With our newly minted color palette, I had the opportunity to go wide with exploring various treatments.
I ruled out exploring subtler treatments early in the design process, as one of our principles was to make the focus state very obvious. I also ruled out any options that didn't meet color contrast requirements.
See the explorations in Figma →
The approach: I created a 4px solid black, with a 2px offset on the interactive elements. Though it felt obvious, it didn't balance as well with the JSTOR Red primary color. The line in black also felt too thick.
The approach: I created a 2px solid gradient border around focusable elements. This concept leaned heaviest into showing intrigue. However, it felt a little too complicated and could be distracting for a user rather than helpful.
.gif)
The approach: I used a 2px solid "Glacier Blue" outline with a 2px offset. This approach felt branded, and had the best balanced contrast between the styling and the links and buttons.
We ultimately chose Concept 3, as it worked on dark and light backgrounds, it had sufficient contrast, was visually distinctive, and gave us an opportunity to infuse our new brand's palette in a way that was friendly, uncomplicated and had a slight tinge of intrigue.
