1.4.1 Use of color: adding examples to understanding text

[detlevhfischer]

Adding two examples for using color in focusing elements with the keyboard, one for links that have an additional underline, and one for buttons where the background color changes and focused and unfocused background have a contrast difference equal to or better than 3:1.

Background: The Understanding Text of 1.4.11 Non-Text Contrast has Figure 15 where it says:

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

There is so far no example how 1.4.1 applies to keyboard focus states so this might be helpful.

[patrickhlauke]

Would be great to provide a small image with each of these to illustrate the point (but yes, I know this is always a bit of a pain to do)

[detlevhfischer]

@patrickhlauke Agree. I have added illustrations. The text probably needs some further tweaking.

Rendered version

[bruce-usab]

@detlevhfischer could you be on the TF call next Friday (8 March)?

As has been the pattern, probably alastair or Michael will be screen sharing but we would like you (or someone who has reviewed) to walk the group through the PR.

[detlevhfischer]

but i assume what you had in mind here is that the dark blue is not 3:1 against the non-focused blue, right?

I think for a link in blue that has sufficient contrast to a white background AND 3:1 to the surrounding text (assumed to be black here), it would not even be possible to find a color on focus that both has 3:1 or better to the unfocused state AND maintains 3:1 or better to the surrounding text. Showing that this will not work so that some other differentiator (underline, bold or whatever) is needed would be the point for inline links.

[detlevhfischer]

@bruce-usab I'll try to be on the Friday call next week.

[scottaohara]

some suggested wording changes / alt text updates for the added graphics

[scottaohara]

Suggested change

	<img src="img/textlink.svg" alt="A blue inline text link in a block of black text, before and after receiving keyboard focus" width="500" />
	<img src="img/textlink.svg" alt="Two instances of the same paragraph of text containing a hyperlink. The first instance shows the unfocused hyperlink with blue colored text with no underline. The second instance shows the same hyperlink in the focused state, now with darker blue text and an underline" width="500" />

[fstrr]

I must be missing something with this, as F73, "Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision", seems to contradict it.

In this PR, we're saying that a link with no default underline can pass Use Of Color if it gets an underline on hover and/or focus. F73 seems to contradict that:

While some links may be visually evident from page design and context, such as navigational links, links within text are often visually understood only from their own display attributes. Removing the underline and leaving only the color difference for such links would be a failure because there would be no other visual indication (besides color) that it is a link.

Example 2 in F73 seems to back that up: an inline link with no underline, but that gets an underline in its hover state, fails.

Am I missing something obvious?

[scottaohara]

@fstrr the scenario here says that the non-underlined link is a color that passes the 3:1 ratio against the non-hyperlink text. so that's why it would be a pass.

maybe it'd be good to call out that even though this is a pass, it is still generally not recommended.

edit:
actually, i think we have a problem with the linked technique, since #f00 compared to #000 (assuming the paragraph text is #000) would have a 5.25:1 ratio. So that technique needs to be clarified and the paragraphs need to have a color that would result in a ratio that is less than 3:1, or Francis is right that there is conflicting interpretations at play here.

edit again:
this text from the understanding doc

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

and this passing technique - which links to these passing examples all seems to demonstrate that F73 needs to be fixed.

[patrickhlauke]

Swapped out base.css for editors.css for better previewing

[patrickhlauke]

Rendered preview https://raw.githack.com/w3c/wcag/1.4.1-examples-added/understanding/20/use-of-color.html

[detlevhfischer]

Nice, thanks for all the good edits! In a separate step, it's perhaps a good idea to still add a paragraph undo "Intent of Use of Color" so the example chimes with something explained before, as @u9000-Nine has hinted at.

[fstrr]

What I think would be useful would be to have the Focus On Links image match the ratios in the preceeding paragraph. I found that having two almost identical examples, one in text and one as an image, next to each other a little confusing.

In last week's backlog meeting, I think we discussed adding a note stating that if the example's underline was under 3:1 contrast, that would be a Non-Text Contrast issue. If I'm remembering that correctly, adding that would also be useful.

[detlevhfischer]

@fstrr Does my latest change of contrast values in the text preceding the illustration of inline link in default and focused state and the addition of a note on required underline contrast address your concerns?
Here is an updated rendered preview: https://raw.githack.com/w3c/wcag/d02f34b44294194950aaba9f189a27dd3ac2acbf/understanding/20/use-of-color.html

[fstrr]

@detlevhfischer Thanks for this. A couple of things:

1. Is the initial contrast actually 3.83:1 and not just 3.8:1?
2. Would changing the underline note to say this be clearer?:

Because the focus state's text color has a contrast of less than 3:1 with the surrounding non-link text, the underline must have a contrast of at least 3:1 otherwise the underline would fail Success Criterion 1.4.11 Non-Text Contrast

And, as it's a note, should it be marked up as a note?

Thanks :)

[mbgower]

Suggested change

<p>A block of text has a text link in blue that has a contrast of 3:1 to the surrounding text. When this link receives keyboard focus, it turns into a darker blue. The contrast difference between the link color in the focused and the unfocused state is only 2.0:1. In addition, after receiving focus the contrast difference between the link and the surrounding text is now also well below 3:1. To show the keyboard focus clearly, the link is in addition underlined, so the change of color is not the only indicator of keyboard focus. Without an additional focus indicator the example would fail the Success Criterion 1.4.1 Use of Color.</p>

<p>A blue text link has a contrast of 3:1 with the surrounding block of black text, and so is not relying on color alone. However, when this link receives keyboard focus, it turns a darker blue. The contrast between the link color in the focused and the unfocused state is only 2:1. In addition, after receiving focus the contrast difference between the link and the surrounding text is now also well below 3:1. To show the keyboard focus clearly, the link is in addition underlined, so the change of color is not the only indicator of keyboard focus. Without this additional focus indicator the example would fail the Success Criterion 1.4.1 Use of Color.</p>

[patrickhlauke]

Looking at this again on today's call, the "Focus on links" is problematic...

[alastc]

It needs an update:

1. It should note the example fails focus-appearance.
2. It would be useful to include the basic example for link text without a underline before this more niche case. That's the common case, and skimming the document it wasn't as clear as this niche case.

[patrickhlauke]

I'm going to work some more on this PR (hope that's ok, @detlevhfischer). My initial thinking is:

• it could benefit from a note/addition to the understanding prose (before the examples), so mention how "Use of Color" can also apply in situations relating to focus and on/off toggle states
• make an initial example that just shows the more common "links without underline that rely on color to be distinguishable from regular text"
• tweak Detlev's example of the focus state for the link to become a follow-up to the previous example - might also see if we can do it so that it doesn't fail focus appearance
• make another example that talks about a series of two/three buttons, one of which is toggled/pressed, but only uses a subtle difference in background colour to visually show that it's toggled/pressed
• create images/svgs for the existing two examples (the required fields that use colour and an icon, and the chemical compound image that uses colour and numbers to list the different atoms)