|  Skip to Content  |  Search  |  Contact us  |  Newsletter  |  Sitemap  |  Article List  |  www.sap.com

Home & Services   Resources   Editions   Community   Goodies

Design Tidbits    Editorials    Stories    Books & People    UI Events    Forums

Design Tidbits

 To Overview of Tidbits

Design Tools

• My Design Tools – Part I
• My Design Tools – Part II
• Using Prototypes
• UI Toolbox: Capturing and Editing Screenshots – Part I
• UI Toolbox: Capturing and Editing Screenshots – Part II

Simplification

• What Does "Simple" Mean?
• Anti-Simplification – How to Make Life Harder for Users
• Reducing Complexity
• Error Prevention Comes First
• Don't Let Your Interface Lie
• Don't Let Users Suffer from System Weaknesses

Interaction Design

• Bridging the Gap – Part I
• Bridging the Gap – Part II
• Bridging the Gap – Part III
• Did You Make Your Selection? – Part I
• Did You Make Your Selection? – Part II
• Did You Make Your Selection? – Part III
• Did You Make Your Selection? – Part IV
• The Software Works The Way I Think: Beyond Point and Click
• A Layman's View on Interaction Styles – Part I
• A Layman's View on Interaction Styles – Part II
• Selecting Objects By Attributes – Part I
• Selecting Objects By Attributes – Part II

Screen Design

• The Art of Hiding – Part I
• The Art of Hiding – Part II
• Screen Layout – Part I: General Considerations
• Screen Layout – Part II: Layout Hierarchy
• Screen Layout – Part III: Examples

Hierarchies

• Hierarchies - Categories vs. Vectors
• Fighting (with) Hierarchies –
  Part I: Basics
• Fighting (with) Hierarchies –
  Part II: Presentation
• Appendix: Fighting (with) Hierarchies – Presentation Techniques I
• Appendix: Fighting (with) Hierarchies – Presentation Techniques II

Visual Design

• Some Color Mysteries
• Some Mysteries of Colored Text
• Animation – The Chili Pepper of the Web
• Appendix: Definitions of the Most Common Types of Animation on the Web

Design Process

• The Construction Cycle – Another Way to "Organize" the Design Process
• User Feedback
• What Does User Integration Mean for Software Design?
• Mapping a Conceptual Interface to a Physical Interface

Web, Web Applications, Web Design

• The Web – A Short Introduction
• An Introduction to Designing User Interface Controls at SAP
• From Dropdown Listboxes to Comboboxes
• List Box Tweaks (Part II)
• Concept Statements and Website Messages – Part I
• Concept Statements and Website Messages – Part II

Performance

• Waiting at the Computer: Busy Indicators and System Feedback – Part 1
• Waiting at the Computer: Busy Indicators and System Feedback – Part 2
• Waiting at the Computer: Busy Indicators and System Feedback – Part 3
• Human Performance at the Computer – Part 1: Introduction
• Human Performance at the Computer – Part 2: Making Applications More Responsive
• Human Performance at the Computer – Part 3: Perceived Performance
• Human Performance at the Computer – Part 4: On the Way to Performance-Oriented UI Guidelines
• Addressing a "Design Issue:" Start-Up Time
• Examples of Poor Responsiveness

Miscellany

• Adding Value to Your Interface by Using Simple Math and Matching
• Refreshing Three HCI Laws: Fitts' Law, Hick's Law, and the Power Law of Practice
• How Much Documentation Do Applications Need? – A Simple Example
• Human-Computer Dialog: How Good Does "Good Enough" Need to Be to Appear "Perfect"?
• Narrative User Interfaces
• Golden Rules for Bad User Interfaces
• Universal Usability
• User Interface Controls and Interaction Techniques of Horror

 

 

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.

   

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.

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.

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:

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

Actually, these colors are quite different:

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

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.

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).

    

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