Color Blind Test your Web Application


Did you know that about 8% of the male population is color blind? Why eliminate that much of a potential market for your Web apps?


Step 1

SEE Chrome plugin allows you to see what your website looks like to a color blind person. Install it.

SEE Chrom Plugin

Step 2

Change the different settings for the Color blindness to test different pages on your site.

Ruby Plus

Test Protanomaly

Ruby Plus

Test Deuteranomaly

Ruby Plus

Test Tritanomaly

Ruby Plus

Test Achromatopsy

Ruby Plus

Step 3

Make any adjustments to the theme to make it accessible to color blind people. For instance I changed my theme for code syntax highlighting from Base16 to ThankfulEyes theme. In app/assets/rouge.css.erb, I changed the theme:

<%= Rouge::Themes::ThankfulEyes.render(:scope => '.highlight') %>

Finally, get feedback from color-blind people to double check that your pages are clear for them. Tip by Robert Pankowecki: For maps and diagrams use colors from Color Brewer.


Your web app should have enough contrast between the background and foreground among in addition to the color choices. Use tools to test your site for color blindness and make it accessible. Special thanks to Ron Huppert for providing me feedback on to make it friendly for color blind people.

Related Articles

Software Compatibility Best Practices

I spoke to some of the most talented and experienced software developers. I have created a guide that is filled with valuable insights and actionable ideas to boost developer productivity.

You will gain a better understanding of what's working well for other developers and how they address the software compatibility problems.

Get the Guide Now