1.4.1 Use of color: adding examples to understanding text - #3717

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

Rendered version

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

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.

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

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?

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

@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

@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 :)

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

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.

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)

✅ Deploy Preview for wcag2 ready!

Name	Link
🔨 Latest commit	1ddc3ed
🔍 Latest deploy log	https://app.netlify.com/projects/wcag2/deploys/6a6d08ab3ecd5a0008e256a5
😎 Deploy Preview	https://deploy-preview-3717--wcag2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

Resolved merge conflicts. Latest preview https://deploy-preview-3717--wcag2.netlify.app/understanding/use-of-color

@kfranqueiro wondering if we should prevent spellcheck from going into .svg files https://github.com/w3c/wcag/actions/runs/20512324433/job/58934824964?pr=3717