The A List Apart Blog Presents:

Don’t Forget About Contrast

Article Continues Below

Several years ago I wanted to get an external monitor to go along with the laptop my work provided. I was a remote worker and decided to buy one myself that I could hang on to even if I left that job. But I was also a bit cheap. I drooled over the Apple Cinema displays, but I didn’t want to spend that kind of money.

Enter the big-box electronics store and their wide range of displays. I stood in front of one, decided on a size, and purchased it. I bought an LG that seemed “good enough” for my need for more screen real estate for windows of code, browsers, and dev tools. To be quite honest, this monitor has met those needs. I’m still using it.

It also pointed out a glaring issue that rears its head in a lot of our designs: we aren’t using enough color contrast to accommodate users who may not have the latest and greatest screens. I surfed the web the way I think a lot of people do, on a monitor that they took out the box and started using without doing any calibration. I was astounded by the lack of contrast all over the place. We like gray a lot and often we like it to be very subtle.

So, even though this monitor is not exactly what I would have bought if I could have afforded something nicer at the time, I’m now grateful for it. While I’m working on client projects, I’m often pointing out to the designers when their design cues or colors may be a little too subtle. If I’m dragging a design over to my laptop screen to be able to differentiate the contrast and colors, then it’s probably a good idea to punch things up a bit.

You don’t have to go out and buy a cheap monitor to see this, you can also test on older devices that don’t have the latest and greatest screens on them. Many cities have Open Device Labs where you can test on devices for free. If something like that is unavailable to you, there are other ways to find devices for inexpensive testing—Brad Frost has a great post on how to do that. There are many instances where our sites or applications aren’t going to be used on high-end, Retina devices or monitors and I think we have an obligation to consider that as we design so all our users can easily interact with the things we build.

As an example of this, I recently worked on an application that was intended for use in hospitals. I couldn’t help but wonder, were those monitors going to be able to show subtle color differences? Many of us are making applications that may be used places like hospitals, or other settings where the screens being used aren’t calibrated to perfection so subtle contrast can get lost. That’s just one example of an audience where I would want to be careful about what I expect out of a screen or monitor.

If you don’t have a cheaper monitor around, I highly recommend using developer tools to help you check for accessibility issues such as contrast. The accessibility team at Google has been doing a great job making tools that can help point out where there may be issues, so if you use Chrome, run an accessibility audit to see where you may need to make changes. Jenn Lukas wrote a great blog post here on ALA to describe testing color in the Chrome Dev Tools.

I’m grateful for this monitor because it points out contrast issues and reminds me frequently that those issues exist, and like color blindness variations, need to be taken into account as we work. Color contrast plays a large role in our designs, so make sure you test for it, check out designs on less capable screens, and audit your sites with the tools available, so that your users can easily see all the pieces of your design.

About the Author

Susan Robertson

Susan Robertson is a front end developer working with Fictive Kin who focuses on CSS, style guides, responsive, and accessibility. In the past, she has worked with clients such as FiftyThree, Imprint, Cloud Four, and worked for Editorially, The Nerdery, and Cambia Health. When not actually writing code, she can be found writing about a wide variety of topics on her own site as well as contributing to A List Apart and The Pastry Box. When not staring at a screen, she reads comics and novels, cooks lots of yummy food, and enjoys her Portland neighborhood.

9 Reader Comments

  1. Thanks for the reminder. I find the same trouble with reading subtle color schemes when on my phone in the sunshine. I think this is anther one of those areas in which by retro-proofing our designs we end up future-proofing them too.

  2. AMEN. Inadequate contrast and microscopic text on screen are two of my biggest pet peeves (behind the javascript marketing modals that are all the rage on websites these days). I find that it’s not just a function of the quality of the monitor, but of the target eyes. Even on the best screen available, I can’t read, for example, anything in the “Updates” tab of the Mac App Store. My eyes may have seen the ravages of time, but they’re not that bad. I hope gray on gray is a fad that goes the way of web two point oh’s shiny reflections and yesterday’s parallax scrolling.

    Thank you for this reminder that it’s as important to design with a mind to accessibility as it is to design for coolness!

  3. I’ve lately been putting this style on my html element and checking if everything is still legible/useable:

    -webkit-filter: blur(1px) contrast(0.4) grayscale(1);

Got something to say?

We have turned off comments, but you can see what folks had to say before we did so.

More from ALA

Webwaste

In this excerpt from World Wide Waste, Gerry McGovern examines the environmental impact of bloated websites and unnecessary assets.

Connecting the Dots

In this excerpt from Creative Culture, Justin Dauer walks us through many ways in which an organizations’ culture and the design work that it does play off of one another.
Career