The roots of a successful Web design come from the color choices you make. Color is crucial in creating an optimal user experience. Proper use of colors can even be required under some accessibility guidelines for the visually impaired.
Earlier, you read about the difficulty of designing for specific-sized monitors or with using fonts. Colors also have their own set of challenges.
Web Palette
The good news is that, at this point, almost no computer is still stuck with a limited color palette the way they were in the early days of the Web. Back then, there were 216 “Web-safe” colors that would appear the same on Windows and Mac computers through different browsers. If you used any other colors, you ran a risk of having your images appear grainy or clumpy, a situation called dithering. The browser was using alternating pixels of colors that it did have to simulate a color it didn’t have.
Web colors
You can still see the types of charts created to help designers understand the Web palette at sites like Visibone.
Dithering
Dithering is the technique used when you have only a limited set of colors to work with, consisting of alternating contrasting pixels to give the impression of a third color. Some drawbacks to dithering: It can create unpleasant patterns in the image (banding and clumping), it can make your file sizes larger and it can make it very difficult to manipulate the image further if necessary.
Here’s an example of a dithered image:
Today, there’s no need to stick with “Web-safe” colors. Go ahead and design with any screen color you’d like. Even many color cell phones and PDAs these days support 16,000 colors or more. And you’ll be surprised at the range of colors you can put on a computer screen compared to what you can use for a print publication.
Brightness
When choosing colors, you must also consider the brightness of a user’s monitor and operating system. Windows systems simply display colors with a lower gamma, which means that the entire screen appears with a darker cast. Macintoshes have higher gammas, so colors appear brighter and highlights are lighter.
Users with older monitors will also experience a darker site with less total range simply because their equipment is slowly fading. Users under fluorescent lights will see your design differently than users with sunlight or incandescent bulbs nearby.
To counteract this, be careful in choosing certain colors in your design. Yellows and oranges tend to suffer the most variation on computer screens, so check your colors on different monitors. Using colored backgrounds behind text is not recommended unless the color is extremely strong or weak. In other words, a bright green or a very soft blue both would be fine behind black text if the colors shifted a bit, but a moderate red or purple might interfere with readability if the color changed somewhat on a user’s screen.
Books like “Color Index” (ISBN 1581802366) by Jim Krause offer a range of color combinations that cover any design aesthetic you might be considering.
Accessibility
A good designer must also consider the possibility of color blindness among users. Your design should consider that up to 1 in 12 people have a color-related vision impairment.
In addition to colors, consider using some other visual cue to indicate links. Many designers dislike underlined links, but they do provide a clear sign of linked text. Bolding, capitalizing, and using an indicator like an arrow or a “>” sign are other good ways to draw attention to links.
You can preview how your design looks to a color-blind person at Vischeck.
For more tips on color-blind accessibility, visit these sites:
http://diveintoaccessibility.info/day_12_using_color_safely.html
http://www.iamcal.com/toys/colors/index.php
http://www.otal.umd.edu/uupractice/color/
Color Coding
In HTML code, colors are almost always represented by a six-digit combination of letters and numbers, sometimes known as hex code (short for “hexadecimal,” a counting system with sixteen ‘numbers’ instead of ten). Each digit of hex code has a number or letter value. From darkest to lightest, those values are:
0 1 2 3 4 5 6 7 8 9 A B C D E F
These values are paired off to express the amount of red, green and blue in a given color, which is why you’ll see this color system referred to as RGB. Under this system, color #000000 is black and color #FFFFFF is white. FF0000 is red, and 009900 is somewhat green (99 is about halfway between 00 and FF). The values can be combined to form millions of different colors.
Thanks to shortcuts built into HTML, you can specify basic colors such as “red,” “blue,” “black” and “white” by name. But to employ more precise shades and hues, you’ll need to use hex code.
Graphics programs such as Photoshop make it easy to look up hex codes. They automatically list the hex code for any color the user chooses. You can also consult one of the many “color picker” sites on the Web, which allow you to select a color from an onscreen wheel or chart and see its corresponding hex code. Some color tools, such as Color Schemer or Adobe’s Kuler, will even show you a palette of complementary colors for any color you choose.