Add note about logo/logotypes contrast to 1.4.3, 1.4.6, and 1.4.11 understanding

[patrickhlauke]

While exempting text or non-text that is part of a logo/logotype makes sense (due to some companies' strict corporate identity requirements), it's nonetheless problematic when these logos/logotypes act as links of buttons.

These notes try to clarify the situation ... for 1.4.3 and 1.4.6 we can only suggest a best practice of - if possible - choosing an alternative that is still allowed by the CI/brand guidelines, or at the very least an additional link/control with the same purpose and with sufficient contrast.

For 1.4.11 there is a wrinkle here 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. And again, as best practice, if they can, consider using a more contrasting logo variant as well.

Closes #4376, closes #1275, closes #1739, closes #1742

x-ref #902

Previews:

• https://deploy-preview-4402--wcag2.netlify.app/understanding/contrast-minimum
• https://deploy-preview-4402--wcag2.netlify.app/understanding/contrast-enhanced
• https://deploy-preview-4402--wcag2.netlify.app/understanding/non-text-contrast

[netlify]

✅ Deploy Preview for wcag2 ready!

Name	Link
🔨 Latest commit	bf30ecd
🔍 Latest deploy log	https://app.netlify.com/projects/wcag2/deploys/69e3fa01a51c7f0008f90bc9
😎 Deploy Preview	https://deploy-preview-4402--wcag2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[kfranqueiro]

HTML diffs:

• Contrast (Enhanced)
• Contrast (Minimum)
• Non-text Contrast

[bruce-usab]

Discussed at length on backlog call 5/23. Group concurrence that when logo is part of a UIC, there remains the 3:1 contrast requirement. Concern that "should" is problematic, and Patrick offered to revisit.

[detlevhfischer]

This informal change would invalidate a long practice of exempting logos from contrast requirements, whether linked or unlinked. Many logos used are links to the start page. Often, there are other links (whether text of image) that replicate the function of the linked logo - but we have never passed logos that are below 3:1 only on the condition that there is, as it were, an in-page CAV.

So this looks like normative change to me if it is phrased in terms of a 'must' and not just as a 'should' (recommendation / best practice).

[patrickhlauke]

This informal change would invalidate a long practice of exempting logos from contrast requirements

I'd argue that for graphical/non-text logos at least, that practice was ... misguided, considering the distinction in 1.4.11 between graphical object and user interface component. for those, i'd posit that it's not a normative change, just a clarification of what should have been the practice all along.

for text contrast SCs, there is no UIC clause, so the (wrong, in my opinion) exception for "logotypes" is more problematic to address, which is why i was trying to tread lightly

in any case, i'm having a second round of tweaking/expanding the language following discussions at the backlog meeting to try and defuse the bomb

[detlevhfischer]

@patrickhlauke

…that practice was ... misguided

well, it is a practice covered in 1.1.1 for much longer than 1.4.11 exists - and I'd argue it is weird to demand another type or color for a logo once it is to be linked. Customers have wanted their logos the color they are and historically have been, many originating from a time when even 1.1.1 did not exist - which explains the exception.

[patrickhlauke]

well, it is a practice covered in 1.1.1 for much longer than 1.4.11 exists

where does 1.1.1 exempt logos?

assuming you meant 1.4.3 / 1.4.6, it only covers "Text that is part of a logo or brand name" so doesn't exempt any non-text parts of a logo

it is weird to demand another type or color for a logo once it is to be linked

is it? users need to be able to tell what they're about to click/activate ...

[detlevhfischer]

@patrickhlauke
oh yes, sure, I misremembered - it's 1.4.3 with the unqualified exception:

Logotypes
Text that is part of a logo or brand name has no contrast requirement.

[bruce-usab]

Discussed on backlog call 5/30, so far so good, but additional feedback is welcomed.

[patrickhlauke]

i mentioned it in this call the other week, but also note: 1.4.3 and 1.4.6 use the term "logotype", but likely in an inappropriate way. "logotype" usually refers to word marks, logos that are essentially made up just of text (albeit stylised, in a custom font, or similar). there, text is the ONLY thing that makes up the logo ... so don't assume that "if they can't see the text, then they'll be able to see the rest of the logotype" because there isn't anything.

i believe the spec should have just used "logos" rather than "logotypes" - logos can include both text AND non-text symbols.

[patrickhlauke]

Added an example of logos being shown with low contrast as an author choice, which does not exempt them as that presentation is then not "essential" but just an aesthetic decision of the designer/author

see the second note at the end of https://deploy-preview-4402--wcag2.netlify.app/understanding/non-text-contrast#required-for-understanding

[fstrr]

I do like the idea of dealing with those common blocks of faded out logos, but am concerned that more than that might be going a little too far. For me, the second note would suffice. In the meantime, I have these questions:

When they act as user interface components (such as links or other interactive controls), authors must nonetheless make sure that there is an aspect of the user interface components that allows users to identify the components and their state.

1. Do you have any examples of "an aspect"? It's pretty vague and, to use one of your examples from conversations on focus visible, as written, this could be a single pixel.
2. Is that a normative "must"?
3. Using the Orange logo as an example, are you suggesting that the company cannot use its decades-old branded logo as a link to the homepage because the white and orange has a contrast of less than 3:1?
4. If so, what "aspect" might the company do here? A different logo for just the web site header?
5. I'm unsure why state comes into it. Are you suggesting that colors need to change on hover / focus?

---

Finally, this feels like an important enough update to nor have it in two note sections.

[patrickhlauke]

1. Do you have any examples of "an aspect"? It's pretty vague and, to use one of your examples from conversations on focus visible, as written, this could be a single pixel.

The same way that 1.4.11 doesn't currently get any more specific about which part of a graphic is necessary to understand it, this part is intentionally left vague. Trying to be more specific would introduce a lot more normative requirements here that...shouldn't happen.

2. Is that a normative "must"?

In my view, yes. Again, I contend that this was always present already in the normative wording when considering logos when they act as UICs.

3. Using the Orange logo as an example, are you suggesting that the company cannot use its decades-old branded logo as a link to the homepage because the white and orange has a contrast of less than 3:1?

The "aspect" of the orange logo that is needed to recognise that there is something there that can be interacted with, as a UIC, is arguably the fact that the orange has sufficient contrast against the black header background. A user can at least perceive that there is something there. Now, if there were lots of other logos that are the same square shape, and then have very low contrast bits inside them to distinguish them, that might get trickier...

Also, in the specific case of the Orange logo there ... the UIC contains both that logo, and the big text "Orange Travel", so in this case, it's a moot point ... even if a user couldn't perceive that logo at all, the text next to it would still let them know that a) there is something there and b) what it is.

4. If so, what "aspect" might the company do here? A different logo for just the web site header?

They could also do something like a partial or full border around it, or similar "external" interventions.

5. I'm unsure why state comes into it. Are you suggesting that colors need to change on hover / focus?

Ah, good catch. I admit at this point, I can't remember where the "and their state" came from. That can be removed. EDIT: ah, state came straight from the normative wording of the SC: "Visual information required to identify user interface components and states"

Finally, this feels like an important enough update to nor have it in two note sections.

I may be using the "Note" (and its highlighting) here as a way to draw attention, rather than to give the impression that it's some aside / less important aspect. Happy to make this part of the regular text rather than a note.

[patrickhlauke]

@fstrr

Finally, this feels like an important enough update to nor have it in two note sections

Good point, I tried a different approach: an actual "Logos" section https://deploy-preview-4402--wcag2.netlify.app/understanding/non-text-contrast#logos