Need clarification on Success Criterion's 1.4.1: Use of Color and Success Criterion 1.4.11: Non-text Contrast

[AccessibilityEnthusiastic]

Hello WCAG Community,

I have a question related to the Success Criterion's 1.4.1: Use of Color and Success Criterion 1.4.11: Non-text Contrast

When I select any of the tabs(All, Local pickup, Shipping), the tab text color changes from black to blue, and also the Inner background color also changes.

1. Can we consider it as a 1.4.1: Use of Color failure? The Not selected tab text color(black) and the selected tab color(blue) contrast is 3:1
   Not selected tab text color(black: #0C0E10)
   Selected tab text color:(Blue: #3A688A)
   Contrast ratio: 3.3:1

Since it is more than 3;1, can we consider it as the pass for Use of Color Success Criterion?
if it is less than 3:1, can we consider it a failure for Use of Color Success Criterion?

If the text color changes along with the inner background color, in that case, Are we supposed to check the Selected tab Inner background with the outer background for 1.4.11: Non-text Contrast as well?

[JAWS-test]

The difference in status between selected and non-selected (black, blue) has sufficient contrasts to satisfy 1.4.1 (more than 3:1). However, it is better not to rely on color differences, even if the contrast is greater than 3:1. This is because color differences are no longer visible when using User Styles or Windows High Contrast Mode. It would be better to mark the active tab/button with another visual means, e.g. with an underline

[JAWS-test]

The background colors do not need to be checked because the text colors have sufficient contrasts between them. If the text colors did not change, the contrast ratio of the background colors among each other would have to be at least 3:1.

It would be advisable if the tabs or buttons were given a frame or a dark background so that they are better recognized as controls. The background is so bright that it may not be recognized. However, 1.4.11 requires a frame only if the element is not otherwise recognizable. That is not the case here.

[JAWS-test]

Yes.

See: https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html

If content is conveyed through the use of colors that differ not only in their hue, but that also have a significant difference in lightness, then this counts as an additional visual distinction, as long as the difference in relative luminance between the colors leads to a contrast ratio of 3:1 or greater. For example, a light green and a dark red differ both by color (hue) and by lightness, so they would pass if the contrast ratio is at least 3:1. Similarly, if content is distinguished by inverting an element's foreground and background colors, this would pass (again, assuming that the foreground and background colors have a sufficient contrast).

However, if content relies on the user's ability to accurately perceive or differentiate a particular color an additional visual indicator will be required regardless of the contrast ratio between those colors. For example, knowing whether an outline is green for valid or red for invalid.

[AccessibilityEnthusiastic]

@JAWS-test If the text color is not changing, only the background is changing so we are comparing both the background and checking for 3:1 contrast for 1.4.1 checkpoint.

But what about 1.4.11 issue?
Can we compare the background(grey) of the selected state with the adjacent background(white) here as well since it is indicating the selected state?(it is not 3:1 contrast)

As per 1.4.11 WCAG:
Also, any visual information necessary to indicate state, such as whether a component is selected or focused must also ensure that the information used to identify the control in that state has a minimum 3:1 contrast ratio.
https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html
What do u think?

[JAWS-test]

1.4.1 and 1.4.11 both require 3:1 contrast, i.e. no matter which criterion you apply here, you will find that the contrast is not sufficient, because it is only 1.1:1.

[JAWS-test]

It only turns exciting when the background is gray, one entry dark gray, the other light gray. The entries do not touch, but there is a thin strip of the background color between them.
Imagine the following contrasts

• light gray to gray below 3:1 = not sufficient (according to 1.4.11)
• gray to dark gray below 3:1 = not sufficient (according to 1.4.11)
• light gray to dark gray above 3:1 = sufficient (according to 1.4.1)

This is a question that the WCAG unfortunately does not answer

[JAWS-test]

Related: #875

[bruce-usab]

I would fail this UI pattern against 1.4.1. There is very little contrast between unselected background grey and selected background pale blue. That leaves the work of conveying selected/unselected status to the black versus dark blue text, with a contrast ratio of just 3.5:1 which is not enough for text (4.5:1 minimum, and even that's not really enough given the context). I would ask for "selected" to use a bold or italic font, but even better would be inversing to light-on-dark.

[JAWS-test]

That leaves the work of conveying selected/unselected status to the black versus dark blue text, with a contrast ratio of just 3.5:1 which is not enough for text (4.5:1 minimum, and even that's not really enough given the context)

@bruce-usab This seems to me to be a very idiosyncratic interpretation of WCAG that is inconsistent with the wording of the SCs. Because

• 4.5:1 contrast is required for text to background (SC 1.4.3),
• but not for graphical information conveying a status (SC 1.4.1 - here 3:1 is sufficient).

The fact that a 3:1 contrast is often not sufficient for conveying status information and sometimes does not help at all (e.g. with user styles or high contrast mode) has often been discussed and unfortunately not taken into account in the WCAG SCs. I regret this very much, but it does not change the fact that the example is not a violation of SC 1.4.1. If you, @bruce-usab, agree with me that the example still has poor accessibility, you should join me in advocating for new, better SCs.

[AccessibilityEnthusiastic]

Thanks, @JAWS-test and @bruce-usab for your input.
I have a similar scenario for Star ratings. Please look into the screenshot.
Here same shape hues are used for the filled and not filled star and
filled and not filled star icon ratio is not 3:1 between them so it is a Use of color failure but are we also supposed to check the not filled star with the background color for 1.4.11: Non-text Contrast?

[JAWS-test]

filled and not filled star icon ratio is not 3:1 between them so it is a Use of color failure

Yes

but are we also supposed to check the not filled star with the background color for 1.4.11: Non-text Contrast?

Yes, both the filled and not filled stars need a 3:1 contrast to the background according to 1.4.11.

See for just this rating stars the figure 6 and 7 at https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html