How to Design Web Accessible Pages for the ColorBlind

How to Design Web Accessible Pages for the Colorblind

WEBSITE DESIGN & WEB ACCESSIBILITY FOR THE COLORBLIND

Have you ever thought about how many people are visiting your website and can’t use it for one reason or another? Well, this number might be higher than you think. If you are truly looking to create a web accessible site, then you need to take color impaired visitors into consideration. For colorblind individuals, the wrong color combinations on a website can make navigation and interaction impossible. However, don’t panic, there are a few simple rules that you can follow to design a website that is functional for the colorblind without giving up any of your website’s favorite design aspects.

WOW! 1 OUT OF 12 VISITORS TO MY SITE ARE COLORBLIND?!

I know what some of you might be thinking. Why should I create a website for a small group of people? You might be surprised to find out that colorblindness isn’t as rare as you think it is. This means that one in twelve of your visitors might be coming to your site with some sort of color disability. Just think how many visitors and customer conversions that you might lose if your website is not accessible and usable by the colorblind.

MORE REASONS WHY WEBSITE DESIGN FOR THE COLORBLIND IS IMPORTANT

However, if this doesn’t sway you, here are a few more reason why you might want to consider designing your website with the colorblind in mind:

(1) An accessible website is more likely to be ranked well with the search engines than an inaccessible website.

(2) By designing a colorblind accessible website, you are also targeting PDAs, 3G phones, and similar technological devices that are used for web access.

(3) It is seen as more professional to have a website that doesn’t exclude the impaired or disabled.

(4) Equal access to everyone regardless of their abilities is always a nice things to do.

4 KINDS OF COLORBLINDNESS TO CONSIDER WHEN DESIGNING FOR THE WEB

Unfortunately there isn’t only one kind of colorblindness to take into consideration when designing …It would be much easier if that were true. There are three different color vision impairments and they are explained below.

(1) Trichromat Vision
“normal” color vision, uses red/green/blue color receptors … this is the kind of vision that 11 out of 12 visitors have.

(2) Anomalous Trichromat Vision
Anomalous Trichromat vision, uses three color receptors but one pigment is misaligned

(a) Protanomaly Vision: reduced color red sensitivity
(b) Deuteranomaly Vision(most common): reduced color green sensitivity
(c) Tritanomaly Vision: reduced color blue sensitivity

(3) Dichromat Vision
Dichromat vision, uses only 2 of the 3 visual pigments - red, green or blue is missing

(a) Protanopia Vision: unable to receive color red.
(b) Deuteranopia Vision: unable to receive color green.
(c) Tritanopia Vision: unable to receive color blue.

(4) Monochromat Vision (can see only one color)

HOW TO DESIGN WEBSITES FOR THE COLORBLIND & COLOR COMBINATIONS

As web designers, we are all used to having the entire palette of colors to choose from. Designing a website for the colorblind won’t limit your color palette at all, however, you will need to watch out for the color combinations that you do use. Learning what color combinations are “no-no’s” is a great place to start, because without this you will get nowhere. Basically, you need to remember to stay away from Red and Green Combinations. Although most people see Red and Green as contrasting, those with Anomalous Trichromat Vision Colorblindness (the most common type) will not be able to tell these colors apart. This also goes for combination with variations of green and red, including colors such as purple and orange.

DESIGN CONTRAST IS IMPORTANT WHEN DESIGNING FOR THE COLORBLIND

It is necessary that you prioritize your website’s content to find the most important content. The more important the content, the more necessary that it will be to make these items colorblind-safe. The most important aspects of a website are navigational text (includes image and button text), menus, headers, and subheaders. 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. However, I suggest black and white as the best possible contrasting colors for these critical page elements. Also, with articles and other large format pieces of copy, using dark text on a white background is essential in my opinion. Maybe I’m getting old, but I am sure that we have all read an article online and landed up with a huge migraine headache because the yellow text on blue background was too much for our eyes to take. If you don’t want to use black and white for text, then after laying out the page, ask yourself, “Does this text Contrast Well With the Background?!” 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.

A website that uses a monochromatic look splashed with color is Adobe.com. Adobe’s website is very clean, professional, and most importantly beautiful.

If you aren’t sure if a page is contrasted enough, one good tip is to desaturate your website (save first) 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. However, an easier way is to use these tools that I found on the net. The first one is The Web Design Evaluation Tool … This free online utility allows you to see the 3 different ways that your page can look depending on the viewer’s vision and color disability. Another tool that I found useful was the Colorblind Web Page Filter … The way that it works is that you type in the URL and then choose some options that describe different types of color blindness. Then this filter shows you what the page will look like to the colorblind viewer. Of course I had to try out these cool tools. I had a lot of fun playing around with the different ways that my website looks when changing the filters. Take a look at what AllWebDesignResources.com looks like in different colorblind filters. You can click on the images to go to see the pictures bigger or to play around with the colors yourself.

Deuteranomaly Vision	Monochromatic Vision	Protanomaly Vision

I already know what type of comments I will get about this article. Can you guess what I am going to say? Rachel … Why haven’t you followed the rules of this article? Well guys, I am having a hard time figuring out this blog software at the moment. I am used to using HTML to publish articles and I haven’t quite figured this bad boy out yet ( I only downloaded it last night ) As soon as I can, I am going to switch from this template to a more reader-friendly version. Does anyone have an opinion on a WordPress Theme / Skin / Template?

Here are Some Other Colorblind Design Links that Might Help You:

Consider The Colorblind
Article describing some of the problems colorblind web viewers have when
viewing web sites and why the web designer should care.

Colorblind Web Page Filter
A colorblind web page filter. You type in the URL and choose some
options that describe different types of color blindness and the filter
shows you what the page will look like to the colorblind viewer.

Web Design Evaluation Tool
Make sure that when you are designing for the web that you take into
account the color disabled. This online utility allows the web designer
to see 3 different ways that your page can look depending on the viewer’s
vision & color disability.

Color Theory for the Color Blind
article for colorblind web designer. Starts with some general
information about color blindness, and then continues by providing
information on color theory and advice for color blind people who want
to do web design.

Colorblindness Information and Online Tests
A great site providing a great deal of information about color blindness.

Colormaps for Checking The Readability for Dichromats
This site provides a comparative color palette showing how the 256 color
palette looks to people with normal vision and two versions of color
blindness.

What is Colorblindness and The Different Types
Article describing the different types of colorblindness

Are Your Web Pages Color Sensitive?
About’s article on colorblind friendly website design. This article will help
you understand what is necessary to design a colorblind-friendly
webpage design.

VisCheck
Vischeck is a way of showing you what things look like to someone
who is color blind. You can try Vischeck online- either run Vischeck
on your own image files or run Vischeck on a web page. You can also
download programs to let you run it on your own computer.

How Do Things Appear to Colorblind People?
Many people might be surprised to find out that being colorblind doesn’t
mean that you just see black and white. Take a look at this article to
find out what it is like to be colorblind.

Source: http://www.allwebdesignresources.com/webdesignblogs/graphics/how-to-design-web-accessible-pages-for-the-colorblind/