Wild Apricot Blog

View: Tags | Archives

Free Online Color Testing Tools for Accessible Website Design

Lori Halley 22 April 2008 4 comments

Accessible websites are the fast-approaching future of web design, and accessibility is already the law in many jurisdictions. We're talking about websites whose designs don't create artificial barriers for people of differing abilities, or those with limited access to top-end technology. Color choice is just one aspect of accessible web design -- but it's a good place to start looking at your own website's accessibility status.

Color Vision color blindness color palette testing tool

Could an aesthetic choice about your site's appearance be keeping a large group of visitors from using it?

An estimated 10 million males in the United States alone have some form of color blindness, for example.
Worldwide, 1 in 12 people have difficulty in telling certain colors apart -- most commonly a red/green color blindness.

That's one key reason why traffic signal lights are consistent in having the red light on top, yellow in the middle, and green at the bottom. Traffic lights are designed so that they don't rely on color alone to deliver the information about when to stop and go -- the position of the light reinforces the message, because it's just too important to risk a breakdown in communication.  Could your website take a lesson here? 

Consider, too: How many of your readers, members and clients may have failing eyesight as a consequence of accident, illness, or simply of age? Text size is adjustable in most browsers now, unless the web designer unwisely overrides that feature with his code -- but low-contrast colors can shut the door on a visually impaired reader, or one who is restricted to older technology, small screen sizes or low-color monitors. 

Even those who don't have low vision conditions can suffer eyestrain from long hours of peering at a computer screen, and may be quickly put off by a hard-to-read page.

The W3C Evaluation and Repair Tools Working Group's current guidelines for accessible websites makes two recommendations for tackling the web design color question:
1. Ensure that all information conveyed with color is also available without color, for example from context or markup.
2. Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen.

Traditionally, underlining was used to indicate links in online text, but that's no longer always the case. When a site relies entirely on color change to signal a hyperlink, however, that may cause problems for those with low vision. Remove the color and you've removed some key information about how to navigate the site and where to click to perform the desired tasks.

Readers with aging eyes or otherwise impaired vision may need a strong contrast between the text and background colors. Black on white offers the greatest degree of contrast, and the minute we begin to introduce other colors, the contrast will drop. A thoughtful web designer will test any planned color scheme to find a happy medium between accessibility and aesthetics.

GrayBit is a free online accessibility testing tool that will show you how any full-color web page looks in gray-scale, for a clear sense of how much contrast the page offers. Try a view of your own website in shades of grey to see how it stacks up for contrast between text and background colors.

It may be useful to show a gray-scale version to someone who is not familiar with the layout and operation of your site, and watch quietly while they try to find their way through it. Does the linked text look like it's meant to be clicked? Are your images reduced to a blur? Do charts and graphs become unreadable without color to give meaning to the parts? Take a good look at your organization's logo, while you're at it!

If the results suggest you'd be well-advised to consider a change of color scheme, Cal Henderson's Color Vision is a free online tool for checking how different text/background color combinations would look to people with various types of color blindness. Similarly, Vischeck will simulate how web pages and images appear to the color blind, and you can use Vischeck online or download software to run it on your own computer, at no charge.

Finally, if you're serious about understanding and working toward more accessible web design, Accessibar for Mozilla/Firefox and the Web Accessibility Toolbar for IE are useful toolbars for quickly checking web pages for a range of accessibility issues, by changing the display settings on your web browser.

In many cases, a quick edit of the CSS style sheet that sets the website's colors may be all it takes to make your site more accessible to a significant part of the world population. Something to think about?

Lori Halley [Engaging Apricot] Lori Halley [Engaging Apricot]

Posted by Lori Halley [Engaging Apricot]

Published Tuesday, 22 April 2008 at 2:49 AM


  • Damien Oh said:

    Monday, 21 April 2008 at 8:51 PM

    Great information and useful links. I am currently revamping my theme for one of my older website and the information you provided here really help a lot. Thanks.

  • Lori Halley [Engaging Apricot] Lori Halley [Engaging Apricot]

    Lori Halley [Engaging Apricot] said:

    Wednesday, 23 April 2008 at 3:26 AM

    That's terrific, Damien - I'll look forward to seeing what you do with your site!

  • Dave Tinker said:

    Friday, 25 April 2008 at 11:41 AM

    Accessibar for Mozilla/Firefox doesn't work on Firefox version 2.x

  • Lori Halley [Engaging Apricot] Lori Halley [Engaging Apricot]

    Lori Halley [Engaging Apricot] said:

    Friday, 25 April 2008 at 12:28 PM

    Dave, Accessibar is working fine for me on Firefox 2. Is it possible that anti-spyware software might be blocking your installation, or something of that nature?

Sorry, this blog post is closed for further comments.

Search: WildApricot.com 

About results ( seconds) Sort by: 
Sorry, an error occured when performing search.
Scroll to top