We all create website with lots of funky colors and images to make site look cool & energetic. Do you know that certain percentage of your website users are also color blinds, means they cannot differentiate between few colors. Almost 10% of male users experience color vision deficiency (compared with 0.4% of females).
Its a myth that color blind don't see colors and they see only black and white. But fact is the most common form of color blindness abnormalities is characterized by an inability to distinguish between Red and Green hues.
For Example: On the image on right, if you could able to read the number "26" that means you are not color blind. Few specific type of color blind can't read 2 and some can't red 6 or few color can't see any number at all. This Plate isdesigned as a Test for Colour-Deficiency by Shinobu Ishihara M.D. which is the accepted standardized color blindness test.
Like wise you should be in a position to read the numbers 12 & x from below images that means you are fine. But in this world 10% of male population can't read this. Are you surprised about this fact? But there is also another interesting fact that only less than 1% of women will have color blind deficiency.
How to check color blind test for your website
First of all lets learn about different types of color blindness available. There are major three defeciencies - Deuteranope, Protanope & Tritanope. Its very important to check for all these three types of deficiencies for your website.
 | Deuteranope (a form of red/green color deficit) |
 | Protanope (another form of red/green color deficit) |
 | Tritanope (a blue/yellow deficit- very rare) |
Usually color blind test for websites are done with the help of tools. There are various tools available some are free & some are paid.
Before looking into tool, what has to be checked and what has to be analysed:
- Check the Color contrast between the background color and foreground text
- Run Vis check or equivalent softwares to run the HTML or URL
- Take a black and white print out of the website and try to check the contrast and readability.
- Check for detailed alternative text. Alternative text is called as alt text in HTML.
Best part is if you do for 5 to 6 pages, you will easily come to an idea of which will work well and which will not.
Lets see the free Color blind tools:
Vischeck is one of the leading free software which does the job easy. Go to
Vischeck.com and download the software. Easy easy to learn and use. In Vischeck you can also provide your URL to check the compliance of your web page.
Etre has color blind
stimulator. Provide the URL & it will give the results. Its also equally as good as Vischeck.
Juicy Studio is another website to check the color contrast. Provide the hexa decimel value you are using and Juicy Studio online tool will provide you the recommendations.
Access Keys also does the same job as Etre & Juicy Studio, but it has the option of seeing the detailed report or only errors.
Colorfilter in wickline provides different ways of filtering and its pretty detailed. And its little time consuming and worth spending.
Lift from freedom speech is the best software from Nielson Norman Group.
Tags:
accessibility
,
accessibility problems
,
design ideas
