Don’t Forget About Contrast

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.