Chapter   Dynamic Universal Focus Indicator

In chapter 18.1, we cover everything you need to know to create WCAG-conformant and usable keyboard focus indicators.

In the chapter, we mentioned how you can create a universally discernible focus indicator that combines two colors to create two focus rings around an element: black and white. The idea is that this combination will guarantee that at least one of the focus rings will always be visible, regardless of what colors are used in and around the focused element.

In his article, “Taking a shot at the double focus ring problem using modern CSS”, discusses how you can combine modern CSS features—namely:

• :where(),
• :focus-visible,
• Custom Properties,
• The currentColor keyword,
• box-shadow’s ability to support multiple shadows,
• @supports,
• HSL colorspace values,
• calc(), and
• Relative color syntax.

…to create a double focus ring effect that:

1. Colors one ring with the color used for the interactive element’s text, whatever that color may be.
2. Colors the other ring to use the exact opposite color value used for the text.

Eric’s solution is relevant in situations where you might want the focus style to have a more branded treatment than just raw black and white color values.

All of this is done in the service of ensuring people who rely on focus styles get what they need online.

Read Taking a shot at the double focus ring problem using modern CSS.