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:
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: