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.