Whole Thinking

The world is so colorful and we have our eyes to experience and appreciate it.  How would the world be without color?  We take for granted the experiences that we share with color in our day-to-day life existence.

The colors that brighten our experience with things in life too are an important part of web designing.  It enhances and gives an image or a persona a beautiful extension.

But are you aware that there are few browsers that are unable to experience the world of color?  Are you aware that almost 8 percent of the male population and 0.5 percent of the female population have color blindness?

Color blindness is a hereditary disorder due to the abnormality in the cone cells situated in the retina of the eyes.  It means that 1 out of 20 visitors of your website would use the website with some amount of difficulty and probably in some circumstances would not be able to use your website at all.  Considering the importance of color in web design, this section of the population therefore cannot be ignored during web designing.  Imagine the number of visitors that you may lose if colorblind people cannot access it.  It therefore becomes imperative to make your browser “Color-blind friendly.”

You may reap quite a few brownie points as well by making your website Color-blind friendly.  It would make your website look professional that also gives the disabled or impaired equal opportunities to use and enjoy the site.  Consequently, your website will have a good ranking with the search engines as well.

Before making the website Colorblind friendly, it is important for you to first understand color blindness and the types of color vision impairments.

When a light particle, or photon triggers a cell (called a cone) situated in the eye we perceive color.  This cone emits a signal to the brain and informs the brain that it has received a trigger.  Each cone has in them pigments that react to three wavelengths of light, which is red, blue and green.  Normal people can match all the colors in the spectrum by the mixture of these three fundamental color reactors (red, blue and green). We therefore perceive stems the response of the cone cells in the retina to the different compositions of each wavelength of light.  For a color blind person one of these three cone cell color coding structures do not function well.  Almost 99 percent of color blind persons are unable to distinguish between red and green.

Let us now examine the kind of vision that your visitors will have:

1.    Trichromat Vision: It is a normal color vision that can receive triggers for red, blue and green color. Almost 11 out of 12 of your visitors will have such kind of vision.

2.    Anomalous Trichromat Vision: Your visitor having this kind of vision will have the three-color receptor capabilities but may have one of the pigments misaligned.

3.    Protanomaly Vision: Your visitor with this kind of vision will have problems to indentify the color red.

4.    Deuteranomaly Vision (common): Your visitor with this kind of vision will have problems to indentify the color green.

5.    Tritanomaly Vision: Your visitor with this kind of vision will have problems to indentify the color blue.

6.    Dichromat Vision: our visitor with this kind of vision will make use of only 2 of the 3 visual pigments that is red and green where blue would be missing.

7.    Protanopia Vision: Your visitor with this kind of vision will be unable to view the color red.

8.    Deuteranopia Vision: Your visitor with this kind of vision will be unable to view the color green.

9.    Tritanopia Vision: Your visitor with this kind of vision will be unable to view the color blue.

10.  Monochromat Vision: Your visitor with this kind of vision will be able to view only one color

The unpredictability of these vision problems makes it quite difficult to simulate the color blind browser.  It does not, however, mean that these limitations cannot be overcome.

How to design for colorblind browsers?

Designing a website that also encompasses colorblind persons does not mean that you limit the use of colors in your website.  It only means that you need to use the color combinations for the website rather carefully.  We can learn below what color combinations could be avoided or used more effectively.

As a thumb rule you should never use the red and green combination together as it would spell disaster for a color blind person who has Anomalous Trichromat Vision.  Further, this rule also applies for combinations that have variations of green and red i.e. colors such as purple and orange.

Some tips to make your website color blind friendly:

(1)  Once you have established the content of your website, which is very important, it will become easier for you to make such important content color blind friendly.

(2)  Your text, which may be navigational such as your image and button text, menus, headers, and sub-headers, must be clear and high in contrast.  High in contrast means that these items should be in black and white or opposite ends of the color saturation pole.

(3)  You can make use of colors around the page surrounding the main content so that it does not take away from the enhancement of the website and at the same time is color blind friendly.  Also important to remember here is that while making use of large format pieces of copy make use of dark text on a white background.

(4)  In case you are unsure of the contrast, you can use Fireworks or Adobe Photoshop to desaturate your website.  These programs will help you to know if the images continue to have their impact.  Desaturation means where all color is removed from the image.  With desaturation, you will know exactly whether a picture has an impactful contrast and a colorblind person can view it.

(5)  Never use a green text on a yellow background because a dichromatic person when he sees green both red and green cones are activated whereby green objects appear yellow (since red and green make yellow).  Thus if you have a green text on a yellow background a dichromatic person will see all in yellow and will not be able to read it.

(6)  Make use of Vischeck online.  It is a program whereby you may view how a particular design would appear to a colorblind person. This program can be run of your own image files or on a web page.  Further, you can also make use of Website Design Evaluation Tool, which is a free online utility, which allows you to view the page in 3 different ways depending on the visitor’s vision and color disability.

Conclusion:

Having considered all of the above you must have noticed how important it is to take into consideration Color-blind browsers while designing your website.  Moreover, it now also forms a large part of the global community.

Original content by Doug’s Web Design LLC / Whole Integration

San Diego Website Design, Los Angeles Website Design, Orange County Website Design, Murrieta Website Deisgn, Temecula Website Design, Orange county website design companies, OC Website Design Companies, Los Angeles Website Design Companies, San Diego Website Design Companies, Orange County Web Design, Webmaster, Maintenance, Content writing, Color Blind Website Design, Web Design, Corporate web design

Close Bookmark and Share This Page

Save to Browser Favorites / Bookmarks

Ask backflip blinklist BlogBookmark Bloglines BlogMarks Blogsvine BuddyMarks BUMPzee! CiteULike co.mments Connotea del.icio.us

Digg diigo DotNetKicks DropJack dzone Facebook Fark Faves Feed Me Links Friendsite folkd.com Furl Google

Hugg Jamespot Jeqq Kaboodle kirtsy linkaGoGo LinkedIn LinksMarker Ma.gnolia Mister Wong Mixx MySpace MyWeb

Netvouz Newsvine oneview OnlyWire PlugIM Propeller Reddit Rojo Segnalo Shoutwire Simpy Slashdot Sphere

Sphinn Spurl Squidoo StumbleUpon Technorati ThisNext Twitter Webride Windows Live Worlds Movies Yahoo!

Email This to a Friend

Copy HTML: 

 If you like this then please subscribe to the RSS Feed.

Powered by Bookmarkify™

More »

Bookmark It

Hide Sites