In Plain Sight: Text, Contrast, and Accessibility

This is the first post in a series on accessibility from Shopify UX’s team. We’re publishing posts every two weeks. You can check out the introduction here.

Contrast is one of the basic elements of graphic design. It lets us tell things apart. Yet in UI design, at least for the web, there is a perpetual temptation to skimp. Things tend towards gray-on-gray.

Especially when it comes to text, having enough contrast is essential. This isn’t just an aesthetic matter. We want everyone to be able to comfortably read the text on our sites and apps. It’s also worth remembering the world isn’t divided into those with perfect vision and those with disabilities. Eyesight differs across a wide range among the general population. Many of us wear glasses, and everyone’s vision worsens as we age. (That reminds me: I probably need a new prescription.)

Now that I’ve reminded you it’s important, what is contrast, exactly? Essentially, it’s the perceived difference between two colors. Mind blown, right? Okay, bear with me, because there are several aspects of color that contribute to this perception. The main one is the difference in lightness (also known as luminance) between those colors. In addition to luminance, other aspects of color also make a difference to contrast. Keep this in mind, as I’ll explore this in greater detail later.

Practically then, how do we ensure our text has enough contrast on screens? It might seem simple: use dark enough text. End of story. But that’s only true if contrast is our only consideration: there are cases where other solid, usability-based concerns conflict with ideal contrast requirements. Getting text contrast right is harder than it seems. The good news is that a few simple rules of thumb can take us a long way. When we run into more complex scenarios, a deeper understanding of the issues can help point us in the right direction.

A lower limit on contrast

We don’t have to rely on guesswork to know how much contrast to use. The W3C publishes the Web Content Accessibility Guidelines (WCAG), which offer formal and precise criteria for contrast requirements. Among other rules, WCAG says that text should have at least a 4.5:1 luminance ratio with its background. To make it easier to check colors as we work, there are many web-based tools for checking color combinations against WCAG requirements. I like Lea Verou’s because it supports HSLA, but find one you like and bookmark it.

Having a contrast tool is important, but since the vast majority of interface text is dark-on-light, we can use a simpler rule to save time. Something we can memorize:

Don’t go lighter than 45% black against white.

You can play with an example here. This color — or something a little darker — serves well for subdued or secondary text. It should be the least contrasty text for general use in an interface.

Of course, there are a few exceptions where less contrast is OK. WCAG gives an exemption for disabled elements, such as labels on disabled buttons. (There are a few other nuances to the standard, including for large text, so it’s worth reading the guidelines for all the details.)

Placeholder text in text input fields is another exception, although not mentioned in WCAG. There are more complex usability issues around this design pattern, but here I’ll just focus on text contrast. The challenge comes down to this: if placeholder text passes contrast requirements, it starts to look like actual input.

The choice we’re considering for Shopify’s main web app is to allow placeholder text to fail WCAG, and to therefore treat it strictly as an enhancement. If the UI isn’t understandable without it, we know we need to clarify the UI — starting with a proper form field label.

Rule number two: an upper limit

This first rule gives us a lower bound for text contrast that serves for subdued or secondary content. For primary content, we want even better contrast. Pure black would provide the most, but here we run into another consideration. Screens emit their own light, giving more contrast than we get with ink on paper. Using pure black may actually be hard on the eyes under normal lighting conditions. From this we get a second rule of thumb:

For primary text, make it almost-black, somewhere around 85–90%.

When setting your primary color, bear in mind that environmental factors like glare or outdoor use can seriously impact contrast. It’s easier to dim a screen than struggle with gray-on-gray, so when in doubt, use more contrast rather than less.

Mo’ color, mo’ problems

So far we’ve only considered contrast in terms of luminance. When we consider color (hue) instead of just shades of gray, things get more complex.

Different hues have different inherent luminance: all other things being equal, yellow is much lighter than blue or violet. This means that some colors are harder to use against white than others. This is one reason why blue is a good choice for links and actions: the blue-violet range has the most potential contrast with white.

We have a second requirement here. A link using very dark blue won’t be distinguishable from black, non-interactive text. To make it more obvious, blue links must be quite a bit lighter than you might expect. To meet both requirements, the color we choose must be quite saturated, and the greener (further from blue-violet) it is, the harder it is to hit the contrast target. At Shopify, our current link color doesn’t meet WCAG contrast requirements against white. We’re considering some shades that have better contrast, while still standing out from normal text. (Note: a day after this article was originally published, we merged this change. Nice!)

Gray areas

Text isn’t always against a white background. When setting text against a colored background, the rule that text should have at least a 4.5:1 luminance ratio with its background still applies, but things can get tricky.

Based on WCAG’s computation for luminance, the black text in this example is better, and by a large margin. Based on anecdotal testing, many people find the white (reversed out) treatment more legible. However, this rudimentary testing mostly involved people without visual impairment, which is likely to bias the results.

A very similar case was recently brought up on Twitter. Based on the Twitter thread, it was further discussed on the W3C mailing list. The responses including input from people with their own anecdotal experience.

In that [W3C thread](https://lists.w3.org/Archives/Public/w3c-wai-gl/2017JulSep/0791.html), Denis Boudreau commented:

I also feel like [changing the WCAG algorithm] is a risky thing to do. As someone who is colorblind, I would argue the exact opposite [that white on `#777777` is better than black]. Black text on a mid grey or dark orange is very readable and stands out a lot more to me.

In the same thread, Alistair Campell added:

I’ve seen at least two groups (which probably have sub-groups) who’s perception of contrast differs from mine: low-vision and older-people.

Strong colours to my vision were muted or invisible to them, and in one-case the other way around.

In looking into the reasons for all this, some of this seems to come from the effect of hue on perceived contrast. Surprisingly, this issue isn’t much discussed on the web. One lead that stands out is this article discussing similar issues but in the context of physical signage systems. It reports on work from 1992 that uses physical measurements of light reflectance from surfaces of various colors, and a different algorithm to calculate contrast.

However, we’ve yet to try adapting this alternative to screen-based design, and don’t have enough data to recommend it.

For now, when choosing whether to use light or dark text against a colored background, use caution.

Note: a previous version of this article recommended taking a looser approach to

Takeaways

We’ve reviewed why text contrast is important and what factors create it. We’ve also come away with a few good rules of thumb to follow:

• Text should be at least 45% black on white, for the lightest shade
• For the darkest shade, a value of 85%–90% works well
• Use colored text — such as for links — with care, minding the natural luminance of each hue and using a contrast tool to ensure legibility
• When setting text against colored backgrounds, trust your eye and add as much contrast as you can spare

So: try them out. Let us know what you think. And if you any questions or have experience with determining appropriate contrast of text against colored backgrounds, let us know in the comments.