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> 
Sent: Sunday, September 21, 2025 5:10 AM
To: 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.

 

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