“Color blindness” is defined as the inability to see certain colors the way most human beings do.
If you are interested to clearly understand how people with different color blindness conditions see colors, check out this simple tool and click through the color vision modes. More about color blindness forms and color contrasts can be found here.
It is impossible to quickly and clearly explain what color blindness feels like and how color blind people may perceive your website, but luckily it is possible to see it with your own eyes.
Here are a few very easy color blindness simulators to visualize color blindness for you.
See Websites as a Color-Blind Person
Colorblind Web Page Filter is an easy to use (yet sometimes slow) web-based tool that lets you browse the web to see it as if you were color blind.
Just give it your URL, choose the “coverage filter” (the filters are explained in much detail here) and click “Fetch and Filter!”.
Once the page is fetched through the filter, you will be able to see how a colorblind perceives the colors on it. You can click through the conditions to generate a new preview for each color blindness type.
Here’s how a user with the “normal” (usual) eyesight sees a page:
Here’s how a color-blind person sees the same page (according to the simulator):
If your page meets requirements and is found as color-blind-friendly, you can grab the page filter badge.
Another possible option for color-blindness simulating is Chrometric which is a free Adobe AIR application.
See Images as a Color-Blind Person
Apart from using the color-blindness simulator web browser above, try checking out either of the tools below that allow you to quickly preview any uploaded images using different color-blindness filters. It might be a good idea to use the below tools to:
- Preview any image you have created (like a logo you are going to brand your business with or an infographic you were thinking of publishing);
- Create a screenshot of your website home (or any landing) page and run it through the tools (this will make the web page test much quicker than with the web browser).
1. Colour Blindness Simulator: Just upload your image, choose the condition and run the test.
The tool will display both the image versions: for normal and for color-blind condition:
There will also be a lot of details on each condition below the result.
Limitations: You will have to make sure that your image is no larger than 100 KB, is 1000 x 1000 pixels or smaller and comes in jpeg in RGB format.
2. Coblis — Color Blindness Simulator: This one works similarly to the above one. There will be no side-by-side comparison with the initial image though. However this tool gives more freedom allowing you to quickly click through various color-blindness conditions and preview the resulting images:
Warning: Judging from the comments to the tool, it seems to be a bit inaccurate in processing some filters but the whole concept is quite clear.
Are there any other similar easy-to-use and easy-to-understand tools to help make your websites and designs more color-blind friendly? Please share them in the comments!
Further reading on making your (or your relatives’) life easier if you suffer various visual disabilities:
- 4 Tools To Make Web Pages Easier To Read For People With Poor Eyesight (Firefox)
- 7 Steps to Make Computers Accessible for the Elderly
- Easily Increase Firefox Address Bar Font Size
- How To Speech Enable Your Blog
Image Credit: John Machan (Fotopedia)