When I Get That Low Contrast Feeling, I Need Non-Textual Healing

Does it fail 1.4.11 Non-text Contrast?

About a year ago, I published an article here (Well Color Us Surprised—This SC Can Be a Tricky Customer) that began with this opening statement:

If there is one topic that causes a lot of debate among our accessibility engineers here at TPGi, it’s the Success Criterion (SC) 1.4.1 Use of Color. On the face of it, it seems like a simple one.

Looking back, I feel like that should have been ‘If there are two topics that cause…’. Because while SC 1.4.1 Use of Color is, indeed, a tricky one to get your head around, we often spend a lot of time deliberating over SC 1.4.11 Non-text Contrast, and in many cases find ourselves thinking “Well, this issue could be either of these, or maybe both!”

It’s been a little while coming, but I had intended to write this as a follow-up (or rather a companion piece) to the Use of Color article ever since the proverbial ink dried on that one. And once again, I’ve decided that ‘dry and dull’ is not the order of the day, so let’s roll up another quiz format and set you all loose on these examples.

Note that where examples have colors in them, I have provided a handy grayscale button that will remove all colors from that test, giving you a way of better appreciating how these examples might be perceived for people with low vision or color blindness.

Also worth mentioning: the question “Does it fail 1.4.11?” is based on what you see in each example’s default state. If there is a change in style, color, whatever when the element receives focus, does that change your thinking on anything or lead you to fail it for a different SC?

As before, a quick check to see if you want to go all in on the quiz format:

Would you like sound effects to accompany your choices?

All the Dubiously Named Tests

Test 1: I’m blue, Da ba dee da ba di

Let’s start with what I think is a fairly easy one. A group of dark blue buttons, what could possibly be wrong?

Does this pass or fail 1.4.11 Non Text Contrast?
It fails 1.4.11

  • The default button style has good contrast against the white background. But what about focus?
  • The border style changes from a solid black outline to a dashed black outline – all of it in a barely perceptible 1px width.
  • The reason it fails 1.4.11 is not because of the barely perceptible change of border color from default to focus, but because a custom focus indicator has been provided that has low contrast against the button background. If this dashed border were changed from black to, say, bright yellow, that would offer good contrast on focus and would pass.
  • This also fails SC 1.4.1 Use of Color, as the only differentiator on focus is the border color change (from black to blue, partially, and with a contrast ratio of under 3:1).
  • Also, as much as this is a terrible, TERRIBLE focus indicator (and admit it, you had to zoom right in to check it, didn’t you?), it is not a failure of SC 2.4.7 Focus Visible (Level AA) either. Yes, you’d love to fail it for that too, but alas you cannot.
Close-up view of that poor border focus style

Test 2: Electric Bluegaloo

A slight remix of the first test. What’s changed? Well, I’m not giving you the answer yet, you need to try for yourself. Cheaters never prosper!

Does this pass or fail 1.4.11 Non Text Contrast?
It passes 1.4.11

  • Yay, nothing wrong here! Well, almost nothing.
  • Making that very subtle change of moving the dashed black focus indicator outside of the button makes a slight difference when the buttons receive keyboard focus: slight enough to eek out a 1.4.11 pass.
  • The dashed black outline contrasts with the white page background at 21:0 ratio.
  • It could still be better, though. For example, a slight offset of the outline, a thicker outline, all that jazz. And of course, this focus indicator is only any good because it’s against a white background. If the same buttons were against a dark background, you’re probably metaphorically, and literally, in the brown stuff.
  • So, technically it’s a pass of 1.4.11 (and also 1.4.1, 2.4.7) but remember that WCAG conformance is just the start. We can do better, right?

Test 3: Offsetting Makes You Feel Good

If you do some bad things—and you realise they’re bad—but you do some good things to counteract those things and hopefully make amends, does that really solve the problem? Carbon offsetting? That’s debatable. CSS outline offsetting? Now we’re cooking!

Does this pass or fail 1.4.11 Non Text Contrast?
It passes 1.4.11

  • Well, would you look at that. In the previous example I suggested off-setting the outline would help to make this focus indicator more obvious and, as if by magic, here it is!
  • We have a focus indicator of black against white, giving us 21:1 contrast ratio, but this time it’s much clearer to see as it’s not all squished up tightly against the outside of the button. Bingo, bango, bongo!
  • It’s still a bit on the thin side, though…

Test 4: Chonk if You Love Cheeses

In which I change the button color to yellow for the sole purpose of being able to insert a pun/rhyme … and maybe giving away a clue to what’s happening in this next test. Will it pass the sniff test?

Does this pass or fail 1.4.11 Non Text Contrast?
It passes 1.4.11

  • You know, it’s almost as if these test cases were hand-crafted to make a point, eh? More proof – the focus indicator is now CHUNKY. No dashes, just full-on chunkiness.
  • As noted with test 2, this is all well and good against the white page background, but would be terrible against a very dark background.
  • Top tip: Combine a dark outline effect and a light box-shadow effect (with blur removed) so that whatever background the element is against, you are guaranteed to have a good contrast.

Test 5: If I Really Focus, I See Red

Let’s inject a little more color in here now to make things more interesting, or as interesting as I can make these buttons. I suck at design; this is as good as it gets. The interesting part is how color relates to contrast and, as we shall see in further tests, can overlap with another SC, 1.4.1 Use of Color. So, the same question as before, does this one fail 1.4.11 Non Text Contrast and, if so, why?

Does this pass or fail 1.4.11 Non Text Contrast?
It passes 1.4.11

  • We’re back on track with some more tricky cases. Those last few? You had it too easy!
  • This does NOT fail 1.4.11 because the default border color has a contrast ratio that is over 3:1.
  • But there’s another issue here that needs calling out and is often confused with 1.4.11. Try focusing on a button. Note that the only thing that changes on focus is the outline color (from green to red, a low contrast of 1.2:1 between the colors). That’s a SC 1.4.1 Use of Color (Level A) failure right there.
Contrast between non-focused and focused is a low 1.2:1

Test 6: Witness the Thickness

Another “I have given it away with the heading while striving for something catchy” moment. This one is very similar to Test 5, but with one thick, I mean big, difference.

Does this pass or fail 1.4.11 Non Text Contrast?
It passes 1.4.11

  • OK, so let’s check the stats: The green border against white has a 5.04:1 contrast, and the red border against white has a 4.2:1 ratio, so they both meet the 3:1 ratio required with the background for a 1.4.11 pass.
  • Like the previous example, the green and red border colors have poor contrast with each other but there’s a key difference this time – the thickness.
  • The focused border is much thicker, so even if you can barely differentiate the colors, the size tells you what’s what (no 1.4.1 Use of Color failure).
  • So this wasn’t a 1.4.11 failure in Test 5, and nor is it in this test, but changing the shape in this test made sure it also passed 1.4.1 Use of Color. Every little bit helps.
A visual comparison of Test 5 vs Test 6 when all color is removed
The button in focus has only a slight color contrast with non-focused and is very difficult to ascertain when grayscaled
The focused button has a much thicker border and can easily be differentiated due to its size

Test 7: This Is a Little Gray Ting

Bye bye color. That’s quite enough of your extravagance. Let’s stick to boring monotone for bit, shall we? We can’t have things being too spicy here; this audience is academic, I tell you. They have no desire for show-offs.

What do you make of this rather dull collection of buttons, then? Do they fail 1.4.11?

Does this pass or fail 1.4.11 Non Text Contrast?
It passes 1.4.11
  • If you have your color contrast analyser of choice at the ready, you might have measured the border of the unfocused buttons as 2.85:1. “Well, that’s under 3:1, so it’s a failure of Non-Text Contrast, right? So what’s with the green tick here?”
  • While the border of this control is lower than 3:1, the text content inside passes SC 1.4.3 Contrast (Minimum), and that means it does not fail 1.4.11.
  • The lack of a high contrast border is made up for by the high contrast text inside. Live and learn, eh?
  • While we’re here, does it fail on SC 1.4.1 Use of Color (Level A)? Nope, because while the focus style ONLY has a change in border color, the contrast between unfocused (#999) and focused (#333) is 4.43:1, over the required 3:1 threshold for that success criterion. Still, it’s pretty hard to tell which button has focus, so while technically a pass, you know you can do better than this.
Border color is under 3:1 threshold but the text content is a rather more comfortable 21:1 contrast

Test 8: Gray Textpectations

Can you see any difference between this and the previous test? Look closely, fire up a color picker tool to help you along the way. Trust me, it is different, but how?

Does this pass or fail 1.4.11 Non Text Contrast?
It passes 1.4.11
  • It’s basically the same as Test 7, but with one difference: the default border color is slightly darker. So it passes 1.4.11, which is what this article is all (or mainly) about. A darker border must be a good thing, right? Well …
  • This test is also remarkably similar to Test 5 (where we had a default green border and, when receiving focus, a red border) … if you were to remove the color from Test 5.
  • By making the default border color darker in this test, we’ve actually introduced a new issue. How? The default border color has changed (#333), but the focus border color is the same as the previous test (#666). The contrast between these two colors is just 2.2:1, which means we have a 1.4.1 Use of Color failure. The color change (really, it’s a change of hue) is the only change on focus and it falls under the 3:1 threshold. Booooo!
  • And that’s the reason why it’s also like Test 5 – with 1.4.1 Use of Color we’re interested in how the color change (or the shade of gray change) affects the hue contrast.
Oops. By increasing the border color, we added a 1.4.1 failure

Test 9: Gray Doubt

You don’t need palettes and palettes of colors to design a cool interface. All you need is some light gray text over a light background and you, too, can be a cool, trendy designer type. Or at least, I think that’s how it works. Take these buttons, for example. They reek of designer privilege. I think I might also have given a hint about whether this one fails. Go on then, click the thing.

Does this pass or fail 1.4.11 Non Text Contrast?
It fails 1.4.11
  • A definite failure here, and with no 1.4.3 pass to get you off the hook.
  • The border color (#999) against the white background has a 2.85:1 contrast ratio, under the required 3:1 level.
  • The text content (#888) has a contrast of 3.54:1 against the white background, so it fails SC 1.4.3 Contrast (Minimum).
  • It’s a double-whammy!
Border color fails 1.4.11, Text color fails 1.4.3

Test 10: I Don’t Mean to Be Negative But…

Whoa, who switched on dark mode? Up until now, all the buttons have been against completely white backgrounds, so it’s about time we shift gears and try some inverted schemes. Same rules apply, so apply them here and decide: does this fail 1.4.11?

Does this pass or fail 1.4.11 Non Text Contrast?
It passes 1.4.11
  • This is essentially the same as Test 7 which had a light border but dark text inside that easily passed the 4.5:1 ratio, but with the color scheme flipped.
  • The default border color is quite dark, and has contrast ratio of 1.49:1 against the black background.
  • The text content is white, against the (almost completely) black background, offering a mighty 18.88:1 contrast ratio. It passes SC 1.4.3 Contrast (Minimum), so it also passes SC 1.4.11 Non-text Contrast.
  • In another stroke of luck (or design), the difference between the default border (#333) and the focus border color (#999) offers a contrast ratio of 4.43:1, comfortably over the 3:1 ratio needed to pass SC 1.4.1 Use of Color.

Test 11: These Buttons Are Giving Me Pause for Thought

What we’re looking at here is a collection of controls against a dark background which, this time, have no high contrast text inside that might provide a cheeky little pass (through 1.4.3 conformance). This time it’s all down to the graphics. So (drum roll) … is this going to be a symbolic win for 1.4.11?

Does this pass or fail 1.4.11 Non Text Contrast?
It passes 1.4.11
  • As with the buttons with text inside, don’t get too hung up about the border color having a low contrast ratio (1.26:1, in case you were wondering). What’s happening with the symbols inside?.
  • The actual control graphic—the stop, play, or record symbol—is white against either a completely black background inside the button (21:1 contrast ratio) or if you compare to the background outside the button boundary it’s a 15.91:1 contrast ratio. Whatever you measure it against, the symbols are easy to perceive.

Test 12: Shifty Shades of Gray

I’ve already made the case that I am not a designer. These boring old buttons add more fuel to that argument. No wait, there’s no argument at all. But do these buttons pass or fail 1.4.11? Or anything else (apart from the ‘do these buttons look pig-ugly’ test)?

Does this pass or fail 1.4.11 Non Text Contrast?
It passes 1.4.11
  • This is where it can get a bit contentious. What, specifically, are you measuring here for contrast?
    • The button border color against the background? That would fail at 1.26:1.
    • The graphic (square, triangle, circle) against the page background? That would just fail at 2.77:1.
    • Or the graphic against the button background?
  • In this case, I would pass it on the basis that the key part of the control—which is the symbol that denotes what action the button will do—is a medium/light gray against a black button background, and the background has enough padding/space around the symbol for it to provide the contrast, which is 3.66:1.
  • Would you pass it on that basis? Or do you think this is a bad call? Over to the comments section you go!
  • A quick mention of 1.4.1 Use of Color – it passes that too, as the unfocused and focused state border colors have a comfortable 4.43:1 contrast ratio.

Test 13: It’s What’s Inside That Counts

I would be the worst pub quiz host ever. I’d be like “Welcome to the Spice Girls round where we’ll be asking pop music questions from the 90s … First question: which band’s debut single was called ‘Wannabe’?” Or, in other words, there’s a BIG FAT CLUE in this test’s title. Again. So, you know the drill … does it pass 1.4.11?

Does this pass or fail 1.4.11 Non Text Contrast?
It fails 1.4.11
  • Well, there’s a nice contrast on the button border—like 21:1, highest you can get—so why isn’t this a pass?
  • While the border has good contrast, you need to remember that it’s what that button will do that is most important, not necessarily what the shape of it is. You can clearly see a circular shape, but can you clearly see what the buttons do?
  • Each button graphic (#666) sits on a button background (#222) that provides a contrast ratio of just 2.77:1. Therefore low vision users will likely only be able to tell that you have a collection of buttons that have a nice clear border but heck knows what’s inside each one.

Test 14: Testing the Boundaries

This is the last in our collection of transport controls. Not the kind of transport controls like, for example, stopping vehicles crossing a border. But clearly there is a border control issue with this example. As in, there is no border whatsoever. Surely this can’t be a good thing? This must indicate a failure in the system somewhere. Or does it …

Does this pass or fail 1.4.11 Non Text Contrast?
It passes 1.4.11
  • This is almost exactly the same as Test 11, in that what we really care about is whether the graphic part (stop, play, record) has good contrast.
  • The border color? Well, there is no border here. The button background (#000) has very low contrast with the page background (#222) of just 1.32:1. But the button boundary is not really the issue here.
  • The graphic (#fff) has the highest possible contrast against the button background (#000) of 21:1, and a very high contrast (15.91:1) if measured against the page background. However you measure it, these icons are clear to see.
  • The lack of the border does mean that it may not be clear where the boundaries are, but the graphic elements are a decent size, and there is margin space between the buttons so even if you cannot see the button boundaries clearly, there is little chance you might accidentally trigger an incorrect adjacent control on a touch screen, for example. Now, had these controls had minimal space between, like a single pixel, and there was little padding in the control, the chances for error would be much greater and the lack of a clear boundary could be a real issue for someone to be know where to click.

Test 15: Starry, Starry Light

I think we’ve all encountered this sort of thing before: the old star rating for a product. If there’s one thing we know about stars it’s that they are very, very bright objects that you cannot possibly see against a light background, and yet this seems to be something that many web designers fight against. If you get this one wrong, I might just explode like a supernova.

Does this pass or fail 1.4.11 Non Text Contrast?
It fails 1.4.11

  • Of course it fails. That one was waaaaay too easy. Light yellow against white? That’s a measly 1.3:1 contrast ratio.
  • Oh, and it also fails 1.4.1 Use of Color, as the contrast between the filled/unfilled stars is under 3:1 contrast ratio and there is no other way of deriving this information.

Test 16: Star, That’s What They Call You

Same shape, different hue: but is it enough to make the example below pass? Orange is a notoriously tricky color to work against light backgrounds, as many an organisation that has orange as a corporate color has found after an accessibility audit. But we’re veering just beyond orange and into ‘rust’ territory.

Does this pass or fail 1.4.11 Non Text Contrast?
It passes 1.4.11

  • A comfortable 4.08:1 color contrast means it has no trouble with passing Non-Text Contrast.
  • It also passes 1.4.1 Use of color because the two star types are easily discernible.

Test 17: Different Strokes for Different Folks

“But I really need to have yellow stars! Who has orange stars, after all?”

OK, fine, you can have your yellow stars if you must but we’ve learned from test 15 that these won’t pass the 3:1 contrast ratio threshold. Unless …

Does this pass or fail 1.4.11 Non Text Contrast?
It passes 1.4.11

  • By providing a black outline on the stars, the star shape can clearly be seen against the white background. That’s a whopping 21:1 contrast ratio.
  • There is still a 1.4.1 Use of Color failure though (as the low contrast of the filled to unfilled stars means that some people will just see a row of 5 identical stars).

Test 18: I Can’t See Clearly Now the Line Has Gone

We appear to have taken a step back here. “Isn’t this exactly the same as test 15?” I hear you say. Well, it’s almost the same. The images are exactly the same but there’s been something added. How does that affect things?

3 out of 5 stars
Does this pass or fail 1.4.11 Non Text Contrast?
It fails 1.4.11. No wait … It passes 1.4.11

  • “As with test 15, this fails 1.4.11 due to the poor contrast,” is what I originally wrote before being alerted to an error on this test.
  • The addition of the text “3 out of 5 stars” does mean that even if the stars cannot be perceived by some people, there is an alternative that is clear to read (passes SC 1.4.3 Contrast (Minimum) and can be scaled because it’s real text (so no SC 1.4.5 Images of Text failure, either).
  • It passes 1.4.1 Use of Color because color is no longer the only mechanism that indicates what the rating is.
  • The main reason why this does not fail 1.4.11 is because the presence of that text means that this image is no longer “Required for Understanding”. As the Understanding SC 1.4.11 Non-text Contrast explains it (edited down to the significant parts): “If a person needs to perceive a graphic … in order to understand the content it should have sufficient contrast. However, that is not a requirement when: … The information is available in another form”.
  • A case of ‘Textual Healing’, if you will.

Test 19: Living in a Box

Content that is organised on a page in handy little boxes sure helps to visually group related items, whatever might be inside those boxes. But what if those boxes have low contrast borders, like the example below. Would you fail it?

Here are some things

You might need to do one of the following:

You may also need to do this:

Does this pass or fail 1.4.11 Non Text Contrast?
It passes 1.4.11

  • A classic case of this being a usability issue for all rather than an accessibility issue that fails any specific WCAG success criterion.
  • The box outline has a low contrast of 1:9 against the white background. If someone had difficulty perceiving that border, would it really be a problem? You can see for youself by pressing the ‘Remove the border’ button above.
  • Note that this does not affect the layout/grouping – there’s just a little more space around the sections if you cannot perceive the border, and spacing is in itself a mechanism for visually indicating how items relate to each other.
  • From Understanding SC 1.4.11 Non-text Contrast (and with emphasis added on the elements that this does apply to): “The intent of this Success Criterion is to ensure that active user interface components (i.e., controls) and meaningful graphics are distinguishable by people with moderately low vision.”

Test 20: It’s Default of da Browser

What if you were just to do nothing? Nothing at all. No styles on your buttons, form inputs and what have you. Would a form input fail 1.4.11? Or anything else?

For this example we need to embed a Codepen (otherwise the form inputs will just inherit all the styles that are defined on this site).

See the Pen Example of form with no styling (for TPGi article) by TPGi (@TPG)on CodePen.

Does this pass or fail 1.4.11 Non Text Contrast?
It passes 1.4.11
  • The default border of the inputs above might be fine in your browser. Or they might be awful (sorry, Apple, but the text inputs in Safari/macOS are an absolute horror show!). But if these are the browser defaults, they cannot fail 1.4.11, no matter how bad they are.
    Default border style for Safari inputs is very difficult to see.
    What the heck is this? I can barely see it even if I zoom in! Very low contrast borders on Safari/macOS
  • If you were to apply a custom style for the border and it’s under the 3:1 contrast ratio, then you will have failed 1.4.11 (ironically, even if you actually improved the default slightly—I’m looking at you again, Safari—you will notch up a failure).
  • Similarly, if you don’t apply a custom focus style to elements and you leave it up to the browser default even if it’s a really poor style, it can’t fail SC 2.4.7 Focus Visible.
  • It’s worth noting that default focus styles vary A LOT across browsers. To drum that in even further, macOS users are able to set custom colors in System Settings which are then adopted by some browsers. The image below shows three example colors (red, yellow, green) and how that renders as a focus style in Safari. Oh … and now double that because the user could have light mode or dark mode set!
    Red, yellow and green accent colors in macOS result in inputs with borders that have contrast ratios of 2.4:1, 1.33:1 and 1.78:1, respectively

  • And here’s how three Mac browsers (Edge, Firefox and Safari) render the focus outline with the user having set a green accent color:
    Comparison of three browsers’ inputs showing the default focus style and the unfocused default

  • If you really want to be sure you are meeting the required color contrast ratios there’s only one thing for it: take back control of your borders!

We’re all done here—how did you do?

You’ve been keeping scores, right? Right? OK, maybe not—there was a lot to get through there. Hopefully you found it educational and also got through the terrible puns and questionable humor unscathed.

Did anything really surprise you? Or did you find any of the examples to upset you enough in your disagreement that you feel like writing a strongly-worded missive to the author? If that is the case, just scroll down a short way and let us know in the comments.

Until the next time that we use this format on another particularly tricky success criterion (any suggestions?), enjoy the rest of your day, or what little there is left after this mammoth-sized post!

Categories: Development
Tags: , ,

About Ian Lloyd

Ian Lloyd (or 'Lloydi' as he prefers) is a Senior Accessibility Engineer at TPGi. He joined the company in 2020 and previously worked for Apple as an accessibility engineer. Prior to that, he spent what seems like a lifetime working for a financial services company, trying to promote accessibility with varying levels of success. In an alternate universe, he continued his early path of DJ-ing and producing to become a superstar DJ, but this universe had other ideas. Outside of work, he maintains a11y-tools ("A random collection of accessibility-focused tools that you might find at least partially useful").


Chris Lilley says:

Please do a follow-up that shows best practices, to contrast against “these are mostly awful, some technically pass”.

Ian Lloyd says:

Thanks for the prompt, Chris. The intention here was to provide examples that often trip us up in audits, causing mis-attribution to one or another SC and to explain the reasons why. But you’re right, an antidote to this providing some examples of how to do it right would be good. I allude to one example in here of using multiple box shadows to crete a focus indicator that will work against all backgrounds, and an article that has best practices would be a good place to demonstrate that.

Cliff Smith says:

Why is there a hidden button in Test 20 with the text “Skip results iframe”

Ian Lloyd says:

This looks to be something that CodePen adds in (which I have no control over). It is definitely not part of the test/examples.

Danielle Favreau says:

Is it ironic that the form fields on this entry are such low contrast that, emulating low contrast vision (Chrome rendering tools), they are invisible? The B9 border against the FFF is 1.96:1, the lighter grey inside is only 1.07:1 against the white background or 1.83:1 against the border. While I can see them, I don’t have low vision, but someone who does may have issues finding the fields.

Ian Lloyd says:

You’re not wrong, Danielle. I will pass this on to the site devs (this is not under my control as a mere author, but I know the right people to poke in the ribs to get it addressed).