Clarify in understanding whether SC 1.4.11 Non-text contrast adjacent colors requires both sides of adjacent colors or only one side have sufficient contrast

[mraccess77]

Take a dark blue button with white text. When the button is focused a black border appears around the button. The black border has sufficient contrast with the page background of white but does not have sufficient contrast with the button background color of dark blue.

Options
Fail: While outer side has sufficient contrast this materially help the user distinguish the focus state.
Pass: outside border is sufficient.

[alastc]

Does the suggested technique in the other issue cover this?

[alastc]

Hi @mraccess77, I think the understanding updates covered this, i.e. each state of the component must have contrast against the non-component adjacent colors, but not within the component.

There is also a potential 2.2 SC for better defining 'visible' for focus states, can we close this issue?

[alastc]

Hi @mraccess77, can we close this one?

[mraccess77]

My question applies outside of focus. Say the button has a border. Does the border have to conform to both the outside and inside colors? Button is dark gray. Border is black and background of page is white. No states are present. The gray contrast with the white background but the gray border does not contrast with the button's black internal background.

[alastc]

Does the border have to conform to both the outside and inside colors?

The 'Adjacent colors' section of the understanding doc was overhauled to answer this type of question, so the question is now: does that answer it for you?

[mraccess77]

Yes. It answers my question.

[alastc]

Official WG Response: (approved on Feb 12 call)

The updated Understanding document for 1.4.11 should now cover this question, the relevant bits for this question include:

What aspects of a control need contrast?

visual information provided that is necessary for a user to identify that a control is present and how to operate it

Boundaries are not necessarily included:

This success criteria does not require that controls have a visual boundary indicating the hit area, but if the visual indicator of the control is the only way to identify the control, then that indicator must have sufficient contrast.

And the several visual examples in the 'Adjacent colors' section (and the examples section) should help to indicate various methods.