When choosing colors for design, there is usually a careful examination of tone, feel, emotion, and of course, aesthetics. In high visibility and properly lighted situations, this is often enough for a pleasing, functional design. Unfortunately, in today’s world of portable devices and omnipresent displays, there are often times where visibility is low or lighting conditions are less than desirable. In these situations, colors need to be chosen with an additional concern for utility in order to facilitate a great user experience.

As a part of a foray into the study of colors, I discovered that display optimization is not a black and white matter (ok, ok, forgive the pun). There is a lot of science out there, and by combining it with some general guidelines, we came up with some rules for graphics and displays that could potentially face visibility challenges.

Every color has what is called a Relative Luminance Value, a measure of luminous flux density, on a normalized scale from 0 (black) to 100 (white). A normalized scale, where colors are measured relative to one another, is key in designs where the illumination cannot be predicted – the luminance of a color in bright light is different than the luminance of that color in dim light. There are some tricky equations out there, but a handy tool like this one makes finding Relative Luminance Values easy.

Luminance Contrast is the difference between the Relative Luminance Values of two colors. Research finds that the single most important aspect of color choice is the Luminance Contrast between an object and its background, affecting legibility and salience more strongly than the object’s own Relative Luminance.

Let’s look at an example. The first box contains colors that have approximately the same Relative Luminance value (blue, 55; green 57), so they have a small Luminance Contrast (2). The second box contains colors that have a greater difference in Relative Luminance values (blue, 75; purple 32), so they have a larger Luminance Contrast (43). Try dimming your screen, squinting, or shining a bright light on the boxes, and note the differences in visibility, particularly of the star points.

When there are concerns of undesirable lighting conditions (such as bright sunlight or dim displays) there are guidelines that we can follow to aid in legibility and salience. For objects and areas, the Luminance Contrast between colors should be no less than 66. For text, where the lines are usually thinner and spaces show the underlying background, the Luminance Contrast between the text and background should be no less than 80. When a display is to be used in bright sunlight, contains safety critical information, or otherwise will need to ensure visual communication, do your best to follow these guidelines for Luminance Contrast.

In the end, when looking at what colors to use in your design, remember to take into account more than just utility and the guidelines outlined above. Branding, emotion, aesthetics, information hierarchy, and other more subjective matters need to be considered. A study once showed that better-looking things are perceived to work better, and an aesthetically pleasing design is perceived to be more trustworthy. Balance form and function and you’re well on your way to choosing colors that contribute to a great user experience.