Understanding Use of Colour and Non Text Contrast

[ghost]

I have tried searching through the issues. The nearest thing I can finds is this one https://github.com/w3c/wcag/issues/1076. I am trying to wrap my head around Use of Colour and Non-Text Contrast.

As described in that thread, if you look at Use of Colour in isolation, there seems to be ambiguity about using colour that pass contrast and a greyscale text (by which you can argue that colour is not relied upon when colour is removed).

Non-Text Contrast seems to try to help with its "Relationship with Use of Color and Focus Visible" section.

It comments For example, "G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them is a technique to use a contrast ratio of 3:1 with surrounding text to distinguish links and controls.".

Presumably this involves components. For example, a tab panel where the selected tab has a differently coloured background is acceptable assuming it passes 3:1 and has an additional cue on focus.

So far so good. However, the star rating examples are throwing me.

Non-text information within controls that uses a change of hue alone to convey the value or state of an input, such as a 1-5 star indicator with a black outline for each star filled with either yellow (full) or white (empty) is likely to fail the Use of color criteria rather than this one.

Figure 6 Two examples which pass this success criteria, using either a solid fill to indicate a checked-state that has contrast, or a thicker border as well as yellow fill.

Is the implication that both of these would fail Use of Colour, presuming that there is no additional cue upon focus? They both pass the greyscale text. The first passes 3:1 contrast, the second fails 3:1 contrast.

My reading is that both fail use of colour. Again, assuming that nothing happens upon focus. For example, you tab onto the first example and the filled in stars grow to be larger than the unselected stars.

The first passes Non-Text Contrast. Technically, the latter fails Non-Text Contrast. The difference between selected and non-selected colours fails 3:1 contrast. However, if I were testing, I would prioritise raising a Use of Colour issue.

Does this reading of the section match other peoples reading?

[patrickhlauke]

The example you quote passes non-text contrast, and does NOT rely on use of color (as even without color perception you'd be able to tell the "active" and "inactive" stars apart (due to their solid black fill in the first case, and the thicker border in the second case).

it's the first example of Figure 7 which fails use of color, as it represents "a 1-5 star indicator with a black outline for each star filled with either yellow (full) or white (empty) is likely to fail the Use of color criteria rather than this one."

flipping the figures around would probably make this clearer (and, my usual bugbear, this understanding document uses "criteria" when it should say "criterion")

[ghost]

Thanks, I missed the thicker internal border.

I do think that this language could be made more explicit. For example, "Two examples which pass these success criteria", "Two examples which pass both Non-Text Contrast and Use of Colour", or so on.

The next figure says...

"Two examples which fail a success criteria, the first fails the Use of color criteria due to relying on yellow and white hues. The second example fails the Non-text contrast criteria due to the yellow (#fff000) to white contrast ratio of 1.2:1.".

For me, that more clearly identifies which figure failure what and why.

It would be useful to have something like...

Two examples which pass two success criteria. They both pass Use of Colour because ... They both pass Non-Text Contrast because ...".

This all said, I am still confused by...

"Non-text information within controls that uses a change of hue alone to convey the value or state of an input, such as a 1-5 star indicator with a black outline for each star filled with either yellow (full) or white (empty) is likely to fail the Use of color criteria rather than this one."

But the first example of Figure 7 passes the greyscale test. It does fail 3:1 contrast. But then is contrast all is needed? G183 identified that controls need contrast and a further visual cue on focus.

The success criterion says...

In that case the Working Group regards a link color that meets the 3:1 contrast ratio relative to the non-linked text color as satisfying the Success Criteria 1.4.1 Use of color since it is relying on contrast ratio as well as color (hue) to convey that the text is a link.

But is that strictly the case? Is not not that it needs to pass contrast and have a further cue on focus? Is Non-Text Content removing that additional qualification?

This is not to get onto that Non Text Contrast seems to be redefining (or at least clarifying) Use of Colour. In turn, the normative definition of Use of Colour and its Understanding section seems at odds with all this.

This is discussed in https://github.com/w3c/wcag/issues/1076). For example, it talks about text-only, monochrome, and braille displays. As well as information conveyed by color is available in other visual ways (e.g. increased font-weight).

Apologies if this comes across as sassy. Maybe I am missing some technical point about hue and luminosity. But this is not outlined within Use of Colour itself. There does seem like there are mixed messages.

[patrickhlauke]

Just on this aspect:

But the first example of Figure 7 passes the greyscale test. It does fail 3:1 contrast. But then is contrast all is needed? G183 identified that controls need contrast and a further visual cue on focus.

the first example here fails Use of Color, as the only difference between a full and empty star (and the only way for a sighted user to tell) is the difference between white color and very light yellow - the difference between white and yellow here is 1.2:1 ratio, so fairly imperceptible (doubt this would pass any kind of "greyscale test"). This however does not fail non-text contrast per se, as there are no adjacent colors with a low contrast. (white against the black border, and yellow against the yellow border, both have contrast above 3:1).

the second example of course fails non-text contast, as the stars themselves are imperceptible as they also only have a contrast ratio in and of themselves of 1.2:1 (and in this case, the yellow and white are adjacent, so fails this particular non-text contrast SC).

beyond this, yes - there is a fundamental gap currently in how "Use of Color" is normatively defined, and the redefinition of "color is actually hue" and the tacit admission that to an extent it also needs sufficient contrast (even if the hue doesn't change). this has been discussed at various points, like https://github.com/w3c/wcag/issues/201 https://github.com/w3c/wcag/issues/1076 https://github.com/w3c/wcag/issues/1118 and it's something that should really be disambiguated...as has been argued many times in the past...

[patrickhlauke]

in any case, non-text contrast itself really applies to any case of adjacent colors. it is not about comparing states (focused/selected) to each other or not (i touch on this, and the relationship with focus visible and use of color, in https://youtu.be/I0tghv881ac?t=1468 as well - including the mention of when non-text contrast does and doesn't kick in)

[patrickhlauke]

the aspect of how to programmatically convey state is then also a separate issue (generally 4.1.2 name, role, state, value)

[ghost]

The colours are different in greyscale. It is not easy to observe. But you can observe it. Whether or not it is fairly imperceptible or not is subjective.

I can easily tell that the stars in the second screenshot are differently coloured despite poor vision without my glasses.

Unless we apply the G183 which makes it less subjective by requiring 3:1. But then that also requires additional cues on focus. And if it doesn't require focus, then it's not a control and there is nothing in Use of Colour itself to pass it with.

in any case, non-text contrast itself really applies to any case of adjacent colors. it is not about comparing states (focused/selected) to each other or not

But the normative definition includes...

"Visual information required to identify user interface components and states".

Sticking with the star example, to determine the unselected state of the star, you must compare it against the selected state of the star. You say it is not about comparing states, but that is required to identify the states.

The meaning of states are intrinsically linked and cannot be understood in isolation. This loops back to Use of Colour, though. And we're stuck again due to the challenges that that poses.

It almost seems like issues are trying to be solved by awkward redefining and rejiggering. LIke some back-door fixes. But the awkward solutions just raise more questions. For example, the technique seems to go against the normative definition of the success criterion and it not listed as an exception.

Thank you very much for providing those links to other issues, though. There is obviously a much bigger back story to this discussion than I initially realised. It is appreciated.

the aspect of how to programmatically convey state is then also a separate issue (generally 4.1.2 name, role, state, value)

Yes, I agree that Name, Role, Value is the place to talk about programmatic determination.

However, my reading of Use of Colour is that it needs to be visual. Only programmatically providing alternatives to things that otherwise rely on colour is not acceptable.

Similarly, if exclusive use of colour was disambiguated with hidden text I would still consider this to be a failure.

[patrickhlauke]

Unless we apply the G183 which makes it less subjective by requiring 3:1. But then that also requires additional cues on focus.

that series of examples says nothing about focus though. yes, for focus you'd need to add a further visible indication, yes. the examples here in figures 7 and 8 only deal with the relationship of non-text contrast and use of color, not also with focus visible.

Sticking with the star example, to determine the unselected state of the star, you must compare it against the selected state of the star. You say it is not about comparing states, but that is required to identify the states.

but non-text contrast only applies to adjacent colors. so you can't apply non-text contrast SC to this scenario.

you need to evaluate each state in isolation by itself. that's how it's defined.

However, my reading of Use of Colour is that it needs to be visual. Only programmatically providing alternatives to things that otherwise rely on colour is not acceptable.

and i'm not disputing that. i'm pointing out (since you mentioned that aspect from the other discussion as well) that this part is orthogonal to non-text contrast and use of color.

It almost seems like issues are trying to be solved by awkward redefining and rejiggering. LIke some back-door fixes. But the awkward solutions just raise more questions.

i've been the first to point out that the Use of Color SC tried this redefinition of "color is actually hue" non-normatively. so yes, agree. there's a hairy mess of gaps and redefinitions in WCAG currently. for focus, there's an attempt to patch this (with focus visible enhanced in 2.2). but there's still gaps in the area between "Use of Color" and denoting visual state not tied to focus.

[patrickhlauke]

/cc @alastc for, to sum it up, yet another case of Use of Color being too wooly and needing a proper redefinition

[ghost]

but non-text contrast only applies to adjacent colors. so you can't apply non-text contrast SC to this scenario. you need to evaluate each state in isolation by itself. that's how it's defined.

I can see where you're coming from. As with text contrast, it is about adjacent colours. I think my confusion loops back to Use of Colour. In this case, the states can only be understood through the cross-comparing them.

But that's a problem (or discussion point) with Use of Colour, not Non-text Contrast.

Thank you for your feedback.

Upon reflection, I think that Use of Colour might be trying to solve two distinct problems. Or at least that the current wording is pushing people to think that it is trying to solve two problems.

1. where colour vision is needed in order to perceive colour a certain way. In this example no amount of contrast helps. It requires that you perceive the colour the way that the designer expects you to perceive colour. This needs some other visual cue that does not rely on colour. It is similar to sensory characteristics.

2. where colour vision is not needed in order to perceive colour a certain way. In this example, you do not need to be able to perceive that the selected tab has black text and that the unselected tabs have green text. You just need to be able to perceive that one is different from the others. This is where contrast does make a material difference.

Arguably the latter does not rely on colour. More specifically, it does not rely on one's perception of individual colours. But this nuance is not well explained in the normative definition of the understanding document.

[alastc]

This is a wide ranging thread, but I think PR #1500 closes this one. Please re-open if there is an unresolved question.