Color Blind Test your Web Application

Discussion


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?

Steps

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.

Summary


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 rubyplus.com to make it friendly for color blind people.


Related Articles


Ace the Technical Interview

  • Easily find the gaps in your knowledge
  • Get customized lessons based on where you are
  • Take consistent action everyday
  • Builtin accountability to keep you on track
  • You will solve bigger problems over time
  • Get the job of your dreams

Take the 30 Day Coding Skills Challenge

Gain confidence to attend the interview

No spam ever. Unsubscribe anytime.