|
|
|||
|
|
|
|
|
|
||||
        
|
 |
Chapter 13: Color
Color and Usability
Page authors must also be extremely careful when setting text and background colors. Readability must be preserved. Page designers are often tempted to use light colors on light backgrounds or dark colors on dark backgrounds. For example, a gray text on a black background might look great on your monitor, but if the gamma value of another person's monitor is much different than your monitor, it will be unreadable. An online demonstration of contrast problems can be found at
http://www.webdesignref.com/examples/contrastandusability.htm.The simple solution to the color usability problem is to make sure to never have elements that require a precise rendering in order for the difference to be apparent. A non-main element, one whose disappearance wouldn't affect the overall look of the page, might qualify as an exception to this rule, but if your design requires that everything appear precisely rendered in order for the whole to not fall apart, then you will need to modify your design. To avoid color contrast problems, white and black always make a good pairing, and red is certainly useful. The best color combination in terms of contrast is yellow and black, but imagine the headache from reading a page that looks like a road sign! Despite the high contrast, designers should be careful of white text on a black background when font sizes are very small, particularly on poor-resolution monitors. Yet be careful also of exaggeratedly high contrast. Bright neon colors on a black background offer a great deal of contrast, but is it an effective or usable design? As mentioned in the previous section on color harmony, using color and contrast to call attention to particular parts of a site is a balancing act. Making the navigation colorfully obvious without making it obtrusive and at the same time highlighting a special site feature can be challenging, because just as fast as you grab attention, you may generate a negative response. Another aspect of color and usability to consider is the variation of visual capabilities in Web users. Human color perception simply does not adhere to some exact standard (considering that the health and structure of each person's eyes varies greatly, this is somewhat to be expected). For example, it is estimated that approximately eight percent of all men and one percent of women have color vision deficiency to some degree or another. Users with vision that is somewhat color-deficient are often unable to differentiate between colors of similar hue when those colors are of the same lightness and saturation. Someone with the most common color deficiency, red-green color blindness, would have trouble distinguishing between red and green when the red and green are close in saturation and lightness. Such color vision issues can be troublesome when you consider the difficultly in distinguishing between red and green traffic lights. Does the color-deficient driver really know when to stop or go? Probably yes, since position also provides meaning in a traffic signal. However, on the Web, if links are similar in hue, lightness, and saturation, it might be difficult for someone to determine which links have been visited and which have not. If color is being used to draw something out, try to have something that also indicates importance, just in case the user can't perceive color properly. Color perception problems may get worse with the proliferation of PDAs, cell phones, and Palm devices. What do you do when you are not working with lots of color? Can you design a site that works well in all conditions? Two-tone devices, usually displaying with a greenish-gray background and grayish-black text, challenge design ingenuity in a number of ways. The safest approach is probably to design a separate site for each browsing platform so that you can design completely within a particular visual environment. Browser-sensing then directs incoming users to the version of the site appropriate to their display device. The last point about color and usability on the Web is once again related to links. Like it or not, on the Web blue equals go and purple equals stop or go away. Making something blue will encourage a person to click on it, making it purple will probably not. If you use lots of purple on the page, you might just be subliminally telling people that this site is one they should pay less attention to. Color isn't just for decoration; it can have meaning. |
 Overview | Chapters | Examples | Resources | Buy the Book! |