Web Design: Accommodating Color-Blind Browsers

Without color we would live a dull existence. Imagine gazing into a grey sky or devouring a colorless chocolate cake? In the same manner that color bears great significance in our daily lives, so too does color play an important if not crucial role when designing a website. Color enhances, completes and gives a much needed presence to the image or persona of a website.

Yet, there are browsers who are not able to view the world in full-blown color…

Approximately 8% of males and 0.5% of females have a deficit in their color vision, due to an inherited abnormality in the cone cells of the retina. It’s unwise not to take these browsers into account as their special needs could mean that 1 out of 20 visitors might not be able to use a website at all or with great difficulty. This greatly depends on whether the website in question is “Color-blind friendly”. Text might be illegible and images unrecognizable. Consider the amount of visitors and customer conversions that you might lose if your website is not accessible and usable by the colorblind.

It is seen is considered professional, and stands your company in good stead to establish a website that doesn't exclude the impaired or disabled. After all, an accessible website is more likely to be ranked well with the search engines than an inaccessible website.

There are three different color vision impairments to take into consideration.

Color is essentially perceived because a light particle, or photon, triggers a cell in the eye which is called a cone. The cone sends a signal to the brain that it has received a trigger. Each kind of cone is responsible for sensing a range of wavelength thus centering on red, green, or blue. Combinations of these cones fire at different intensities to produce the spectrum of colors in various degrees of brightness and saturation. Sometimes the instructions for the cones are "wired" abnormally, causing the cones to react to a different range of light. Ninety-nine percent of color-blind people have trouble distinguishing between red and green.

•Trichromat Vision:"normal" color vision, uses red/green/blue color receptors ... this is the kind of vision that 11 out of 12 visitors have.

•Anomalous Trichromat Vision: Anomalous Trichromat vision, uses three color receptors but one
pigment is misaligned

•Protanomaly Vision: reduced color red sensitivity

•Deuteranomaly Vision (common): reduced color green sensitivity

•Tritanomaly Vision: reduced color blue sensitivity

•Dichromat Vision: Dichromat vision, uses only 2 of the 3 visual pigments - red, green or blue is missing.

•Protanopia Vision: unable to view color red.

•Deuteranopia Vision: unable to view color green.

•Tritanopia Vision: unable to view color blue.

•Monochromat Vision: (able to see only one color)

This unpredictability makes it hard to simulate the color blind browser. However, there are ways and means to ‘get around’ these limitations.

Designing for color-blind browsers

Although designing a website for the colorblind will not limit your color palette, you’ll need to be wary of the color combinations that you use. Learning what color combinations not effective is a great place to start.

As a rule of thumb, do away with Red and Green Combinations. Although most people see Red and Green as contrasting, those with Anomalous Trichromat Vision Colorblindness will not be able to tell these colors apart. This also goes for combinations with variations of green and red, including colors such as purple and orange.

•It is essential to establish the most important content. The more important the content, the more important it is to make these items “Color-blind friendly”.

•Navigational text which includes image and button text, menus, headers, and sub-headers need to
be clear. Make sure that these items are very high in contrast. This means that you should either make these items black and white or opposite ends of the color saturation pole.

•When using large format pieces of copy, using dark text on a white background is absolutely essential. Use as much color as you want in the surrounding parts of the page, as long as it doesn't take away from the contrast of the text.

•If you aren't sure if a page is contrasted enough, desaturate your website in Fireworks or Adobe Photoshop and see if the images still have an impact. Desaturating the image will remove all the color from the image and this way you will be able to tell if the image has enough contrast without color to be seen.

•When a dichromatic person sees something green, both the red and green cones are activated. Since red and green make yellow, green objects appear yellow. A site that contains green text on a yellow background causes both the text and the background to appear yellow, making the text invisible. A dichromatic person with green cones shifted toward the red will also see the green as more yellow.

•Use Vischeck online which also allows you to see what a design would look like to someone who is
color blind. Either run Vischeck on your own image files or on a web page. The Web Design Evaluation Tool is also a free online utility that allows you to see the 3 different ways that your page can look depending on the viewer's vision and color disability.

Color-blind browsers form a huge part of the global community and therefore should be taken into consideration when designing a website.