Pinterest Stumbleupon Whatsapp
Ads by Google

color blindness simulator“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!”.

Ads by Google

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:

color blindness simulator

Here’s how a color-blind person sees the same page (according to the simulator):

color blindness simulator website

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:

color blindness simulator website

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:

color blindness simulator

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:

Image Credit: John Machan (Fotopedia)

  1. Tina
    October 9, 2011 at 7:40 am

    Lucy,

    I see you still haven't received a response to your question. In case you are still looking for an answer, I recommend to re-post your question on MakeUseOf Answers. You will very likely receive a response within a few hours.

Leave a Reply

Your email address will not be published. Required fields are marked *