This content originally appeared on TPGi and was authored by Ian Lloyd
If there is one topic that causes a lot of debate among our accessibility engineers here at TPGi, it’s the Success Criterion 1.4.1 Use of Color. On the face of it, it seems like a simple one:
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
Yet time and again we encounter issues that result in much head-scratching and deliberation from the hive mind.
- Was that really a failure due to use of color?
- Are we failing on Use of Color because we just want the links underlined?
- Or is it just bad UX for everyone and therefore not a WCAG failure as such … but still sucks, nonetheless?
Because we encounter issues where there may be differing opinions on such things (depending on the engineer who’s reviewing and whatever direction the wind is at the time), we decided that the best way to come to a consensus was to pull together some examples and get collective agreement on it. In doing that, we created some examples that felt really quite mean. Like, nobody would ever do that for real, would they? Apparently, even examples that seemed contrived for the purposes of creating test pages would prompt some engineers to say “I’ve seen that in the wild!” Wild, indeed.
Now, we could simply share these examples with you and state “This fails, this passes etc”, but in discussing these cases we found it was more fun to treat it a bit like a game show. So, fire up your favorite TV theme music to set the scene then take a look at the examples below. And ask yourself “Is this a pass or fail?” before revealing what we concluded.
One final thing …
Test 1: Inline Links Are Out of Line
This is bread-and-butter stuff: inline links in body text. This is surely an easy one for starters, right?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis quae expedita quos molestiae ex praesentium laboriosam corrupti laborum illo minima aspernatur eaque, cumque ab autem. Eos maiores, iste omnis odit.
Aperiam assumenda deleniti dolore accusamus suscipit, consequatur corporis reprehenderit qui perspiciatis ad vel ducimus numquam quia soluta odio temporibus eveniet nemo dolores at labore quod officiis? Harum quaerat reprehenderit modi.
Is this a failure of 1.4.1 Use of Color?
Fails- The ONLY thing that indicates that these are links rather than the surrounding body text is the change of color.
- If you’re tempted to mention technique G183 at this point, just hold on to that for a moment. Or, more specifically, until you get to Test 14.
Test 2: It’s All in Your Header
For this test, assume that it is right up at the top of the page as header navigation. Also note that this test is responsive, so wiggle that browser window around, whydon’tcha?
Is this a failure of 1.4.1 Use of Color?
Passes- The position and layout of the links in the header—either as expand/collapse disclosure menu on mobile or a series of links set horizontally for desktop browser view—are such that it’s clear this is header navigation and the color/style is almost irrelevant.
- Lack of underline does not present a usability/UX problem.
- Color is not being used to differentiate these links from other text.
Test 3: How Could You Be So Bold?
Careful now with the headings, Lloydi, you’ll start giving away clues. Can’t make this too easy. Anyway, let’s continue. How does this one fare?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis quae expedita quos molestiae ex praesentium laboriosam corrupti laborum illo minima aspernatur eaque, cumque ab autem. Eos maiores, iste omnis odit.
Aperiam assumenda deleniti dolore accusamus suscipit, consequatur corporis reprehenderit qui perspiciatis ad vel ducimus numquam quia soluta odio temporibus eveniet nemo dolores at labore quod officiis? Harum quaerat reprehenderit modi.
Is this a failure of 1.4.1 Use of Color?
Passes- While there is no underline present, there is another difference in the links that makes them stand out from the body text: they are bold.
- Of course, underlining would help to reinforce that these are links.
- Depending on the font used, the difference between normal font weight and bold may be subtle.
Test 4: 2 Bold, 2 Furious
Everyone loves a sequel, and this is Test 3’s sequel. Truth be known they were both built at pretty much the same time, so perhaps it’s a bit rich to call it a sequel. (Don’t worry, we’ll get on to some real total re-hashes later on.)
Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis something really important quae expedita quos molestiae ex praesentium laboriosam corrupti laborum illo minima aspernatur eaque, cumque ab autem. Eos maiores, iste omnis odit.
Aperiam assumenda deleniti dolore accusamus suscipit, consequatur corporis reprehenderit qui perspiciatis ad vel but watch out, this is super dangerous, ducimus numquam quia soluta odio temporibus eveniet nemo dolores at labore quod officiis? Harum quaerat reprehenderit modi.
Is this a failure of 1.4.1 Use of Color?
Fails- In this example, we can no longer tell that the links are links by the fact that they are bold, because now we also have some important text marked up with
<strong>elements. - With just the color to differentiate the two bold text types, we simply don’t know what’s a link and what’s just important text.
- So, color alone is used to differentiate these two types of text. Chalk it up as another failure.
Test 5: The Indications Are Good
What’s this? Some imagery in this otherwise dull-as-dishwater collection of barely designed examples from someone who really shouldn’t ever attempt to open any graphics software? Normal, boring service will be resumed again soon.
Lorem ipsum dolor sit amet consectetur adipisicing elit 
. Blanditiis quae expedita quos molestiae ex praesentium laboriosam corrupti laborum illo minima aspernatur eaque, cumque ab autem. Eos maiores, iste omnis odit.
Or maybe it’s just the final word in this sentence that is a link
Is this a failure of 1.4.1 Use of Color?
Passes- While there is no underline present, there is another difference in the links that makes them stand out from the body text: every link has an arrow after it indicating that it goes somewhere (a new tab/window, specifically).
- Of course, underlining would help to reinforce this.
- If some links opened in a new window and some did not—and hence did not have icons—then those without would fail 1.4.1.
- Also note that while the new window icon provides a visual clue about the link, it only shows where the link ends; it may be difficult to perceive the start of any given link.
Test 6: Give Us a Clue
Nobody does this, though, do they? Alas, they do. Seen it with my own eyes. Of course, it took me a while to work out precisely what I was seeing. What do you see? Do you see a pass or a fail of 1.4.1?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis quae expedita quos molestiae ex praesentium laboriosam corrupti laborum illo minima aspernatur eaque, cumque ab autem. Eos maiores, iste omnis odit.
Aperiam assumenda deleniti dolore accusamus suscipit, consequatur corporis reprehenderit qui perspiciatis ad vel ducimus numquam quia soluta odio temporibus eveniet nemo dolores at labore quod officiis? Harum quaerat reprehenderit modi.
Is this a failure of 1.4.1 Use of Color?
Passes- Well, this one’s a doozy. Technically speaking, there is no change of color here to indicate that this is a link, because the links are the exact same color.
- While this is not a 1.4.1 failure, it is absolutely awful for everyone.
- But it can’t be pinned on use of color and there is not really another SC that this can be pinned on, so unfortunately we are left with Best Practice for this, with the strongest possible condemnation and highest possible severity rating! (And also, probably, some expletives.).
Test 7: Cool, 2 Actions
Because it has call-to-actions. And there are 2 actions and … OK, move along, I promise you this is as bad as it gets, headings-wise (can’t say the same for the actual tests, mind).
Quis voluptatem, accusantium maxime delectus ut quisquam laudantium hic iste? Natus fuga ipsum velit at consectetur, vitae, non accusamus architecto corrupti quo dolores. Sapiente tenetur cum nisi molestiae quod iste.
Is this a failure of 1.4.1 Use of Color?
Passes- Well, it’s a classic “it depends” but with this bare bones example, it’s a pass.
- It depends on other content and layout nearby. But here, it’s a (small) list of links after a block of text.
- The position and layout means that the links are not confused as being part of a sentence (as they might in Test 1).
- The shortness of the links (as shown here) also help reinforce this.
- Clearly the link phrases—imperative call-to-actions—make this much more obvious that these are links.
- Underlines would sure help here, but the position and language means that it is not just the change of color at play here.
Test 8: Such a Card
You know the deal: some blurb, some actions in something that has some card/panel/tile-like styling. How do these links fare?
Is this a failure of 1.4.1 Use of Color?
Passes- The design/layout of the call-to-action links makes it pretty clear that these do something different to the text above, even as gloriously unstyled as they are.
- Color is not the only thing that indicates these are links, position/layout does this.
- As with Test 7, the imperative language of the call-to-action also makes it clear this is something to be interacted with.
Test 9: Links. Lots of Links
As seen on web site footers everywhere.
Another Thing
This Thing
That Thing
Is this a failure of 1.4.1 Use of Color?
Passes- All of the text in the lists are styled the same.
- The layout (and in the real world with suitable link phrases, not Latin gibberish) suggests that these are links.
- This is typical of the what you might find in a site footer or an FAQ page. While there are no underlines present, the context tells you that these are links.
Test 10: More of the Same. Almost
It’s rehash (with a twist) time. How did you answer for test 9? Is your answer the same here?
Another Thing
This Thing
- Debitis.
- Sapiente.
- Labore.
- Laudantium.
- Consectetur.
That Thing
- Commodi.
- Dignissimos.
- Expedita.
- Laborum.
- Iure.
Is this a failure of 1.4.1 Use of Color?
Fails- Wait, what? This is the same as the example in Test 9, right? Nope!.
- Half of the lists are links, half are not.
- It may not be possible to differentiate by color, and the layout of each group of links is identical. Yet some are links, some are not.
- The only differentiator here is color, hence it fails 1.4.1.
Test 11: Expect the UnUXpected
Because nothing says “I’m a smart designer” more than throwing out decades-old conventions because you feel like it. Like I did when creating this monster (and yes, I HAVE seen this in the wild too):
Another Thing
This Thing
That Thing
Is this a failure of 1.4.1 Use of Color?
Passes- So let’s get this straight … the links are not underlined but the headings are? People actually do this? (spoiler alert: they do).
- As with Test 9, the layout/position (and content, in the real world) of this suggests these are links.
- The underlined heading is an extra ‘screw you’ to everyone, but it does not mean any of this fails 1.4.1.
- It is just bad, BAD UX and should be flagged as a best practice with suitably phrased angry words.
Test 12: You Said You Wanted Underlines
Underline all the things! What’s the worst that could happen?
Another Thing
This Thing
That Thing
Is this a failure of 1.4.1 Use of Color?
Fails- If everything is underlined like it is here then they all look like links. Except they are not: each block has a heading (underlined) and links (underlined).
- The difference is the link color alone (the fact that the heading has some space between it and the following links doesn’t clearly indicate that the heading is not a link).
Test 13: Ooh, Look at Me
Similar to the previous card example, but with some subtle differences. Would you pass or fail this for 1.4.1? Note that we’re interested in everything in the rounded corner box and its relationship with the text above and below.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum vero sunt minus corporis nostrum tenetur quisquam deserunt dolorem voluptate a cupiditate officia vel est, maxime, possimus recusandae quo explicabo nulla!
Natus earum, error eligendi ab tempore dicta minus officiis fuga deleniti in a possimus sit voluptates, labore atque quam pariatur quasi velit.
Saepe neque repellendus alias ex earum eaque obcaecati quis corrupti error. Sed dolorem a, illo, explicabo facilis blanditiis dolor quas vel molestiae, corporis, iusto. Odit veritatis ex quaerat, cum. Unde?
Is this a failure of 1.4.1 Use of Color?
Passes- Once again, the position/layout and the imperative language of the call-to-action make it clear that this is a link (or something interactive, at least) .
- In this example, all of the card content is a link (the
<a>element wraps around it all, but only the CTA part has a hover effect).
Test 14: The “Isn’t This the Same as Test 1?” Test
Well, yes it is, but it’s ever so slightly different but just for the purposes of creating a follow-up point.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis quae expedita quos molestiae ex praesentium laboriosam corrupti laborum illo minima aspernatur eaque, cumque ab autem. Eos maiores, iste omnis odit.
Aperiam assumenda deleniti dolore accusamus suscipit, consequatur corporis reprehenderit qui perspiciatis ad vel ducimus numquam quia soluta odio temporibus eveniet nemo dolores at labore quod officiis? Harum quaerat reprehenderit modi.
Is this a failure of 1.4.1 Use of Color?
Fails- The blue link text has no underline or any other distinguishable difference to adjacent body text. Only color differentiates it.
- It’s the same as Test 1 (so I hope that you answered the same for this) but I have a boring fact to give you about it.
- The contrast between the blue text and the adjacent black text of the paragraph is 2.97:1. That might be a boring fact, but we’re leading somewhere with this …
Test 15: The “Come on, You’re Just Repeating Things Now” Test
Well, not quite. There’s a VERY subtle difference here. The question is: do you know what it is and does it give you a pass or a fail?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis quae expedita quos molestiae ex praesentium laboriosam corrupti laborum illo minima aspernatur eaque, cumque ab autem. Eos maiores, iste omnis odit.
Aperiam assumenda deleniti dolore accusamus suscipit, consequatur corporis reprehenderit qui perspiciatis ad vel ducimus numquam quia soluta odio temporibus eveniet nemo dolores at labore quod officiis? Harum quaerat reprehenderit modi.
Is this a failure of 1.4.1 Use of Color?
Fails- The blue link text has no underline or any other distinguishable difference to adjacent body text. Only color differentiates it.
- So it’s almost identical to test 14 (and Test 1, naturally) and yet … something is different.
- The contrast between this slightly lighter shade of blue text and the adjacent black text of the paragraph is 3.06:1. At this point some might say “It passes then, because it’s above 3:1 ratio with adjacent text!”. But hold your horses.
- There is a technique: G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them. But this does not/cannot get you off the hook. Why? Because this cannot be used on touch devices, so is not valid in any situation where the user may be using a touch device. So sure, this text contrast difference is over the 3:1 ratio, but with no guarantee that the content will never be accessed on a touch device, it is not valid to use this technique.
- You may express your ire now. Or gratitude. It’s a difficult one to call.
Test 16: One of These Things Is Not Like the Other
Quite a common technique that we see in navigational elements and such like—the active/current element has its colors inverted. Let’s take this simple example, then. Would you pass this?
Is this a failure of 1.4.1 Use of Color?
Passes- In this example, the color scheme (if you consider “black and white” as a color scheme) is the highest contrast possible, so inverting gives you a VERY obvious difference.
- Note that there is nothing normative in the reams of W3C documentation that says inverting is a valid technique, but our stance is that if the contrast is over 3:1 with the elements’ text and background, then inverting is a suitable technique and we would pass it.
Test 17: What Becomes of the Faux Inverted?
Another example of something inverted (that isn’t a straight up black and white answer, literally and figuratively). Pass or fail, what say you?
Is this a failure of 1.4.1 Use of Color?
Fails- Isn’t this the same as the previous example? We inverted the colors, right? Not quite. That active button has different color text, it’s a darker color than the other buttons’ background, so it’s not really inverted.
- The contrast between the text and background is approx 2.8:1, so when inverted the background of an active button and an inactive one will have the same level of contrast.
- This also fails SC 1.4.11 Non-text Contrast because the difference between the gray and lightgreen buttons signifies whether the button is focused, and where its boundaries are, but the contrast ratio between them is less than 3:1.
We’re all done here—how did you do?
Have you been keeping tabs on how many you got right/wrong? Perhaps you think you got them all right but what we went for here was different? And if that’s the case, we invite you to express your disagreements down there in the comments section. But whatever you do, try to keep the colorful language down; that is a Use of Color that will not pass (comment moderation).
The post Well Color Us Surprised—This SC Can Be a Tricky Customer appeared first on TPGi.
This content originally appeared on TPGi and was authored by Ian Lloyd
Ian Lloyd | Sciencx (2022-04-13T11:04:30+00:00) Well Color Us Surprised—This SC Can Be a Tricky Customer. Retrieved from https://www.scien.cx/2022/04/13/well-color-us-surprised-this-sc-can-be-a-tricky-customer/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.