Understanding Success Criterion 1.4.11: Non-text Contrast - Figure 15

[giacomo-petri]

• URL: https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html
• Issue description: Figure 15 is marked as non passing use of color, but it's actually passing 1.4.1.
• Screenshot:

• Expected result: This is actually not failing 1.4.1 Use of Color, because text color is changing from white to black, which is not only a change in hue, but also a change in lightness (> 3:1).
  As per 1.4.1

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.

Keeping text to be white, we will have a contrast ratio issue, but at least it will fail the Use of color criterion and will be consistent with description below.

Giacomo

[kimviens]

Hi! I was just going to ask that question. I agree, this looks like it would pass use of color. Maybe the intention was to keep the text white? If the text was kept white, then the background change would be a use of color because its the only thing that changes.

[patrickhlauke]

made a replacement image that should be clearer #2574

[giacomo-petri]

Thank you @patrickhlauke, it's perfect now.

I do still have some concerns, but maybe would be better to open a separate issue for it:
buttons font-weight apparently seems not bold and font-size seems below 18pt. Considering that equal effect can be achieved using buttons with a darker background color (ensuring a minimum contrast ratio of at least 4.5:1 between text and background) or using a font-weight:bold CSS property (ensuring a minimum contrast ratio of at least 3:1 for large text), should we be in line with 1.4.3 SC, allowing a much wider range of users to perceive and understand examples?

[patrickhlauke]

fair point, was actually looking at that while hacking together that newer image. it might indeed be worth making sure the examples for 1.4.11 don't actually fail 1.4.3. I'll see if I can replicate all the "Example" button images with a more contrasty substitute... (actually tempted to see if it makes more sense to go down the SVG route for these example images, for more flexibility later on in editing them)

[patrickhlauke]

@giacomo-petri expanded the PR #2574 to also at least make the text in those buttons obviously (and consistently) "large text" (they're now 21px and bold)

[Accessibility-SME]

Hello,

Need opinion on below scenario. Button already have border and just border color changes on focus. is it a pass or fail? If fails, under which success criteria?

[patrickhlauke]

fails Use of Color. also, please don't use issues (that discuss clarifications/changes to the spec and related documentation) to just ask questions / get opinions like this...

[Accessibility-SME]

Thank you. Adding such scenario to page might help.