When designing a website one of the first steps is to select a color scheme. This is usually done before diving into other graphic design jobs such as creating a logo because the basic color decisions will affect many visual aspects of site design. Color design plays an important role in web accessibility, too. Put a leash on your graphic designer before they start work by requiring that your art comply with a few basic rules. If you select the right color palatte before you begin graphic design you will save money and get a better result.

There are many different kinds of color acuity problems, and about 15% of your visitors will have some type of measurable color acuity deficit. If color alone is used to convey information, people who cannot differentiate between certain colors and users with devices that have non-color or non-visual displays will not receive the information. When foreground and background colors are too close to the same hue, they may not provide sufficient contrast when viewed using monochrome displays or by people with different types of color deficits.

The Section 508 guideline on color is 1194.22(c): “Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.” This is a boiled-down version of the international WCAG standard.

WCAG Checkpoint 2.1 of the WCAG 1.0 requires that “all information conveyed with color is also available without color, for example from context or markup. [Priority 1]”

WCAG Checkpoint 2.2 requires that “foreground and background colour combinations provide sufficient contrast when viewed by someone having colour deficits, or when viewed on a black and white screen. [Priority 2 for images, Priority 3 for text]”

One of the related WCAG checkpoints that also has a big impact on color is in the structural design category, and also ensures accesibility by blind users: “When an appropriate markup language exists, use markup rather than images to convey information. [Priority 2]” The over-reliance on images to convey information leads to other complexity, such as the need to provide alternative text for blind users or users accessing the site via text-only interfaces.

Contrast must be great enough to ensure that people with visual impairments, including color blindness or limited visual acuity, can see the difference between foreground and background elements. This is very important for older people, because with age the cornea of the eye becomes less clear, developing a yellowing that changes the perceived luminance of color. It’s like wearing “rose colored glasses”, except they are yellow, and more like sunglasses. Aging eyes also are more likely to have cataracts, which can cause a wide variety of visual distortions and the web equivalent of “night blindness”. An easy way to test for contrast problems is to simply dim your monitor, which will simulate the effect of low light conditions.

I became sensitive to color blindness issues when I developed some software as a NASA subcontractor. The software module had to rated for spaceflight by rotating crews of astronauts and cosmonauts working on the International Space Station. We had to plan for the possibility that some of the users would be color blind. The solution was to let the user toggle the user interface color scheme to what they could see best. The limited-vision choices included a monochrome greyscale theme and a blue-white theme we called “Winter” (indicating an icy look, but a pun on the name of the project manager’s dog, “Winter”).

One of the most helpful web sites I’ve found for doing color design is colorschemedesigner.com, because it includes the option to analyze a proposed color theme by several different types of color blindness. Once you have developed a color set you like, you can let others review it by giving a link to your scheme. The links look like this sample: http://colorschemedesigner.com/#3351UaFNhw0w0.

Another great site is vischeck.com which lets you simulate what a person with color blindness sees when they visit your site.

If you are planning to put red text on a black background, forget it. The maximum contrast is between black text on white background (the easiest scheme for most people to read). There is a quantatative way to measure the contrast between two colors, by the way. You can read about the math behind the color contrast ratio and download a helpful testing tool.

Even if people can’t distinguish color at all, if contrast is high, shapes can still be seen. This is why icon-based interfaces can be very easy to use, so long as the icons differ from one another quite a bit and the pictures on the icons use colors that hold up when brightness goes down. Icon design that uses very different shapes for symbols or cartoons will be more easy to distinguish than icons that use subtle variations.

Have you designed a really cool color theme that addresses all of these issues, and still looks nice enough to get past a clueless senior exec on the approval chain? Leave a comment and let us know how you did it.