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

When I Get That Low Contrast Feeling, I Need Non-Textual Healing
Article Category
When I Get That Low Contrast Feeling, I Need Non-Textual Healing
Ian Lloyd | April 2, 2023 | Development
Share:
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 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?
Yes please, let’s go all in
No thanks, I’m sure this is quite enough fun for me already
All the Dubiously Named Tests
Test 20: It’s Default of da Browser
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?
I am a button
I am also a button
I am another button
Does this pass or fail 1.4.11 Non Text Contrast?
❌ It fails 1.4.11
Grayscale Test 1
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.
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!
I am a button
Grayscale Test 2
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!
I am a button
Does this pass or fail 1.4.11 Non Text Contrast?
✅ It passes 1.4.11
Grayscale Test 3
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?
I am a button
Does this pass or fail 1.4.11 Non Text Contrast?
✅ It passes 1.4.11
Grayscale Test 4
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?
I am a button
Does this pass or fail 1.4.11 Non Text Contrast?
✅ It passes 1.4.11
Grayscale Test 5
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.
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.
I am a button
Does this pass or fail 1.4.11 Non Text Contrast?
✅ It passes 1.4.11
Grayscale Test 6
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 helps.
A visual comparison of Test 5 vs Test 6 when all color is removed
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?
I am a button
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.
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?
I am a button
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.
I am a button
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!
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 gear and try some inverted schemes. Same rules apply, so apply them here and decide: does this fail 1.4.11?
I am a button
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
Grayscale Test 15
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 have your yellow stars if you must but we’ve learned from test 15 that these won’t pass the 3:1 contrast ration threshold. Unless …
Does this pass or fail 1.4.11 Non Text Contrast?
✅ It passes 1.4.11
Grayscale Test 17
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