Interface: Using Color

Color should be used in interfaces very sparingly except in icons. Users rarely have trouble seeing black text on a white background (or vice versa, if using White on Black mode due to eyesight disabilities). However, other color combinations can be troublesome.

1. Readability

When making colorful user interface elements, think about what kind of elements can be next to them. Especially consider the background colors on which a text element can reside. Apple initially failed to consider this when designing the Mac OS X Force Quit applet. The idea is that applications that don't respond for a while are displayed in red type. In theory this sounds like a nice feature that could make finding crashed apps quick and easy. However, the color for indicating the selected item is blue by default even if the user is using the Graphite interface theme — evidently the Force Quit window inherits the so-called "root" user's interface color, which is by default standard Aqua blue. Thus, the red text is displayed on a blue background, rendering the text nearly unreadable. Of course, this presents an additional problem: programs running in Mac OS X with super user (root) privileges don't properly take user color settings into account, because they are essentially being run on a different user account.

This issue doesn't extend to just text elements, as visibility of graphical elements and interface controls is likewise dependant on contrast and color choices. For instance, the gray, low-contrast QuickTime 4 button icons were very hard to see for some people. Later versions of QuickTime have remedied this problem with high-contrast bitmaps for the buttons.

2. Associations

In many cultures it is recognized that the color red can be used to depict negative answers or commands, while green is associated with positive ones. Red is "no", green is "yes". This can cause all sorts of problems if used carelessly. If a confirmation button for an action that results in data loss is tagged with a green checkmark, it'll look a lot less intimidating than it should.

This works the other way around as well: some applications make safe operations or options look dangerous. For instance, a notification dialog using a red error symbol is needlessly scaring the user. Conversely, the dialog depicted in the screenshot is using a white notification icon when it should be using a yellow warning icon. Make sure to use the right types of color cues in various contexts.

Using the red-green color pair for notifications that aren't associated with yes/no question-answer pairs is generally harmful. For example, a planning program that uses green and red to represent people that either are available or aren't is clearly flawed, since it's not instantly obvious what each color represents. In these situations a combination of a bright color and a shade of gray usually works better, since gray is widely recognized to represent an inactive state in many user interfaces.

3. Don't Hard-code

If your application uses custom controls or custom highlight colors for e.g. text, don't hard-code these colors. If the user is using a visual theme that's different from the window manager's default appearance, your application may end up looking hideous or unreadable – or both. Instead of hard-coding colors, use the colors provided by the system. For instance, on Mac OS, accent colors and control colors are provided by the Appearance Manager.

If using system-provided colors is impossible (for example if the platform your application runs on doesn't provide such a feature), try to make colors user-definable. For example, let the user change text colors through a color picker in your application's preferences window.

Always make sure to test your application using various window manager themes in order to make sure that alternate color schemes don't render your app unusable.

4. Don't Overdo It

Just as sounds in an interface, color can be effective if used conservatively enough. But too much color can make your interface distracting and gaudy. When too many elements in an interface are brightly colored, the colors negate each other and as a result none of the items stand out any better than they would if they were a boring gray. This is especially important when designing icons, as large, bright areas of color in a small canvas can overwhelm the rest of the icon. Use color only when it really makes sense.