RE: Practical examples of implementing WCAG 2.2 focus appearance

I recommend the use of dual-colour focus indicators because the colour contrast is not dependent on the background colour. This means you can apply a single CSS rule for all focus indicators. The code I use is:

:focus {outline:3px solid transparent; box-shadow: 0 0 0 0.125rem #FFFF00, 0 0 0 0.3125rem #FF0000, 0 0 0 0.4375rem #FFFF00 }
a {display:inline-block}

The “outline:3px solid transparent” rule ensures that the focus indicator is displayed in the operating system’s high contrast mode. The “display:inline-block” rule ensures that the focus indicator isn’t a horrible mess when links wrap onto two or more lines.

The two colours can usually be taken from the website’s colour palette or can at least be made to be consistent with it. The only downside is that you can’t reduce the focus indicator width below about 6px without the two colours merging into each other and looking awful. That said, I have had almost no push-back from clients when I have suggested this approach, which almost all of them have implemented.

Note that this is different from Chrome and Firefox’s dual-colour focus indicators. They only have two rectangles, and they are sometimes not visible or have insufficient colour contrast depending on the element and background colours and the outline offset value. The design I use has three rectangles, so the middle one is always displayed against the ones inside and outside of it.

Steve Green
Managing Director
Test Partners Ltd

From: Adam Cooper <cooperad@bigpond.com>
Sent: 23 September 2025 03:56
To: 'Bureau Toegankelijkheid' <info@bureautoegankelijkheid.nl>; w3c-wai-ig@w3.org
Subject: RE: Practical examples of implementing WCAG 2.2 focus appearance

Do you mean 2.4.13 focus appearance rather than 2.4.11 and 2.4.12 that deal with focus being obscured by other content?

Regarding OTTB solutions, don’t bother – it’s relatively straightforward to write your own style rules for displaying focus … just test, test, test once in pre-production  on multiple devices, screen sizes, and using Windows High Contrast.

The 3:1 ratio is intended for people with average vision (i.e., 20-in-20 in the US and 6-in-6 in the real world).

Anything below this ratio for screen elements at a specified viewing distance and of a given size will be more difficult for people with average visual acuity to perceive easily - tell that to your ‘designers’.







From: Bureau Toegankelijkheid <info@bureautoegankelijkheid.nl<mailto:info@bureautoegankelijkheid.nl>>
Sent: Sunday, September 21, 2025 5:10 AM
To: w3c-wai-ig@w3.org<mailto:w3c-wai-ig@w3.org>
Subject: Practical examples of implementing WCAG 2.2 focus appearance

Hello everyone,

I wanted to share a recent observation and also ask for insights from the group.

In some projects we’ve worked on, the new WCAG 2.2 focus appearance requirements (2.4.11 and 2.4.12) have raised questions among designers and developers. Specifically:

  *   How do you balance sufficient contrast of focus indicators with brand guidelines that use subtle color palettes?
  *   Have others found practical patterns or component libraries that already meet these requirements “out of the box”?
  *   For teams with limited resources, what’s the most efficient way to retrofit focus indicators on large design systems?

I would be very interested to hear about experiences, solutions, or approaches that others in this community have tried.

Thank you in advance for sharing your perspectives!

Best regards,
Allon Dery
Bureau Toegankelijkheid


[https://ci3.googleusercontent.com/mail-sig/AIorK4xePbM1nuG1JEwLTFY7fWzqpKYVxIY4QYKXt5ekJRr0f0yA3o9-nypHXhlDAZcy4IFpCnGKrbhCpK0h]
Samen bouwen aan een inclusieve digitale wereld.

www.bureautoegankelijkheid.nl<http://www.bureautoegankelijkheid.nl>