Effective Use of Light and Color in User Interface Design

on Oct 1, 2007

While there is a lot of information, research and guides on light and color theory, I do not see much writing applying this to user interface (UI) design—especially how to effectively use light in interface elements. What I mean by light is actually the brightness levels of the individual UI elements—in other words, how light or dark something is, something like a button or the window texture itself.

Lighter shades are perceived by the human eye to be brought forwards—to feel closer to us. Darker shades are pushed back—they appear further away from us. In UI terms, we must apply this to our visual metaphor. If we’re making a button, we’re going to want it to be closer to us. If a button is a real 3D object, then it will naturally protrude above the surface of where it is sitting on. In our world of 2D interfaces, this isn’t very easy to show, so we use different light levels like this:

buttons in a 2d interface

The standard button must be lighter than the window background to emphasize it being above the window—protruding over the surface. The pushed button state must have the button darker than the window texture to show it being really pushed down, and thus being furthest away from from us. Simple stuff, right? It is when we work in black and white, but things get a little bit more complex when you add color.

Take a look at this image:

We have two colored squared inside of two more colored squares. The lightness level is exactly the same across the whole image, only the hue and the saturation varies. Which of the squares is closer to us, and which is further away? The right hand cube is easier—it looks like the yellow square inside is being brougt forward and so is closer to us. The red and green are not so simple. Here, the red is so powerful that it dominates the green, and actually the green is likely being pushed away from us. Why is this?

This is traditional color theory. Warmer colors (yellow, red) are naturally lighter and have more energy. They will not only be brought forward, they will also try to expand and grow. Cooler colors (blue, green) will be brought back and will contract. When you are working with more than a black and white palette, it is very important to remember this, and always check to see if you’re getting the colors right and whether the elements you wish to bring forward are actually being brought forward. Painting the “Join Now” button blue won’t be as effective as having it in red because the cool color will make it less prominent.

Buttons in an interface, such as Windows, OS X or an online website, are elements that you wish to attract the user’s attention towards—they are key elements of the whole UI because the user’s interaction with them drives the whole experience. If the buttons are not easy to spot, you will only make the user’s life more difficult. Even if they lose half a second trying to spot a button, that half a second will add up to hours if they use the application every day. We can use simple color and light theory to make buttons easier to spot like this:

Notice that I set the content in a darker area to push it backwards even more, and bring more attention to the interactive element—the button. If we reverse the lightness, we’re going to get the following:

Now our attention is directed towards the content, and the button is more difficult to locate (in the split second time spent subconsciously looking for it). Use light and color to your advantage—not only does it allow us to mimic a real life 3D metaphor of physical buttons, it also helps us direct the users attention towards the elements they are looking for. To conclude, let me show you a couple real life examples. Here’s one from the Mac OS X interface:

As you can see, the things I’ve talked about are implemented here. Buttons and controls are lighter to bring them forward and attract attention, the window texture and content is darker to fade backwards. This also constructs the 3D metaphor, with buttons having a solid realistic feel. Ok, here’s a more interesting one—this is from the current Amazon layout:

I don’t like this, because it uses a cooler color in a tab that is meant to be in front. If you just glance at the image casually, the “inactive” tabs are being brought forward subconsciously because of the warmer colors, even though they are meant to stay back in the physical “tab dividers” metaphor. I’ve drafted my own version to illustrate how the Amazon tabs could be given a more appropriate feel with no confusion as to which ‘tab’ is in front:

If you’re thinking this is all common sense, then fantastic. If not, then I hope you found this useful. You can always check out the entry and links at Wikipedia if you want to learn more about color theory.

EDIT: Looking back, I must apologize for not mentioning contrast at all in the post, as Igor Asselbergs has kindly pointed out in the comments. Here are a couple of links you may find useful regarding color contrast:

http://www.livelygrey.com/2007/09/color_contrasts.html
http://www.livelygrey.com/2007/08/backlight.html


3 Comments »

  1. Comment by yasin f — Oct 2, 2007 @ 8:36 pm

    that’s one succinctly put blog post there. for us smaller fish, it’s quite good brainsnack. thanks!

  2. Comment by Igor Asselbergs — Oct 3, 2007 @ 1:18 am

    Nice article.
    But perhaps you should concentrate on contrasts rather than single colors. Take your example with the content vs button. In the second image the focus is on the content not -as you said- because of the lighter background, but because of the higher contrast between text and image. Higher contrast can also easily be attained in a dark background with the same effect.
    Here some info:
    http://www.livelygrey.com/2007/09/color_contrasts.html
    http://www.livelygrey.com/2007/08/backlight.html

  3. Comment by Dmitry Fadeev — Oct 3, 2007 @ 2:51 am

    Thanks for your nice comment Yasin!

    Hey Igor,

    You are so right—I’ve utterly failed to mention contrast at all in the post, shame on me :( I think my main point is that when you try to apply colors and shades to UI design it is useful to keep in mind any physical metaphors that you may be implementing, such as buttons and tabs, which are being borrowed from the real world and so work best when you create a basic 3D illusion and feel. Making the active tab high contrast and dark will work at bringing your attention to it, and will make it perfectly usable—but it will also make it feel a little less real. Making buttons and tabs lighter will make them fit more in place, but for them to work you need to achieve the right level of contrast between them and the other elements—so the window texture the button is sitting on will need to be dark enough for the button to stand out.

    I’ve had a look at your site and it looks like a great resource. Thanks a lot for the links. I think many readers (including myself) will find them very useful. I really like the article about the phone backlights, as I had a Nokia phone with a similar problem—though not as severe :)

RSS feed for comments on this post. TrackBack URL

Leave a comment

Contact Information

If you would like a quote or a project proposal, just click here to fill in our short client web form and we'll get right back to you.

Direct Contact Details

Email Email: info@pixelshell.com Skype Tel: +44 (0)20 8816 8876