The Thing About Contrast

When I started as a designer, fresh out of school, I thought I was ready to be a real professional. I would be creating elegant interfaces that would delight users and solve their problems. At least I thought I would.

Those years in school taught me a lot. Research, project planning, teamwork, prototyping. Buckets of theory about devices and interfaces, users and stakeholders. I was clobbered over the head with important and familiar advice such as “Know the device standards!” and “Design for context!”.

Visiting conferences only confirmed that my teachers were on the right track. These speakers, obviously knowledgeable in their field, touted the same sort of advice.

“Your users don’t just sit behind a computer anymore, oh no, they use phones now! They might be sitting in a bus even!”
I nodded knowingly. ‘Yes, they might..!’
Obviously I knew this, after all, I’d studied it for years! I just forgot one thing..

The real world.

The generic advice of ‘design for context’ hadn’t been concrete enough for me to avoid a common pitfall: Designing with low contrast.

"The contrast on an older or cheaper screen can play a huge factor on how your product is experienced."

Today I’d like to share some of my learnings with you. I’m going to talk to you about Contrast as it pertains to interface design and how incredibly important it is.

The Beauty of Soft Grey

Have you ever divided content by putting it in white overlays on a subtly grey coloured background? I know that I have. I remember the first time I presented an intricate interface, with several types of content ever so subtly divided, on a beamer. I can feel some of you cringing. That’s what I did too. But it was school and that beamer was known for it’s issues. So I, like others, learned to ‘look around’ the beamer issue and showed designs on my laptop instead.

We tiptoed around the problem until a real world work problem popped up. A client mailed me about a design I’d created for him. He was missing some design elements he’d remembered seeing.

“I don’t see the grey anywhere!” He said.
“Are you sure? I see it in the files I sent you..”
“It isn’t there!”
“Could you send me a screenshot?”

The screenshot looked just fine, exactly as I’d designed it. So he sent me a photo taken of his screen. The grey was gone. His monitor was worse than mine and couldn’t show the subtle difference in colours I’d so painstakingly created.

I’d effectively hidden meaning in the weakest link of my design without even realising it.

I see this trend persisting all over the community. Soft grey dividers, white boxes on grey backgrounds, light grey text. Perfect aesthetically pleasing screens that don’t keep the problem of contrast in mind.

When Does This Apply?

With every digital product you design.
Wait, let me give that statement some nuance:

This applies to every single digital product that can be used or viewed by users.

Better?
Let’s break it down.

Monitors

The client example above shows that even in today’s world, where the average resolution is pretty good, contrast is still different per monitor.

"You can’t know for sure if your user has their monitor on the highest or lowest possible contrast setting."

You can’t know for sure if your user has their monitor on the highest or lowest possible contrast setting. Maybe the brightness hurts their eyes, maybe they just never touched the settings and the original settings are kind of crap. You can’t know everything, but you can keep more in mind than what you normally see.

Older phones

As designers we are likely to use high-end phones that’ll show us the work of our competitors in all their glory. In similar fashion we will view our own work on those devices.

"As designers we fall in love with how our designs look on our devices. But it may not be what your users see."

Just like our users don’t necessarily work with the best hardware when it comes to their big screens, they aren’t likely to hold their small screens to our excessive industry standards. Users may be restricted by their finances at the time, the plan they could get, they might have a personal preference for a brand or maybe their choice of phone is simply not as much of a priority. iPhone designers may the worst offenders here (full disclosure: I am one). Since iPhones are bright and contrast-rich, we are lulled into the sense that all phones are similarly so. Nothing could be farther from the truth.

Unless you know for a fact that your entire user base will only consist of the phone that you are using to test at that very moment ánd it need never grow beyond that user base, you need to keep in mind that the phone your app or website will be viewed on may be crappier than your own.

The contrast on an older or cheaper phone can play a huge factor on how your product is experienced. So lower the brightness on your phone when testing your designs and see if it still communicates your brand and doesn’t create any user experience problems.

"The phone your app or website will be viewed on may be crappier than your own."

Sunshine

If you’re lucky enough to mostly be desktop based, you might not have to keep sunshine in mind when you are designing (although it could still spill in through the window). When you are designing apps this is a much more common issue.
(Even here in Amsterdam, where sunshine is a rare sight to behold) ⛅????

At Fonk we design a lot of apps, used by a variety of quite active users. When your app is being used by a truck driver as he’s picking up products at his various stops, or kids that are running around outside and using your app throughout the day, you need to make sure whatever you’ve designed is viewable in their context.

An Example

Let me give you an example. This is not an app comparison but meant to show the effect of low contrast design when used in the sun.

Example shot: Found on Dribble. (If anybody can find the creator I’d really love to credit them!)

I found this shot on Dribble and instantly liked it. It is soft, elegant and gives me a clear context: it has to do with location. The tilting of the map and location pin make me feel like I’m ‘in’ the map. I loved it! I even saved it as inspiration. I did make note of it’s very soft contrast though and decided to take it outside as a test for this post.

In the sunshine!

When viewing this shot in the sunshine I could barely make out the map and much of the information on the left. There wasn’t enough contrast to let me pick out what was happening where, even with my eyes scrunched up.

Such reflection, so wow.

By contrast (pun intended) Google Maps, although arguably a far less elegant design, is quite clear. The different elements on the map can easily be identified.

Someone clearly didn’t fix their nails before rushing outside to test. *cough*

We also gave Apple Maps a whirl and, though less viewable than Google Maps, it did provide enough contrast to make out where we are and what is around us.

Solution?

Test it. Before considering any design finished, test it. You don’t need to create extravagant prototypes to do so. You just need to test how your design will present itself in a different context.

"Before considering any design finished, test it."

Go outside! You don’t need to act out the entirety of the user experience if you can’t, but you can open the door and go outside to see what your design looks like.

Get a crappy phone to test your app on. Have an acceptably shitty monitor around to test your website with. Choose a mid-range device that will give you a realistic estimation of how the spectrum of users you are designing for might see it.

Change your contrast and brightness settings, just to see how your design behaves. If you aren’t in the opportunity to buy the devices you’d like to test on, at least try to keep them in mind.

In Closing

As Interface Designers we are held to a high standard by ourselves and our community. This standard shouldn’t simply be defined by what is pleasing to the eye.

"The standard shouldn’t simply be defined by what is pleasing to the eye."

Soft colouring can provide a great atmosphere in digital products. There is nothing wrong with soft grey, or blue or green or whichever colour you choose. So long as you always check if you aren’t employing design traits that make your screens look beautiful, but render it less usable in different contexts or on different devices. If so, drop them or find alternative solutions.

The thing about contrast is that it’s remarkably easy to loose sight off, despite how much it means for the usability of our products. We need to design for understanding first, delight second.

We are creating solutions to help users of all sorts accomplish their goals. Be mindful of those users. We as designers are not the norm, if there even is such a thing.

(Goodbye soft grey, I loved you..)

Thank you for reading!

(Sidenote: all the photos were taken by an iPhone 6s of an iPhone 6s. In reality the screens were somewhat more visible than the shots, in order to make the screens more visible I edited the ‘screens’ somewhat, giving our example shot a bit more light than the others. The differences between the apps are clearly visible.)

This article was originally published on Leonie's Medium Page.