Good Color Practice - Part 3 of Chapter 2 from Web Graphics for Non-Designers (7/7)

Color Behavior

How colors behave when near each other is an important consideration for any developer. Adjacent complementary or discordant colors can wreak havoc on the eyes of your users, and because of this, care and restraint should be exercised when using such schemes.

If your design does call for text in one color on a background of its complement, then ensure that the contrast between the two is substantial enough to ease legibility. Reading should not be a battle for your audience!

A light block of color near a dark area will appear lighter than it actually is, and the dark one darker. This is a key example of the visual effects colors have on each other through association. In the image below, the two green blocks are the same size and color. This is also true of the charcoal blocks, and in this case it is especially obvious that when surrounded by black, the charcoal block appears lighter than its counterpart on the silver background.

Vision Impairment

The American Foundation for the Blind estimates the number of people who are blind and visually impaired in the United States as 10 million. With similarly significant numbers in Europe, Oceania, and elsewhere, it is important that your color-based decisions do not negatively impact these people.

Color deficiencies commonly associated with partial sight, for example, can make differentiation of hues between colors difficult. It can also impact the ability to discriminate colors with minimal variation in saturation.

Your designs can account for the visually impaired by ensuring that your color choices regarding critical elements (text, buttons, links, and alerts for example) differ significantly with respect to hue, lightness, and saturation.

Examples of poor (left) and sensible (right) combinations are shown below. The more effective examples provide better differentiation between hue and values of lightness and saturation.