Thursday, February 7, 2008

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 - What All Web Design Resources looks like in colorblind for Deuteranomaly Vision Monochromatic Black and White Black White Grey ColorBlindness Anomalous Protanomaly Vision Impairment - What All Web Design Resources Webpage Looks Like When Deisgned for Anonmalous Protanomaly Vision Colorblind

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/

45 comments:

Kunal said...
This comment has been removed by the author.
SEO India said...

Fantastic blog! I don't think Ive seen all the angles of this subject the way you have pointed them out. You are a true star, a rock star man. You have got so much to say and know so much about the subject.

bala murugan said...

Wonderful blog & good post.Its really helpful for me, awaiting for more new post. Keep Blogging!

Website Design Melbourne

Alakmalak Technologies said...

Hello,
Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I'll be subscribing to your feed and I hope you post again soon.
website design india

Web Development | Software Development said...

Web Designing in India

madhuri said...

They are really great tips.Thanks for sharing.I actually enjoyed reading through this posting.

web design company

rgdevelopmentcompany said...

Thanks for this value able post. I have read all the things very carefully its really a helpful and effective post. I will definitely bookmark your blog.
Web Design Delhi

web design service said...

Awesome site. Thanks for sharing.

SyrupTechnologies said...

Web design India is the process that assists business to get them recognized all over the world. It helps clients to promote their business all over the world. It not only reduces promotional expenses of the businessman to invest on other promotional methods but it helps you to get global access by not going anywhere.
:-)

husband watch said...

Great blog post.

Web developer said...

You can learn to design web accessible pages fro better traffic

oclocksoftware said...

Really great tip on your post thanks for sharing. hire web design

Web Outsourcing India said...

You can learn to design web accieesible pages. Read to know more

Sonika Mishra said...

Nice blog thanks for sharing
web design and development company

Web Designing Company said...

Nice post thanks for giving good info ...

Web Designing Company

Gaurav verma said...

The information is very helpful and effective, that type of detail about custom web development is very informative. Thanks for sharing such a nice information Web Design India.

Website Designing said...

good articles
We are a website designing company in Delhi. We offer Website Designing and Development and SEO services work in very affordable prices. We have been working for the last many years.

Shaifali Ahuja said...

web design indiathis blog was very informatic thanks for this post.

fennel.infotech said...

such a informative articles. thanks sharing for useful blog.
We are a website designing company in Delhi. We offer Website Designing and Development and SEO services work in very affordable prices. We have been working for the last many years.

Shaifali Ahuja said...

Your blog was excellent. I am waiting for more to see in your blog.Web Design India

Kunaal Gupta said...

Very nice posting you create in your blog, I ever wish to read this type of topics about creative solution. We are web designing gurgaon company offer service to all over India.

webdesign india said...

I appreciate the ideas and this is very nice article and have great information, Thanks for sharing with us.
web design India

ASHESSH GUPTA said...

Nice post, I bookmark your blog because I found very good information on your blog, Thanks for sharing iso quality services

originativelogic said...

Good post good job. Best of Luck. Website Designing Company in Delhi

Web Design Belfast Northern Ireland said...

Excellent Blog !

Web Design Belfast Northern Ireland
SEO Belfast Northern Ireland
Logo Design Northern Ireland UK
Hosting Services Northern Ireland UK
Ecommerce Sites Belfast Northern Ireland
SEO Ireland UK
Organic SEO Ireland UK
Page 1 Google SEO Ireland UK
Performance Based SEO Ireland UK
No Risk SEO Ireland UK
Facebook Helpline Contact Number
Amazon Helpline Contact Number
Gmail Helpline Contact Number
Google Helpline Contact Number
Twitter Helpline Contact Number

Web Design Belfast Northern Ireland said...

Excellent Blog !

Web Design Belfast Northern Ireland
SEO Belfast Northern Ireland
Logo Design Northern Ireland UK
Hosting Services Northern Ireland UK
Ecommerce Sites Belfast Northern Ireland
SEO Ireland UK
Organic SEO Ireland UK
Page 1 Google SEO Ireland UK
Performance Based SEO Ireland UK
No Risk SEO Ireland UK
Facebook Helpline Contact Number
Amazon Helpline Contact Number
Gmail Helpline Contact Number
Google Helpline Contact Number
Twitter Helpline Contact Number

Naveen Kalra said...

Really very helpful and informative point.

Webxpert India is one of the best Website design and development company in Delhi, India which offers all types website design services such as Static, Dynamic, Template based, Ecommerce websites.

Web Development Companies Bangalore said...

Every quality web design companies should be expecting loyalty work from the each programmer and designer. Because then only they would build their business could make as high level in the market.
Web Development Companies Bangalore

Structured Cabling Installation said...

Fantastic beat ! I wish to apprentice even as you amend your web site, how could i subscribe for a blog site? The account aided me a applicable deal. I were a little bit acquainted of this your broadcast offered bright transparent concept

CCTV Installation Companies said...

I just got to this amazing site not long ago. I was actually captured with the piece of resources you have got here. Big thumbs up for making such wonderful blog page!

Acer Laptop Repair in Mumbai said...

I appreciate your information in this article. It’s smart, well-written and easy to understand. You have my attention on this subject. I will be back.Laptop Service Center in Vikroli East

Acer Laptop Repair in Bandra West said...

Hello, I have browsed most of your posts. This post is probably where I got the most useful information for my research. Thanks for posting, maybe we can see more on this. Are you aware of any other websites on this subject.Acer Laptop Service Center Bandra

Manish Web Desiner said...

It is really a good post. I would like to follow your tips for my website. It also will be beneficial to improve traffic.

Bulk SMS Marketing Services in Gurgaon said...

Thank you so much for all this, it was very helpful in many ways!!!!!

Zero Bulb said...

Thank you so much for the information's. We are the website designing in india

Kepran Infosoft said...

Ecommerce Development

Mahesh Sharma said...

I have read your complete post, and got much helpful information about web designing with html. eCommerce web design solution

Phoenix Infomedia said...

I found your blog very helpful as I was searching for this quite a long time ago. It will really help for those who are into website designing and development

1Solutions said...

Thanks for sharing such a nice information, it was very helpful.

Anonymous said...

Great stuff, thank you for sharing such an informative post. it's very useful for me. Keep posting.

ags auxano said...
This comment has been removed by the author.
Azhar Nisar said...

Thanks for the help, really appreciated for true tips. For best and cheap manual Seo services, Web designings. Must check Web Design Bangalore

Digital marketing service said...

Really very helpful and informative point. thanks for sharing.

Alex Joseph said...

Hopefully, I'll soon see my blog on here. Web Design jaipur

Bangalore Web Guru said...

That's wonderful stuff you've written up here. Been searching for it all around. Great blogWeb Designing Companies Bangalore | Website Designing Company Bangalore