Tuesday, August 23, 2011

Improving your website's user experience for the color blind


One in twelve kids have food allergies. One in twelve people worldwide live with either chronic hepatitis B or C. One in twelve fans drive drunk from the ballpark.
Though those statistics are worrisome, there is nothing you can do to improve the user experience of your website for these groups of people. However, for the one in twelve people in the U.S.—mostly men—who suffer from a form of color blindness, there is something you can do when developing your website. In addition to better serving your users, your efforts to make your website more user friendly will pay off in other ways. For example, accessible websites are more likely than inaccessible websites to be ranked well in search engines.
Designers do not need to limit their palette to take into consideration the needs of colorblind users. Follow these simple tips to improve accessibility and create a website can be usable by those who are color blind.
  1. Watch how you combine colors.
    Avoid combining red and green. This is especially important in navigational text (such as menus, heads, and subheads). High contrast pairings, like black and white, are ideal for these kinds of important, essential pieces of copy.
  2. Avoid using color coding exclusively.
    Relying only on colors for indicators in your design can mean big trouble. Incorporate other cues (underlining, symbols, bold, and more) to help make designations of change.
  3. Test your page.
    To quickly simulate readability and informally test to see if your website uses high contrasting colors, take a screen grab and convert it to grayscale to desaturate your image. The free, online utility called Colorblind Web Page Filter is another useful tool for analyzing the usability of your website. (Note: the Colorblind Web Page Filter destroys web fonts and some uses CSS in its simulations. Be prepared to view a jumbled-layout version of your website. This tool is good for color simulation, but it doesn't handle designs particularly well.)
  4. Think about your copy.
    If you have directional copy on your website, it's best not to use cues like, "Click on the green button" which may not appear to be green to all users.
  5. Encourage feedback from your users.
    Make sure you have a contact form on your website to collect ideas from your users. You can't fix accessibility problems if you aren't aware they exist.

Joy

About the author | J.O. Miller

Joy is the creative director at TBH Creative and helps companies use their online communications to build, design, and manage their brands. She likes to blog about latest trends, social media, conferences, and share tools.

View more posts by Joy
 

Subscribe to this blog