|  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 Mysteries of Colored Text

By Gerd Waloszek, SAP AG, SAP User Experience – November 17, 2000

In my second article on colors I discuss some "mysteries" of colored text. Text plays a prominent role in any software, but in the "old days" there was usually not much to consider with respect to text colors: we mainly found black text on a gray background. The Web, however, changed this too. We find every variety and combination of colored text and backgrounds on the Web – many of them illegible and unpleasant to look at. This article aims to provide some hints on how you can improve the legibility of colored text. I also discuss the intricate interaction between foreground text colors and background colors. You can easily transfer these tips to line graphics as well.

Beware of Blue? Beware of Green, Cyan and Yellow!

Many design books warn against using the color "blue" for delicate structures like text on a white background, because human acuity is worse for blue than for other colors. My personal experience, however, is a different one: green is much more critical than blue. I don't know the reason for this – can anybody help me? If it's not our eyes, then maybe the phosphors of the CRT (cathode ray tubes) screens and the crystals in the LCD (liquid crystal display) screens are the reason. A similar point can be made for cyan and especially yellow. Anyway, here are a few examples that demonstrate this point:

Colored Type Blue Red Green Cyan Magenta Yellow

 

Improving the Legibility of Colored Text

You can make text easier to read if you use darker colors and/or bold type.

Darker Colors

Pure Color Darkened Color Pure Blue (0000FF) Dark Blue (000099), Darker Blue (000066) Pure Red (FF0000) Dark Red (990000), Darker Red (660000) Pure Green (00FF00) Dark Green (009900), Darker Green (006600) Pure Cyan (00FFFF) Dark Cyan (009999), Darker Cyan (006666) Pure Magenta (FF00FF) Dark Magenta (990099), Darker Magenta (660066) Pure Yellow (FFFF00) Dark Yellow (999900), Darker Yellow (660066)

Be careful not to make the colors too dark as these may no longer be recognized as colors, but as black. Also, you may notice a color shift, when you simply darken colors with respect to color values. To keep the same hue impression you have to manually adjust the colors as done in the following examples (see also my first article about colors: "Some Color Mysteries")

Pure Color Darkened Color Pure Cyan (00FFFF) Dark Cyan (0099CC), Darker Cyan (006699) Pure Yellow (FFFF00) Dark Yellow (CC9900), Darker Yellow (990066)

Bold Type

Bold type prevents color assimilation (see also my first article about colors: "Some Color Mysteries"), that is, the intruding of the background color (here white) into the letters. Even when bold, however, the colors green, cyan, and yellow are not legible on a white background. You should therefore use them in darker versions.

Bold Type Plain Type Black on White, Bold Black on White, Plain Dark Blue, Blue on White, Bold Dark Blue, Blue on White, Plain Dark Red, Red on White, Bold Dark Red, Red on White, Plain Dark Green, Green on White, Bold Dark Green, Green on White, Plain Dark Cyan, Cyan on White, Bold Dark Cyan, Cyan on White, Plain Dark Magenta, Magenta on White, Bold Dark Magenta, Magenta on White, Plain Dark Yellow, Yellow on White, Bold Dark Yellow, Yellow on White, Plain

 

Foreground Background Relationships

Red and Blue

When combining colors, for instance colored text on a colored background, be careful not to combine highly saturated blues and reds. Not only do these colors create an unpleasant visual effect – the colors are also perceived in different depths, which strains the eyes.

Blue on Red Red on Blue

Of course, there is no rule without an exception. You may want to use this effect to attract attention to your website.

Place Colored Text on Neutral Background to Improve Legibility

If you want to achieve maximum legibility, place colored text on a neutral background (white, black, or gray). You can also use black or white text on a colored background, as shown in the examples at the bottom of the left column:

Do Don't Blue on Gray Blue on Green Blue on White Blue on Yellow Blue on Yellow Blue on Magenta Black on Yellow Black on Blue White on Blue White on Yellow

Colored backgrounds may also change the hue of colored text through color contrast or hue induction (color assimilation [reference to first article]), as demonstrated in the right column.

Improving Color Consistency

You can make colors more consistent by using backgrounds which are desaturated and of a similar hue to the text or, for increased contrast, of a complementary hue:

Similar Hue Complementary Hue Blue on Light Blue Blue on Light Yellow Red on Light Red Red on Light Cyan Green on Light Green Green on Light Magenta

 

Final Word

Using colored text may require some fiddling and testing, especially when used in combination with colored backgrounds. Also note that there may be dramatic hue shifts between CRT and LCD screens as used in laptops and projectors for presentations. Light yellow backgrounds may also be hardly visible on LCD screens and with LCD projectors.

 

top