Design Tidbits

back Tidbits Overview

Tools for Design and Visualization

Simplification

Interaction Design

Screen Design

Hierarchies

Visual Design

Design Process

Web, Web Applications, Web Design

Performance

Miscellany

 

 

Links & More

Print version Print version

Related Links

document Some Mysteries of Colored Text

Background Links

book Color Glossary

Some Color Mysteries

By Gerd Waloszek, SAP AG, SAP User Experience – October 9, 2000

Colors are just colors, aren't they? Actually, it's not as easy as you might think. Colors may take on a different appearance depending on the surrounding colors or they may actually change when subjected to technical processes like saving an image to a certain file format. My first example shows that dealing with colors may be tricky at times.

This article covers perceptual phenomena like the appearance of foreground and background colors, color contrast, color induction, and color assimilation. It then touches on some of the complications involved in saving to certain file formats. In a follow-up article I will apply some of these findings to colored text and its relation to the background color.

Note: Some of the effects, especially those of color contrast and color induction, are hard to see. So don't be disappointed if you cannot recognize them.

 

Foreground vs. Background Colors – An Example

I once had to solve a problem which clearly demonstrated to me that background colors and foreground colors are not the same. We had defined a color scheme for list elements like headers, body, totals, etc. In addition, header data was displayed above the list in pure blue (i.e. #0000FF – I will use this notation throughout this article). This blue, however, did not match the header background color (see figure 1), so someone proposed that we use the same blue for the header data (see figure 2). This sounded reasonable, but when I tested this proposal, I found that the text was hardly readable. What had happened?

The reason is that colors are perceived differently if they are used as colored areas like backgrounds or as delicate structures like text. Relatively dark background colors are far too light to use as foreground colors for elements such as text. Therefore, you have to darken a color when you want to use it as a foreground color that matches a background color (see figure 3), as the following example demonstrates:

Customer  

G. Miller

  

Vendor  

A. Smith

Requisition #

RT

Date

Key

Curr.

Amount

20001001

PO

10/20/2000

01

USD

800.200,00

20001002

PO

10/20/2000

01

USD

10.775,50

Figure 1: Table with the original colors (#0000FF for header background, #7DA6CF for column headers)

Customer  

G. Miller

  

Vendor  

A. Smith

Requisition #

RT

Date

Key

Curr.

Amount

20001001

PO

10/20/2000

01

USD

800.200,00

20001002

PO

10/20/2000

01

USD

10.775,50

Figure 2: Table with the proposed colors (#7DA6CF for header data and column header background)

To approximate the effect of the background color, I reduced the lightness of the header color from 81% to 60%:

Customer  

G. Miller

  

Vendor  

A. Smith

Requisition #

RT

Date

Key

Curr.

Amount

20001001

PO

10/20/2000

01

USD

800.200,00

20001002

PO

10/20/2000

01

USD

10.775,50

Figure 3: Table with the header color lightened to approximate the background color (#5C7A99 for header data and #7DA6CF for column header background).

Often the text color, compared to the solid background color, seems to shift its hue when darkened (the effect may also depend on the display type). In the above example, the text color seems to shift to a more greenish blue. Therefore, I corrected the color slightly towards blue:

Customer  

G. Miller

  

Vendor  

A. Smith

Requisition #

RT

Date

Key

Curr.

Amount

20001001

PO

10/20/2000

01

USD

800.200,00

20001002

PO

10/20/2000

01

USD

10.775,50

Figure 4: Table with adjusted colors (header data was changed from #5C7A99 to #5C7AAA)

 

Color Shifts Effected by the Surrounding Color

Colors may appear to shift hues slightly, simply through the effect of the surrounding colors.

Color Contrast

Color contrast may intensify the colors of neighboring areas, that is, it makes the colors appear more saturated, especially if the colors are complementary.

Note: Complementary color pairs are, for example, red-green, blue-orange, or yellow-violet; complementary colors add up to white.

Color contrast intensifies neighbouring colors    Color contrast intensifies neighbouring colors

Figure 5-6: Color contrast intensifies neighbouring colors; the effect is typically stronger for complementary colors (left) than for other color combinations (right)

Compare the small squares in the middle with identical colors in both images; they appear slightly different depending on the surrounding color (see also the examples below).

Color Induction

Color induction makes neutral areas look a little like the complementary color of the surrounding color. For example, a gray box surrounded by yellow makes the gray look slightly violet.

Color induction

Figure 7: Color induction

Color Assimilation

Color assimilation changes the hue of colored objects in the direction of the surrounding color and often decreases contrast. This effect appears whenever colored objects are so tightly interwoven, that they tend to become "integrated" into one color. The following animated example demonstrates this effect for different surrounding and foreground colors. Look at the triangles formed out of six smaller triangles and watch how the same color looks different depending on the surrounding colors. You can see, for example, how the yellow looks more reddish when surrounded by red and more bluish when surrounded by blue.

Color assimilation

Figure 8: Color assimilation (animated – 2 images, each lasts 2 seconds)

This effect is especially important for delicate structures like text. Colored text may seem to change its hue in the direction of the background color.

Note: An extreme case of color assimilation is the integration of colors in printed matter or on TV screens. Here the colored dots are so small that our eyes can no longer resolve them and integrate them into one single color impression.

Applying the Effects: Same but Different – Different but Same

Now let's see what these effects can do. The following examples were inspired by Edward Tuftes book "Envisioning information." The first shows how the same color appears differently depending on the surrounding color:

the same color appears differentlydepending on the surrounding color

In the next example, the two small squares in the middle seem to be the same.

the two small squares in the middle seem to be the same

Actually, these colors are quite different:

these colors are quite different

Finally, look how the same orange color looks with two different background colors:

the dark background to the right makes the orange appear much more saturated and brighter than the light background to the left

Here the dark background to the right makes the orange appear much more saturated and brighter than the light background to the left.

Figures 9-12: Colors may appear different although they are the same, or the same although they are different, depending on the surrounding color.

 

Color Shifts due to Technical Reasons

Although design books often point this out, many graphic designers may not be aware that saving images to certain compressed file formats like JPEG or GIF can also cause colors to change. These effects can be rather subtle and often hard to see. They result from reducing the number of colors. JPEG images are more prone to this shift than GIF images, because users cannot control this effect (except by setting the compression rate).

  • JPEG: JPEG compression results in a reduction of the number of colors – that's what makes the file size smaller. Thus similar colors are collected into one color value (which may be even one which was not originally in the image), resulting in color shifts. These color shifts may become evident, when JPEG and GIF images are combined, for example, when a JPEG foreground image floats above a GIF background, as GIF images typically preserve color values (see below).
  • GIF: GIF images may shift colors, if the original contains more colors than the target color depth allows (typically, when more than 256 colors are reduced to 256 colors). Depending on the options of your image processing program such shifts can be avoided, or made less evident.

An Example

The following example shows a color shift in a uniform yellow area caused by JPEG compression. The shift is, however, so small that it is not noticeable. You can copy the images, load them into your image processing program, and check the color values. I took only a few samples to verify the color values. So, you may find different values.

A JPEG image floating over a GIF background

Figure 13: A JPEG image floating over a GIF background; the yellow in the GIF background is #FFFF00, which in the JPEG image changed to #FFFF02; the JPEG image also shows different yellows surrounding the sphere (e.g. #F4F400), which are compression artifacts

The color aberrations, or so called artifacts, in the JPEG images are – luckily – usually hard to see. So I enlarged a section of the example image to make them easily visible. To also demonstrate the overall effect of compression artifacts, I selected the blue channel of the JPEG image and changed its gamma setting (that is, its lightness in the mid tones).

Artifacts in a JPEG image with shifting color values     this image shows the blue color channel with changed gamma setting to demonstrate the overall effect of the compression artifacts

Figure 14-15: Artifacts in a JPEG image with shifting color values (left); the other image (right) shows the blue color channel with changed gamma setting to demonstrate the overall effect of the compression artifacts

Practical Implications

This example leads to two practical implications:

  1. A Web page may have a colored background and foreground images floating above it (e.g. a sphere floating on a yellow background). The images have irregular shapes and should blend in with the background. To achieve this blending effect, the color surrounding the irregular shapes is matched to the dominant background color. As the images contain many colors, they are saved in the JPEG format. The background, however, contains only few colors and therefore is saved in the GIF format. As demonstrated by my example, the foreground images saved in the JPEG format may exhibit subtle color shifts (e.g. the yellow shifted from #FFFF00 to #FFFF02). Sometimes, as shown here, the resulting color difference between foreground and background is not noticeable, but in other cases it may be disturbing.
  2. Sometimes colleagues save screen dumps as JPEG images instead of GIF images – often, because they were told, that JPEG compresses better than GIF. While the savings depend on the image content and their assumption often is not true, there is another drawback: colors may shift – you cannot sample correct colors from such images. In addition, compression introduces annoying artifacts in finer structures like texts and borders.

 

Final Word

This article surely addresses difficult concepts for graphic and user interface designers. Therefore, a second article will continue the discussion of colors issues and take a look at colored text. I also recommend consulting books on Web design, for example, those by Lynda Weinman, if you are interested in the characteristics of the different file formats for the Web and their handling of colors.

 

See also the second color article, "Some Mysteries of Colored Text ".

 

top top