Relationship between Use of colour, Non-text contrast, and Focus visible

[ajanec01]

Can I please get some clarification about the relationship between the above-mentioned criteria? In the understanding doc for the use of color criterion there is a note that reads:

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).

The way I understand this is that if I had a keyboard focus indicator that relies only on changing the background of an interactive component then if only the hue changes but the difference in lightness between the two backgrounds is less than 3:1 then this is a failure of Use of colour.

The above scenario is a bit more complicated after reading the understanding document for Non-text contrast that says:

In combination with 2.4.7 Focus Visible, the visual focus indicator for a component must have sufficient contrast against the adjacent background when the component is focused, except where the appearance of the component is determined by the user agent and not modified by the author.

Note that this Success Criterion does not directly compare the focused and unfocused states of a control - if the focus state relies on a change of color (e.g., changing only the background color of a button), this Success Criterion does not define any requirement for the difference in contrast between the two states.

Reading this makes me believe that the focus indicator that relies on the change of hue with a contrast ratio of less than 3:1 against the two colours is not a failure of colour only and Non-text contrast. It is also not a failure of focus visible because of the changing hue.

I also understand that the keyboard focus indicator that relies on the change of background with the same hue but different lightness is not a failure of all of the above criteria, because:

• the colour is not used to indicate an action or anything else and therefore sc 1.4.1 is not applicable;
• the changing backgrounds are not applicable to 1.4.11 as per the understanding doc, the only potential failure of this criterion would be if the focused background did not have enough contrast ratio with adjacent colours; and
• the interactive component indicates keyboard focus by changing the lightness which is a pass of sc 2.4.7

It is even more confusing when we take a look at advisory technique C15. In the live example, neither the indicator that uses background-color: #FF6; nor the indicator that uses background-color: #7FFF00; have enough contrast ratio with the adjacent background. It looks like this example negates the note in the understanding doc for Non-text contrast.

So to summarise my questions:

1. Is changing the background to indicate focus a failure of the use of colour criterion if the hue of the background is changing but the lightness between the two colours is less than 3:1?
2. Is it a failure of the Non-text contrast criterion if a keyboard focus indicator relies on changing the background colour and the colour of the background in the focused state is than 3:1 with the adjacent background?

[patrickhlauke]

this whole area has been causing confusion, and there's no clear agreement it seems...

my take on some of these interrelations is here, but not everybody seems to agree https://github.com/w3c/wcag/issues/1775#issuecomment-832110108

[JAWS-test]

Is it a failure of the Non-text contrast criterion if a keyboard focus indicator relies on changing the background colour and the colour of the background in the focused state is than 3:1 with the adjacent background?

With all the controversy on the subject, I would say that C15 clearly violates 1.4.11 and thus should be removed or adjusted

[ajanec01]

Thinking about it for a bit more, radio buttons and the text field from the live example have a default focus indicator (pulsating caret and a browser outline). The argument could be made that the custom indicators are not required to identify a state and the default focus indicator is enough to pass. I think the examples also pass 1.4.1 for the exact same reason. At the moment, they only pass 2.4.7. Am I right?

[patrickhlauke]

caret counts as a focus indication, yes (see https://github.com/w3c/wcag/issues/680). and default focus indicator counts as visual indication (that is not related to just use of color) and is exempt from further non-text contrasts requirements (provided no other styling affects the element and its presentation... i.e. "where the appearance of the component is determined by the user agent and not modified by the author")

[JAWS-test]

Thinking about it for a bit more, radio buttons and the text field from the live example have a default focus indicator

Yes, the elements in the sample file have a default focus that is sufficient. But this is not described in C15, the technique itself uses colors whose contrasts are not sufficient. C15 sounds like the technique could be used without a standard focus - and this is not the case

[alastc]

@ajanec01 based on 1775 the understanding doc for non-text contrast has been updated, see the section "Relationship with Focus Visible" under https://w3c.github.io/wcag/understanding/non-text-contrast.html#figure-two-star-ratings-failing Does that resolve the confusing aspects? It is quite detailed.

Regarding Technique C15, it is only referenced by focus-visible, so anything would work there. It doesn't appear to fail non-text-contrast or focus-appearance due to the default browser indicators as well (tested in FF and Edge). It is dated (I think it was there to highlight the 'new' adjacent selectors?!), but doesn't appear to be an urgent update.

[fstrr]

Proposed response:

Hi, @ajanec01

Hopefully these answers to your questions are what you're looking for.

Question 1: "Is changing the background to indicate focus a failure of the use of colour criterion if the hue of the background is changing but the lightness between the two colours is less than 3:1?"

Figure 15 of the updated Non-Text Contrast criterion answers this question:

"The change of background within the component is not in scope of non-text contrast. However, this would not pass Use of color."

The change in contrast ratio between the two states in the example is less than 3:1, so it would fail Use Of Color.

Question 2: Is it a failure of the Non-text contrast criterion if a keyboard focus indicator relies on changing the background colour and the colour of the background in the focused state is than 3:1 with the adjacent background?

[Figure 7](The https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html#figure-two-star-ratings-failing) covers this scenario. If the background color of the focus state is less than 3:1 against the adjacent background, it would fail non-text contrast. Additionally, the "text input using background color" example shows this:

"text inputs that have no border and are differentiated only by a background color must have a 3:1 contrast ratio to the adjacent background".

If you need any more clarification, please let us know. If not, we'll close this issue.

[ajanec01]

Thanks for the clarification, good to close!

[JAWS-test]

Before this is closed, C15 should be corrected

[fstrr]

@JAWS-test Happy to correct that document and the live example. Are you specifically talking about the yellow background that a radio button's label gets when the button is focused?

[JAWS-test]

@fstrr Yes, see https://github.com/w3c/wcag/issues/1847#issuecomment-856576812

[alastc]

C15 updated, so closing this. Thanks @fstrr