Focus style accessibility - Is colored underline enough of a change?

Question

I am currently assessing styles for accessibility for a project onto which I am working. Overall, the layout has a black background (#050000) and text and components are either beige (#FEF0D6) or white. All this is has a fine contrast, as per WebAim's contrast checker.

My worry is that the focus styles are using an orange underline/outline (#E87C29) which is not contrasted enough with the white or beige (respectively 2.85:1 and 2.53:1), meaning that it is likely that the focus would not be visible enough.

There is an alternative color available in the branding styleguide, a green, that could be used since it has a greater contrast.

My question is: am I correct in thinking that the contrasting colors should not only be in a static reading of a layout, but also in between states?

Answer 1

First of all, You're correct that colour should be carefully chosen NOT only for default state, but also for other states, such as - hover, focus, visited. And contrast colour is always good for the users.

In my honest opinion, green should not be used for focusing as that can be interpreted as the input has been already validated and correct (since green is the natural sign for passing).

I'd rather suggest to choose different shades and tints of the brand colour if there is no problem. Usually brand guidelines consist of different shades and tints to be used in different scenarios. If that's not possible, then, my suggestion is that you use the brand color straightly on the focus state.

Just shared my thoughts. Hope that might help :)

Answer 2

If you are trying to be compliant with WCAG 2.1, then the new 1.4.11 success criteria would apply and you'd want to have a (minimum) contrast ratio of 3:1 for the focus color over the background color.

the visual focus indicator for a component must have sufficient contrast against the adjacent background