Add clarification to 1.4.11 Non-text contrast understanding about exempt graphical objects acting as user interface components - UIC needs to have *some* sufficiently contrasting aspect

[patrickhlauke]

For a counter-proposal, see #5250

This is a redo of the previous speculative PRs - cleaned up, and expanded to not only include "logos" but more generally any graphical objects that are exempted, like flags and such

Supersedes #5113 (which only focused on logos, but the same rationale needs to apply to any other graphical objects - like flags etc - whose contrast/colours can't be changed, but that also act as UICs)

In addition, this PR moves the "Logos" section directly under/into the "Exception examples", where it more logically belongs, fixes some markup indentation, and lowercases some of the headings.

Copying over the context/rationale from #5113

The normative wording for 1.4.11 https://www.w3.org/TR/WCAG22/#non-text-contrast

The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):

User Interface Components
Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;
Graphical Objects
Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.

has two distinct aspects/subjects - user interface components (UICs) and graphical objects.

Logos that have insufficient non-text contrast are exempted when they act as graphical objects, as their (low contrast) colours fall under the "except when a particular presentation of graphics is essential" clause.

However, when logos are the only content inside a UIC, the logo itself may be exempt, but the UIC around it has no explicit exemption. A button/control only containing a logo with insufficient contrast, and no other sufficiently contrasting visual indicator, would fail the UIC clause of 1.4.11.

This means that authors would need to either choose a different version of the logo (if it exists) that has sufficient non-text contrast, or make sure there is some other visual indicator on the UIC so that people who can't perceive the low-contrast logo can still understand/see that there is a UIC to begin with.

The PR also adds a clarification/reminder that if there's an accessible alternative (such as a link/control that serves the same purpose) somewhere on the page that DOES have sufficient contrast, that can also be used to pass this criterion.

---

Follow-up to #4402 - this PR contains the more controversial aspect that clarifies if a logo is used as a user interface component, then the UIC does need to have a sufficiently contrasting element so that users can perceive it.

For 1.4.11 there is a wrinkle because the SC distinguishes between user interface controls and graphical objects. Logos on their own count as graphical objects, and if the CI/brand guidelines stipulated non-contrasting colours, then that is "essential". However, the "user interface control" part of a link/button with a logo is still subject to the requirements of the UIC needing to be identifiable.

Closes #4376, closes #1275, closes #1739

x-ref #902

Preview: https://deploy-preview-5249--wcag2.netlify.app/understanding/non-text-contrast

Diff: https://services.w3.org/htmldiff?doc1=https%3A%2F%2Fwww.w3.org%2FWAI%2FWCAG22%2FUnderstanding%2Fnon-text-contrast.html&doc2=https%3A%2F%2Fdeploy-preview-5249--wcag2.netlify.app%2Funderstanding%2Fnon-text-contrast

[netlify]

✅ Deploy Preview for wcag2 ready!

Name	Link
🔨 Latest commit	7b7690e
🔍 Latest deploy log	https://app.netlify.com/projects/wcag2/deploys/6a759cea44b2f700070382b3
😎 Deploy Preview	https://deploy-preview-5249--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.

[patrickhlauke]

While my original preference was for this particular interpretation, as it follows exactly from the normative wording (if you think it through), there are some additional wrinkles that this brings up:

• nominally, the "text" part of a logo falls under the regular (text) Contrast SC, which does not have this dual "text and UIC" aspect; admittedly, the more fundamental problem is the actual thinslicing of a logo into its text and non-text parts - arguably, a logo should be considered as a whole single "thing" (particularly for logos where the "text" part is heavily stylised, to the point where it's almost a non-text representation); nonetheless, the current separation would cause an additional headache - what if the non-text part of a logo has low contrast, and is exempt, and the text part of a logo is exempt from the Contrast SC, but the logo (non-text + text) is the only content of a UIC?
• as @giacomo-petri pointed out at the time, the Non-text Contrast SC has an additional clause/exemption for styling that is down to the user agent/not changed by the author; in current browsers (not sure when this change happened in the default browser stylesheets) if you have an image wrapped in a link, the image has no default border...so having a <a href="..."><img ...></a> would, by default, not show any outline/border around it...

[patrickhlauke]

A further aspect I'd like to address (both here and in the other PR) is the weird heading structure of the current understanding document...

[bruce-usab]

Suggested change

	<figcaption>An author chooses to present company logos with low contrast by default, until they are hovered; the fact that these are logos doesn't exempt this scenario from failing the requirements of this success criterion, as the initial low contrast presentation is not "essential" (since it's not mandated by corporate identity or brand guidelines)</figcaption>
	<figcaption>An author chooses to present company logos with low contrast by default, until they are hovered; the fact that these are logos doesn't exempt this scenario from failing the requirements of this success criterion, as the initial low contrast presentation is not "essential" (since it's not mandated by corporate identity or brand guidelines).</figcaption>

[bruce-usab]

Suggested change

	<h2>Graphical Object examples</h2>
	<h2>Graphical object examples</h2>

[bruce-usab]

Preview Diff between 5250 and 5249 at Essential Exception.

[patrickhlauke]

As discussed at last week's meeting, I am going to close this PR, as unfortunately the fact that there is no matching UIC logic for (text) contrast, this would cause inconsistencies for logos that are purely text / logotypes.

see #5249 (comment)