SEO Color Optimization for a WEB SITE

Color
I think most of us would agree that the world would be a pretty boring place without color—as would your web site! Color is a primary building block of visual design that enhances your site’s aesthetic qualities, and allows it to have a lasting impression on visitors. Color can also boost the usability of your site, drawing visitors’ attention to certain areas of a web page, improving readability, enhancing raw functionality, and highlighting the visual organization of content, pages, and the site as a whole.
The effective use of color can make a valuable difference in your site’s success. This chapter provides checklists that will help you to provide a positive first impression for visitors, enhance your site’s functionality, and use the most appropriate colors for accurate display on a wide range of computer monitors and other devices.
Preparing a Color-friendly Work Environment
To avoid unwelcome, ugly surprises as you apply colors to your site design, it’s important to keep the colors you use as accurate as possible—especially if you’re preparing images for use on your web site. To create accurate colors for your web site, you’ll need to adjust your hardware and software. This checklist will help you to view and work with colors accurately.
✓
Position your monitors in areas with subdued light, out of strong or direct light.
✓
Use color-neutral, daylight-balanced lighting in your work area.

OTT-LITE Technology is one well-known provider of suitable lighting.
✓
Set your displays to 24-bit or 32-bit color (True Color).

Windows users can access the appropriate options by clicking Start > Control Panel > Display. Then, in the Display Properties window, click the Settings tab. Macintosh users need to click System Settings > Display.
✓
Set your display contrast to its maximum unless the image display is too bright or harsh on this setting.

Set your display gamma to 2.2 (Windows users) or 1.8 (Macintosh users).[1]
✓
Calibrate your displays to the sRGB ICC profile.

Especially important, in this regard, are computer displays that you use to work with and produce images for your web site. You’ve probably already noticed that a web site’s colors can look quite different on various computer displays—maybe you’ve even had clients tell you the colors you’ve used on their web sites are “all wrong,” even though you’ve employed their corporate colors. There are millions of computer displays in the world, and they can employ a wide range of settings, including color space—the range of color that the display is capable of reproducing. No two devices are exactly alike. The goal of the ICC (International Color Consortium) is to standardize vendor-neutral, cross-platform, device-independent color profiles.
To manage the colors in web site images, use the sRGB color profile. Although, increasingly, the sRGB color profile is being used as the default display, millions of existing displays still use other profiles. Nonetheless, using the sRGB color profile will help you ensure that the colors in your images display as close to the intended colors as possible.
Tip: Using Visual Calibration Tools
Visual calibration is offered within Adobe products, such as Adobe Gamma for Windows, and Monitor Calibrator for Macintosh. To access this functionality in Windows, click Edit on the menu bar, then click Color Settings. Macintosh users must click Photoshop on the menu bar, then click Color Settings. Then, in the Working Spaces box, select sRGB IE61966-2.1. For higher levels of accuracy, try calibration software such as X-rite, Color Savvy, Alwan Color Expertise, or Gretag-Macbeth.

Choosing a Color Scheme
Color matters to users, whether they know it or not. In fact, a usability study found that "the best predictor for the overall judgment by typical users of a web site was its beauty."[2] Harmonious colors engage web site visitors and provide an inner sense of order, resulting in a peaceful visual experience that’s less likely to intimidate or frustrate them. The use of triadic color schemes—three colors the same distance apart on the color wheel—achieves this inner sense of order the best.[3]
The key to choosing a harmonious color scheme for your web site lies in your branding: choose a color scheme that works well with your existing logo and company colors. The following checklist will help you to choose the right colors for your web site.
✓
Base your web site’s color scheme on your branding and logo colors.

Color is an important aspect in building recognition of your brand. Stay consistent by basing your web site’s design on your branding, including the colors used in your logo.
Tip: Getting to Know the Color Triads
Triadic colors can be bright and strong, such as the primary triad of red, yellow, and blue, and the secondary triad colors of orange, purple, and green. For more subtle hues, lighten, darken, or add gray to triadic colors to create an endless variety of interesting, eye-pleasing color combinations.
To help you choose attractive colors, use a color wheel, such as the Primary color wheel (mixed from red, yellow, and blue), the Secondary color wheel (mixed from orange, green, and violet), the Tertiary color wheel (one primary and one secondary color mixed together), or the Visual color wheel (mixed from red, green, and blue). The Visual color wheel’s RGB primaries are used for computer monitors, cameras, scanners, and other digital technologies, and the secondary (subtractive) triad is CMY (cyan, magenta, yellow), a printing standard.
Add color wheels, such as those from The Color Wheel Company, to your bookmarks—they’re very handy reference tools. Make use of other color palette and color scheme tools as you choose web site color schemes; try VisiBone’s Color References, Dominique Trapp’s Color Harmony Guide, and Color Wheel Pro. For helpful software and more online color tools, visit WebsiteTips.com’s Color section.
To read more about using color on your web site, try the excellent book by Mimi Cooper and Arlene Matthews, Color Smart: How to Use Color to Enhance Your Business and Personal Life (New York: Pocket Books, 2000), and Leatrice Eiseman’s Pantone Guide to Communicating with Color (Cincinnati: Grafix Press, 2000).
✓
Use a neutral, subtle color scheme for your web site to help direct the focus to your products or services.

Neutral doesn’t have to mean dull and boring, of course! But, if you’re going to get users to focus on your products or services, your web site colors must remain fairly neutral. For example, if you visit an art gallery, you’ll notice that the walls and interior colors are neutral colors. This allows visitors to focus on the art—the surrounding colors don’t distract visitors from the works themselves.
Branding and logo colors may intentionally be strong, as this is a great way to grab attention. If you’re working with a strong palette like this, you might choose to use paler shades of the branding and logo colors to create a more neutral color scheme for the site, reserving the strong colors for use in small accents here and there. One example of this approach in action is the color scheme at Amazon.com. The Amazon logo uses black text and a light-orange color on a white background. The color scheme doesn’t use the orange prominently, but shades of it are applied throughout the web site as accents: a darker shade of this orange is used for heading text and arrows, and to create a light-orange background bar at the bottom of each page. Amazon.com’s global navigation tabs are a neutral, subtle color.
✓
Use color to convey meaning.

Some brands define themselves, at least in part, by color—look at Coca-Cola (red and white) or McDonald’s (red and yellow), for example. When you plan your web site’s color scheme, don’t leave your choices to chance. Understand what colors mean, and use them effectively, keeping in mind the cultural differences mentioned next.
✓
Consider the different meanings associated with colors in particular cultures.

Each region of the world has its own predominant colors, distinctive palettes, and color associations. For example, in the United States, red is often associated with power, love, passion, and rage. By comparison, in China, red is the color of weddings, and red, pink, and burgundy are associated with good luck, good health, and prosperity.[4] As you choose your web site colors, be sure to use colors that are appropriate for the cultures and countries in which your target markets or audiences live.
Tip: Discovering the True Meanings of Color
Three helpful books that detail the cross-cultural meanings of colors are Leatrice Eiseman’s Pantone Guide to Communicating with Color (Cincinnati: Grafix Press, 2000), her new book, The Color Answer Book: 100+ Frequently Asked Color Questions for Home, Health and Happiness (Herndon, Virginia: Capital Books, Inc., 2003), and Mimi Cooper and Arlene Matthews’ Color Smart: How to Use Color to Enhance Your Business and Personal Life (New York: Pocket Books, 2000).
✓
Use no more than six colors in your web site color scheme, if possible.

Studies show that using more than six colors can slow down the time users take to search through information. While other studies suggest that as many as nine colors may be acceptable, provided those colors are separated within the color space,[5] I think it’s a good idea to remember that old cliché—“better safe than sorry”—and to create color schemes that use a maximum of six colors.
✓
Avoid placing blocks of saturated, complementary colors next to one another.

When you place next to each other saturated complementary colors, such as red and blue-green, yellow and dark blue, or purple and yellow-green, you’ll see a flickering effect. This effect is actually generated as your eyes’ focus shifts quickly back and forth, as it’s unable to settle on either complementary color. Not surprisingly, this effect causes eye strain![6]
✓
Test for color differences, inconsistencies, and problems using a variety of displays, resolutions, and platforms.

While your web site colors will look different on nearly every display, it’s important to check for unsightly problems. By testing on a variety of displays and resolutions, you can see if your web site colors shift in undesirable ways, and then adjust your images, your CSS, or both, to eradicate any problems. For example, you may have a logo image that blends seamlessly against your site header’s background color on one monitor; however, you may find the two elements appear in different shades on another display.
New flat-panel LCD (liquid crystal display) monitors tend to be brighter and crisper than CRT (cathode ray tube) displays and older LCD displays; images generally appear lighter on Macintosh computers than on Windows PCs, due to the different gamma settings used. Lower-cost laptops are inclined to sacrifice accuracy in color reproduction.[7] Color displays on PDAs and cell phones are even less predictable, and if your web site is targeting alternative device users, keep in mind that plenty of older PDAs with black-and-white displays are still in use.

Using Color to Enhance Functionality
As well as creating a serene browsing experience for your visitors, color can be used to enhance the functionality of your web site. The following checklist provides pointers on how best to use color to improve the functional aspects of your site.
✓
Use color to direct user focus.

Use color to focus user attention on certain sections on a page. For instance, you might use red to highlight a sale item, or apply a yellow NEW! icon to attract attention to new articles, products, or services. Yellow is the brightest and most reflective of all the primary colors, while red causes the most active physiological responses. While yellow and red command attention, it’s best use them judiciously—too much of these bright colors can be exhausting and distracting.[8] Brighter colors stand out from darker colors, warm colors stand out more from a cool background,[9] and saturated colors (intense, pure colors to which no gray has been added) stand out more than their less-saturated counterparts.
The NEW! icon in Figure 6.1 "Using color to direct user focus" shows how we can draw attention to new items in stock through the use of color and bold text—even in this grayscale example. The shaded background and bold text attracts our focus.
Figure 6.1: Using color to direct user focus
This NEW! icon is achievable with a mixture of text and CSS, which eliminates the need to create a graphic, and helps to minimize page load times and bandwidth usage.
✓
Use colors consistently to avoid user confusion.

Use colors consistently throughout your site. For example, if you choose dark red for your main headings and dark blue for article titles, don’t decide to use dark blue for main headings in a particular section, and some other color for the titles of articles displayed there. Consistency reduces confusion. Perhaps your color scheme uses a different color for each section—blue for electronics products, and green for software, for example. That’s fine. If, in the blue section, you use navy blue for the main headings, and in the green section, you use green for the main headings, don’t diverge from this standard. Stay consistent within the color scheme you’ve created.
See Figure 6.3 "Using color to create visual cues" through Figure 6.5 "Headings: creating visual cues with color, size, and font" below for examples of color schemes in action. And don’t forget that your site will be easier to manage and maintain if you use CSS to designate the colors displayed on your pages.
✓
Use color to distinguish hyperlinks from regular text.

Designate a color for styling hyperlinks that makes them stand out from surrounding text. Make sure you underline hyperlinks as well, especially within your text content, so that you’re not solely relying on users to distinguish the color in order to identify the links. I sometimes style hyperlinks bold, to make them even more obvious.
✓
Avoid using purple to style unvisited hyperlinks.
✓
Avoid using blue to style visited hyperlinks.

Browser defaults use blue for unvisited links and purple for visited links, so if you switch these colors, it’s very likely that you’ll confuse your site visitors.
✓
Where possible, use CSS, instead of graphics, to create web site colors.

You can use CSS for a multitude of web site color purposes. Using CSS instead of graphics reduces page load times and bandwidth use, and results in a web site that’s infinitely easier to maintain than one created without CSS. For example, if you use CSS to create borders around photographs, instead of adding those borders to the actual photographs themselves, you’ll be able to change border colors and styles for photographs site-wide, simply by changing the CSS rules for the photograph borders. As we saw above, Figure 6.1 "Using color to direct user focus" depicts a NEW! icon created using CSS instead of a graphic, saving bandwidth and page load time. Figure 6.2 "Using CSS to apply colors and style to headings" uses CSS to add color and style—and a drop cap—to the headings on a page.
Figure 6.2: Using CSS to apply colors and style to headings
You can also use CSS to create design accents, to color particular web site functions, and to designate media-appropriate colors for specific media.[10] For additional checklists and tips on CSS and web site design, see Chapter 9 "best practices/standards coding World Wide Web Consortium (W3C), standards/recommendations standards, W3C standards/recommendations coding, best practices/standards Best Coding Practice: W3C Recommendations and Standards" and Chapter 13 "design Design".
✓
Perform a “wireframe” test to ensure that you’re catering for various user preferences and disabilities.

Users can customize their browser settings to turn off colors, alter font sizes, and select fonts; they can also choose to use their own style sheets. Rather than being alarmed by this fact, embrace this user-friendly flexibility by ensuring that your web site design makes sense in black-and-white—especially its navigation and other important functions. Test your design without color to make sure it’s still user-friendly and works well.
Many graphics programs offer a grayscale feature, which makes checking your design layouts in grayscale easy to do. If you need to, simply take a screenshot of the web page in question, then open the screenshot image in your graphics program. Alternatively, in Photoshop CS, select Image > Mode > Grayscale from the menu bar to access this functionality. If you’re using your design files, create a duplicate copy first!
On Mac OS X, you can switch your entire display to grayscale: click on System Preferences > Universal Access > Set Display to Grayscale. This feature makes it easy to check design layouts and test web site functions in grayscale.
Windows users can test web pages in grayscale using a free online testing tool called the Colorblind Web Page Filter. Also, check to see if your particular display has grayscale settings.
Tip: Designing in Grayscale
Try creating your initial web site design and page layouts in grayscale. Graphic designers learn in school to create initial designs and layouts in grayscale because it’s important that the designs have impact even without color. Taking this approach for your site design and page layouts will help ensure that your web site functions, and that visual cues won’t depend solely on color in order to make sense.[11] Designs that work well in grayscale are solid—though color will enhance them, they won’t depend on color in order to succeed.
If you’ve created wireframes to plan your site’s information architecture, it’s a good idea to use those wireframes to create your web site design and page layouts. For more on information architecture, wireframes, and design, see Chapter 7 "information architecture Information Architecture" and Chapter 13 "design Design".
✓
Use color to emphasize the organization of information and provide visual cues.

When you use color to organize information, you have the opportunity to give your web site visitors subtle cues that make your web site easier to navigate and your pages quickly comprehensible. For example, the major sections of some web sites are organized by color. Amazon.com uses green for its Books section, blue for Electronics, and dark red and light-orange for the Today’s Deals area. Amazon.com changes some of these section colors on its local sites to suit the cultural color preferences of those sites’ specific users.
Figure 6.3: Using color to create visual cues
Figure 6.3 "Using color to create visual cues" shows how colors have been used as visual navigation cues on the MyByz site. You can use color as a visual cue for headings—try using different colors for headings and subheadings, as well as differentiating them using the font sizes and page layout, as shown in Figure 6.4 "Headings: creating visual cues using color and size".
Figure 6.4: Headings: creating visual cues using color and size
In Figure 6.5 "Headings: creating visual cues with color, size, and font", the main heading uses a different font from that used in the article title heading, providing an additional visual cue.
Figure 6.5: Headings: creating visual cues with color, size, and font
These text effects are easily achieved using CSS.
✓
Don’t rely solely on color to communicate important visual cues.

Your use of color in the organization of information should enhance the user experience; the user experience should not depend upon it. When your web site doesn’t solely rely on color to communicate important visual cues, your web site will be more device-independent, and therefore more usable. This approach also ensures that visually impaired site visitors can use your web site easily.
As an example, consider Amazon.com’s navigation. It doesn’t depend solely on color in order to be usable or understandable; nor does the navigation system for the fictional MyByz.com site shown in Figure 6.3 "Using color to create visual cues". The navigation makes sense in grayscale, which means that it will be accessible by those with color blindness and other visual disabilities.
Using Color to Enhance Readability
✓
For best legibility, use colors that provide a strong contrast between the page background and the text.
✓
Use solid, light-colored backgrounds behind dark-colored text for page content areas.

Black text against a solid white background provides the best contrast and is typically the easiest text to read.
✓
Avoid displaying patterns, textures, and colorful backgrounds behind text.


Summary
This chapter identified the important considerations affecting the best use of color on your web site. It explained how to set up a color-friendly work environment, provided guidelines to help you choose a color scheme for your web site, and showed how best to use that color scheme to enhance the functionality of your web site. I also included references to color wheels and other helpful tools that will prove very valuable as you work with color on your web site.
Well, that’s the fun stuff taken care of! Let’s move on to what are generally seen to be the more “serious” details (though I think they sound more serious than they really are!), starting with information architecture

TAG: SEO , Search Engine Optimization