[BITV]: Make sure that contrasts on interactive elements between normal state and focused state have to be 3:1

[JuliaKirschenheuter]

This is accessibility issue.

For now the contrast of components between normal state and focused state is in most cases 2:1. It have to be min. 3:1.

Examples: grey(--color-border-maxcontrast) <-> blue (--color-primary-element)

@jancborchardt @nimishavijay what could we do? Would it be a solution to increase color of --color-primary-element?

[susnux]

Maybe related, but we also need to change some other colors for accessibility (text contrast):

#40773

So maybe this already fixes the problem?

[nimishavijay]

Hm, this is a really good question. --color-primary-element was already made darker so that it meets the contrast requirement against a white background. It would be extremely dark if we change it again to have enough contrast against the border color

So maybe this already fixes the problem?

@susnux It actually does help, but the contrast requirement is not met by a pretty big margin so it unfortunately doesn't fix the issue fully :/

Ideas that are coming to mind:

• Use a thicker border

Recording.2023-10-25.144840.mp4

• Show a border with a different color (similar to a button, example in the gov.uk website)

Recording.2023-10-25.142226.mp4

Would any of these work @JuliaKirschenheuter ? Important to note that nothing else should shift positions when this border appears (usually there is a slight change in the position of the text when there is a border added, which is not good)

[jancborchardt]

Using a thicker border seems nice and that is also what some others seem to do. I’d say that’s the preferred solution which looks better than the extra border – which we already use for focus feedback but is quite present.

[susnux]

I agree with Jan the thicker border looks quite good and should not be a problem as the label within the border already requires some margin on top -> no resizing of the element when the border thickened.

[marcoambrosini]

I would keep the same double outline and activate it only on keyboard navigation. So same thickness, same design strategy, and enough contrast.

[JuliaKirschenheuter]

Hi @marcoambrosini, @nimishavijay,

Thanks for your suggestions!
I'm not sure that thicker border would solve a problem. Michael told about contrast difference and because of it is would tend to Marco's suggestion. That should be fine.

Thank you all!

[susnux]

For reference this is about:
https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html