WCAG 2.2: 2.4.13 Focus appearance

[Febakke]

Note
When referring to WCAG SC 2.4.13 Focus Appearance (AAA) have in mind that this is a part of the latest version of WCAG guidelines and not a part of the Norwegian required guidelines yet. But as we have been working with our focus indicator in Digdirs designsystem with the new requirments in mind lately I thought I could share some of the challenges we have been looking at lately.

UUTilsynets interpretation of the current required guideline focus visible is: "Hvis fokusmarkeringen er vanskelig å oppfatte for brukeren, er kravet etter tilsynets vurdering ikke oppfylt." Source

Describe the bug
Focus on checked checkboxes are hard to see. The contrast between the focused and unfocused pixels is actually 3.32:1. This is good enough when looking at the WCAG 2.2 new guidelines on Focus appearance. But I have to say this is quite surprising as a red/green colorblind person I am having trouble seeing a visible change when it gets focus.

I would recomend using the same focus style as you are using on buttons. By having a border on the outside with an ofset.

Input fields
You could also enhance the focus on inputfields. Your focus as of now is to change color from #274247 to #00824D on the border. Those colors have a contrast of 2.20:1. This is lower then the 3:1 threshold described in focus appearance. You also add an extra border outside with 1px width. Since the first border dont have enough contrast to the unfocused pixels you only have 1px border change from unfocus to focused. Here I would also recommend using the same focus as button. Having the focus indicator outside of the component with an offset. (and at least 2px border)

Unfocused

Focus

links
I really like the link focus style you have created. A small improvement here is to add a prefered-reduced-motion as it do not seem to remove / or slow down animation based on my setting being reduce motion. Docs

Universal focus indicator
We are working on an universal focus indicator for our designsystem. That should be able to pass all relevant WCAG guidelines both light and dark background without having to change our indicator. Having a bold and consistent indicator that is easy to follow for keyboard users that is easy to implement on most components. (Some exceptions like links for example where we probably will handle it similar to your solution). If you have any input or feedback feel free to leave a comment on our issue here: #1409