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

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?

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…

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.

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.

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 bit helps.

• 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.

• 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.

• 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.

• 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.

• 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.

• 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.

Grayscale Test 16

• 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.

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).

Grayscale Test 18

• “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.