Need clarification on WCAG 1.4.11

[AccessibilityEnthusiastic]

Hi Team,

I have a query on 1.4.11 Non-text Contrast related to the visual boundary.

In this scenario what can be consider as adjacent color(internal background or external background)?

Visual boundary color: #CACACA
internal background color: #FFFFFF
Contrast Ratio: 1.6:1

Visual boundary color: #CACACA
External background color: #F5F5F5
Contrast Ratio: 1.5:1

As per WCAG - For user interface components 'adjacent colors' means the colors adjacent to the component.
For example, if an input has a white internal background, dark border, and white external background the 'adjacent color'
to the component would be the white external background.
https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html

In this example internal background and External background colors are different.

1. What can be considered an adjacent color(Internal background or External background)?
2. Do visual boundaries need to be passed with both internal background and External background color?

[JAWS-test]

Good question. I guess it can't be answered in a blanket way, it always depends on the context.

For an input field, it would be sufficient if the contrast of the border to the inner OR outer background color is sufficient. Because if one of the two contrasts is greater than 3:1, there is a possibility to recognize the input field

The situation is different if a border is used to indicate a status, e.g. focused. There are cases in the Understanding where it is explicitly mentioned that the contrast to the inside AND outside must be sufficient:

the border of the component (inside the component and adjacent to the outside) and need to contrast with both adjacent colours.

[JAWS-test]

There are even cases where the contrast of the border is not sufficient, neither to the inside nor to the outside, but the contrast between inside and outside is sufficient and the border can be ignored:

The following example shows an input that has a light background on the inside and a dark background around it. The input also has a dark grey border which is considered to be subsumed into the dark background. The border does not interfere with identifying the component, so the contrast ratio is taken between the white background and dark blue background