(WCAG 1.4.11) Understanding 'subsuming' in Non-text Contrast AA Level

Question

In a vaccuuum I understand how to interpret the criterion.

• If a border is the only way to identify a control then Border vs container must have >3 contrast.
• If a background is the only way to identify a control then background vs container must have >3 contrast.

Then we get to 'subsuming'. If a border of a control isn't required for identification, you can assume it is 'subsumed' by the element that is closest in contrast to it.

• If a background is >3 compared to the container, you pass contrast, even if there is a border that is <3 compared to both the background and the container [so if you have background to border of 2.5, border to container of 1.5, and background to container of 4, you can treat the border as part of ('subsumed into') the background] and count as having the largest contrast

The guidance really only covers the scenario of 'ignoring' borders when they aren't necessary. However, I do not see any guidance that states whether backgrounds or containers can be subsumed into borders, or otherwise ignored, if one but not both are >3 compared to the border. This scenario is not listed as an example on any 'understaning wcag' site's I've visited.

The scenario I'm thinking of: A grey container (f6f6f6) , a white background text input (ffffff) and a darker grey border (909090).

Contrast values are:

background to container: 1.08:1 container to border: 2.95:1 background to border: 3.19:1

In this scenario, is it fair to say that the container is 'not necessary' to identify the control, and so its colour is subsumed into the text field background, providing a >3 contrast?. Or is the container ALWAYS necessary, and so actually, I must measure contrast from the border to the background?

To cover the 'just make the border darker comments'. Darker borders have been tested with users and are thoroughly rejected (makes the UI busy, hard to focus, 'gives me a headache') - it's a dense enterprise UI) and this is darker than I've been able to get get without those complaints. WCAG AA compliance is a requirement. Making the background grey and then using white text field backgrounds is my last throw of the dice to manipulating these numbers against these user complaints.

Answer 1

Actually, WCAG1.4.11, non-text contrast page says this:

If components use several colors, any color which does not interfere with identifying the component can be ignored for the purpose of measuring contrast ratio. For example, a 3D drop-shadow on an input, or a dark border line between contrasting backgrounds is considered to be subsumed into the color closest in brightness (perceived luminance).

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.

Figure 3 The contrast of the input background (white) and color adjacent to the control (dark blue #003366) is sufficient. There is also a border (silver) on the component that is not required to contrast with either.

What this means is that, by default, you need a border that complies with the contrast ratio. HOWEVER, if the container has enough contrast to get rid of the border, then the border is not necessary as it is subsumed into the element with a closer luminance. If it's a clear border, it will be subsumed with the input, and if it's dark, it will be subsumed with your container, assuming it's dark.

In your particular case, you'll have something like this:

Here, your container doesn't have enough contrast, therefore the border doesn't get subsumed, and you need to measure the contrast between the border and the input background.