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 …
All the Dubiously Named Tests
- Test 1: Inline Links Are Out of Line
- Test 2: It’s All in Your Header
- Test 3: How Could You Be So Bold?
- Test 4: 2 Bold, 2 Furious
- Test 5: The Indications Are Good
- Test 6: Give Us a Clue
- Test 7: Cool, 2 Actions
- Test 8: Such a Card
- Test 9: Links. Lots of Links
- Test 10: More of the Same. Almost
- Test 11: Expect the UnUXpected
- Test 12: You Said You Wanted Underlines
- Test 13: Ooh, Look at Me
- Test 14: The “Isn’t This the Same as Test 1?” Test
- Test 15: The “Come on, You’re Just Repeating Things Now” Test
- Test 16: One of These Things Is Not Like the Other
- Test 17: What Becomes of the Faux Inverted?
- Test 18: Risky Bisque-ness
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?
- 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?
- 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?
- 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?
- 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?
- 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?
- 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?
- 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?
- 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?
- 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?
- 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?
- 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?
- 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?
- 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?
- 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?
- 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..
So, at the point of originally writing this post, Technique G183 did not get you off the hook here. But as it takes me an age to complete articles, in between when I wrote the post and published it, the goalposts had moved. And they had moved in favor of this now being a pass (regardless of what was noted above re touch screens). This was originally indicated as ‘fails (and for very specific and questionable reasons)’. But now it is a ‘passes (for the same very specific and questionable reasons)’.
As Patrick says in the comments below: the note that clarifies that a contrast difference of 3:1 and over counts both as a difference in color (hue) and lightness (a separate visual cue) is now part of the main understanding document for 1.4.1 – see https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html. The extra underline stuff from technique G183 is not necessary, but rather best practice. So if there *is* a contrast difference of 3:1 or over, it counts as *not* color alone. 15 is a pass.
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?
- 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?
- 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. It does, however, have a good contrast as a result (14.81:1 against its background, if you’re interested, which would also mean the same contrast between the black text of the active button and the light green text of the inactive ones).
- The button background is inverted, giving a contrast between the inactive and active buttons of 2.8:1. While these two colors don’t have great contrast, the higher contrast of the text means that the background colors are not really a factor here
- Note that while this does not fail 1.4.1, it does fail SC 1.4.11 Non-text Contrast because the difference between the gray and lightgreen buttons signifies whether the button is active, and where its boundaries are, but the contrast ratio between them is less than 3:1.
- Note also that the inactive buttons fail SC 1.4.3 Contrast (Minimum)
Test 18: Risky Bisque-ness
Last one to look at. Well, I say “look at”, but really you’ll need to do more than look at this one. As in: try out those buttons with your keyboard TAB key. Is it a pass or fail?
Is this a failure of 1.4.1 Use of Color?
- When one of these buttons has focus, the color changes from ‘cornsilk’ to ‘bisque’
- The color contrast between these two wonderfully bland colors is an equally unremarkable 1.15:1 ratio
- The ONLY change here that indicates focus is the background color change, but it fails because of the low contrast.
- Had the color difference been more than 3:1 (for example going from ‘cornsilk‘ to ‘mediumpurple‘), then it would have been a pass
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).
If you enjoyed this article/quiz, there’s another for you to try out, this time covering a very similar topic (1.4.11 Non-text Contrast). Try your luck over at When I Get That Low Contrast Feeling, I Need Non-Textual Healing
Comments
In Test 14, 15, etc. I’m not finding any difference in the link and paragraph colors, they’re all rgb(0, 0, 139) and #333333 which have 1.21:1 contrast.
“`
.tests a, .tests a * {
color: darkblue; // rgb(0, 0, 139)
}
“`
“`
html, body {
color: var(–palette-dark); // –palette-dark: #333333;
}
“`
Ah, I think I brute forced a rule in to correct something that I spotted as a result of some WordPress wierdness and didn’t realise I’d broken that one later. I’ll get on to that. Thanks!
“In Test 14, 15, etc. I’m not finding any difference in the link and paragraph colors, they’re all rgb(0, 0, 139) and #333333 which have 1.21:1 contrast.”
Thanks Curtis, WordPress gremlins to blame. I have backups, though, so was able to pull the original class names (that in NO WAY GIVES AWAY THE GAME) that seemed to have been stripped somehow. Thanks for spotting that!
For test 15 though, note that the note (hah) that clarifies that a contrast difference of 3:1 and over counts both as a difference in color (hue) and lightness (a separate visual cue) is now part of the main understanding document for 1.4.1 – see https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html. The extra underline stuff from technique G183 is not necessary, but rather best practice. So if there *is* a contrast difference of 3:1 or over, it counts as *not* color alone. 15 is a pass.
Based on your reasoning, an unstyled paragraph with links (appearing as underlined) and non-linked text that is underlined for emphasis would result in a failure. I think that if the text adjacent to links is all underlined then there isn’t enough information to tell where the link may be and an additional mechanism to communicate the information is needed, but I don’t think that other text happening to be underlined in the same paragraph would trigger a failure. So, I don’t agree with #4
Related: see https://github.com/w3c/wcag/issues/2269 and https://github.com/w3c/wcag/issues/2310
R.e. Test 15
Plus le text colour in the example is #333333 (and not “black”) and link colour #3333ff, so that’s a contrast ratio of 1.8
https://contrast-triangle.com/?linkColor=%233333ff&textColor=%23333333&underlines=false
“R.e. Test 15
Plus le text colour in the example is #333333 (and not “black”) and link colour #3333ff, so that’s a contrast ratio of 1.8″
Ah, you have uncovered another issue where it has changed since porting my standalone version into WordPress. The text color changed from my original black as it has inherited the blog styles not present in my original version. I will go back in and force that back to black. Thanks for spotting. UPDATE: it’s now black so the contrast ratios should be correct again.
“Based on your reasoning, an unstyled paragraph with links (appearing as underlined) and non-linked text that is underlined for emphasis would result in a failure.”
So instead of the bold in this example, we’re using a different style (underline) that applies to both links and non links. OK, gotcha. But are the links in your example a different color to the non-links that are underlined? If so, I would say that is a failure too because if you were to grayscale it (to simplify matters), you would have plain paragraph text and inside that paragraph you’d have a bunch of underlined phrases with no way of knowing which is a link and which is a misguided choice of emphasis. Only the color differentiates the two, so there is use of color *alone* to tell which is which.
You could pick out that there are some ‘special’ phrases in that paragraph, but you’d not know what each one is/does.
The issue about having adjacent text elements with identical styling (aside from color) but which differs from the surrounding body text was present in an earlier draft but I removed some of the wording in the result/description text because I felt this was geting too much into the fine details. However, note that I left an example of two bold (but different) phrases in the example – last paragraph: “Harum quaerat reprehenderit modi”. I also knew that there would be comments 😉
“note that the note (hah) that clarifies that a contrast difference of 3:1 and over counts both as a difference in color (hue) and lightness (a separate visual cue) is now part of the main understanding document for 1.4.1 ”
Heh, typical. I originally drafted this late last year but various other things got in the way since that which prevented me from completing it, And then ..
“patrickhlauke opened this issue 26 days ago · 7 comments”
Dangit, Patrick! 😀 So those goalposts had moved silently (to me) in the background. OK … will have to re-jig then, I guess. So we’re back in the realms of Test 14 being a failure and Test 15 being a pass, by a gnat’s whisker, then?
I’m also interested to know if people have examples of situations that have been contentious where 1.4.1 Use of Color was suggested as a failure but there were differences of opinions (that has not been covered in the examples above).
Does it really matter if it fails the SC or not? If a user has a problem with it, fix it. While an exact SC might be helpful when filling out a VPAT/ACR, deciding whether to report a bug because of a nuance shouldn’t matter. Go ahead and report the issue.
Fun article, but there are some problems. There’s not enough room here to comment but I outlined in a google doc, why your results for Tests 9, 11 and 12 are disputable, and why Tests 15 and 17, from the perspective ONLY of Use of Color, should pass. I turned on commenting 🙂 https://docs.google.com/document/d/1aGrm7fc6J_ISga3HdH9agA0YTgP1ediv7pXflhJespE/edit?usp=sharing
Several of the test passes rely on the position / layout of the links relative to other content.
Does this hold when a person uses magnification and the surrounding content / layout is not visible at the same time? Or when the browser text size is increased such that responsive breakpoints kick in and the position / layout changes?
“Several of the test passes rely on the position / layout of the links relative to other content.”
Indeed, and I understand that while creating these simple examples, they do not have the context but hopefully the explanation for them indicating where they might appear (in a header, footer etc) would provide that context.
“Does this hold when a person uses magnification and the surrounding content / layout is not visible at the same time? Or when the browser text size is increased such that responsive breakpoints kick in and the position / layout changes?”
Tricky, I shall throw in a “It Depends” at this point. So the footer links that are clearly identifiable as such in context of a desktop view may not be when viewed in mobile viewport. If that were the case, then I would possibly raise a 1.4.1 against it, but would of course caveat that it only occurs in that breakpoint. I don’t think I would/could do the same if I was seeing the component in question in isolation due to zoom. I would still have some context in the sense that I would have had to navigate/scroll to it and so hopefully it would be clear from what was seen (zoomed) prior to that. Nothing to stop someone raising the issue as a best practice on that front.
“Does it really matter if it fails the SC or not? If a user has a problem with it, fix it.”
From the point of view o site owner, I wholeheartedly agree. If something sucks but it does not fail a specific SC, it still sucks. It should still be addressed. We see MANY examples of generally poor UX every day while doing audits where we would advise that the client fixes it, but if there is no SC that it applies to, all we can do is raise it as a best practice issue and let the wording on that best practice convey the importance of fixing it.
Hey Mike. Re “here’s not enough room here to comment but I outlined in a google doc” … I will come back to this soon as I can after holiday weekend, just acknowledging the commment for now 👍.
Hello Ian,
Thank you for this wonderful article! This demystifies the 1.4.1 checkpoint failure conditions. One question, how do people who use screen reader evaluate this checkpoint? Is there a guide or blog article on this topic?
Aditya, I am not aware of any guide on how a screen reader user might evaluate this one but my response is that it would not be easy. After all, this is very much a case of seeing the elements in context of the page, not just a case of checking the color and other attributes to see how they compare with adjacent/nearby elements. Of course, I am making an assumption that when you refer to a screen reader user you are thinking of how a blind user might evaluate this, but of course some users may have low vision and use the screen reader as an additional aid. For those users, it may be possible to ascertain visually what is different but it’s likely that this will be more difficult (again, another assumption on my part: the screen is probably zoomed which makes it more difficult to get context).
You might find this article useful that we published last year: Accessibility testing as a screen reader user.
While this focused on links, there’s another use of colour I came across in a previous job: field level error messages. If there was an error in a field, we turned the border of the input red and put a red message under the field describing the error (e.g. “This is a required field”). Our QA deemed this to be a 1.4.1 failure since there wasn’t anything besides the red to say “this is an error”. We had the choice of pre-pending all messages with “Error: ” or adding an icon to pass it.
That does not seem like a 1.4.1 failure to me. If it had JUST been a change of border color, I’d fail it. But you have a new error message appearing that describes the error. At this point it doesn’t matter if you prefix it with ERROR: or an icon (although that certainly helps to make the point that there’s an error), because it is not a change of color *alone* that has indicated the field is in error.