The main purpose of your website is to convey information, whether that is the service you provide, office hours or price of your products. If a visitor can’t read or find the information then the website isn’t doing its job.

I have no visual impairment, so theoretically I should be able to read all content on the web. However, I find—and I’m sure other frequent web users notice—that there are some color combinations that you can barely glance at before your eyes scream at you to look away.

Multi-colored neon-text is especially difficult for me to read ( Neon Green Example). There just isn’t enough contrast between the text and the background for easy reading. If I squint I can read the colored text in the parentheses, but can you imagine having to read a whole page in this color. You can do it given time, but you certainly can’t scan through the text as easily as if it were black text on a white background.

In addition to the problems that an average user may face, you should also consider users that have a form of colorblindness. 8.4% of Americans have some form of color deficiency (8% men, .4% women). Even one of our employees at BWD is colorblind. That is a significant client base that you don’t want to alienate.

Color blindness is generally caused by altered or missing retinal photoreceptors. The most common form of colorblindness, Deuteranomaly, is caused by less sensitive green receptors. This results in people being unable to differentiate between red-green hues.

When asked to describe how he sees colors on the web our BWD employee said, “GREEN and RED dark enough look brown, but dark blue still looks blue… or purple.”

The most common problem color-blind user faces on the web is “Identifying things by color.” It’s common practice to identify a link within text using a different color. However, changing the color might not be enough for a colorblind user to realize the text is a link. The following website is a good example of how colorblindness affects usability of the site: http://www.bronners.com/.

The example is a Christmas site, so red and green are natural color scheme choices. On the home page is a block of red text with green links. A person with Deuteranomaly might have difficulty identifying the links without hovering over them.

Our coworker couldn’t identify the links in the second paragraph; red links in a block of black text. All he saw when he looked at this paragraph was a block of black text. He was also unable to identify the colors in the bolded paragraph (red and green), but he could tell there were two different colors. He explained, “The top one’s better, since it’s bigger and bold.”

The best way to avoid this type of problem is to mark links and important information with more than just color. Bolding or underlining links will usually do the trick. If you have an important announcement that you chose to highlight using the color red, you may want to bold, underline or mark it with an asterisk.

Below are some resources where you can check the color contrast of your website.

  • Sites that filter your website and simulate what a colorblind user may see (note the simulated result appears to distort the layout of your website. Focus on text readability rather than any distorted layout which is a software bug):
  • Snook Colour Contrast Checker
    Here you can preview how different colored text appears on different colored backgrounds. It will also let you know whether or not there is sufficient contrast between the colors.

Your site for the most part probably passes the colorblind and color contrast tests. However, you may have added an announcement in an eye catching color that isn’t necessarily the most readable color. If that’s the case, it’s a pretty quick fix to update the text color of your website. If you’re concerned about the readability of your website, contact BigforkWEB Development and we’ll make sure your content reaches your audience.

Additional information concerning color blindness and web accessibility:

Posted by on April 7, 2009. Read more articles about , or , , .

1 Comment

Leave a Reply