Main Page Content
Understanding Color and Accessibility
Rated 0 (Add your rating)
Log in to add a comment
(13 comments so far)
Want more?
- More articles in IA/Usability | Site Development | Visual Design
- More articles by ThomH
User since: January 31, 2005
Last login: January 31, 2005
Articles written: 1
Why color matters even more
We all know that color can make or break a site. But beyond eye candy appeal, color choices also impact usability and accessibility.
Even if it looks great at a glance, the color scheme doesn't work if many visitors can't easily find crucial information, use whatever services are offered, and effectively navigate the site. This could be up to 1 in 12 people, roughly 8% of the site's audience.
Fear not. We don't need to use only boring colors or limit our designs to imitations of Jakob Nielsen's UseIt. Once the problem is better defined, talented designers can come up with their creative solutions.
So with that goal in mind, let's review the research on color and accessibility—from theory and practice to testing and solutions.
WCAG 1.0 and 2.0 on color
Perhaps the best place to begin is with the WC3 Web Content Accessibility Guidelines (WCAG). Since WCAG 1.0 is the current recommendation but will soon be superseded by WCAG 2.0, the current working draft, let's take a look at both.
WCAG 1.0
For WCAG 1.0, the most relevant section is as follows:
Guideline 2.
Don't rely on color alone. Ensure that text and graphics are understandable when viewed without color. If color alone is used to convey information, people who cannot differentiate between certain colors and users with devices that have non-color or non-visual displays will not receive the information. When foreground and background colors are too close to the same hue, they may not provide sufficient contrast when viewed using monochrome displays or by people with different types of color deficits.
This seems perfectly reasonably and straightforward. But it would help to have a working definition of "sufficient contrast," particularly in regard to people with color deficits [i.e., "color-blind"]. Fortunately, we have just that defined below—no guessing or "does that look like sufficient contrast to you" required. But before treating 1.0 as done, let's also consider WCAG 2.0, and how it evolves from 1.0
WCAG 2.0
For WCAG 2.0, the most relevant sections are as follows:
Guideline 1.3 Ensure that information, functionality, and structure are separable from presentation.
Guideline 1.4 Make it easy to distinguish foreground information from background images or sounds.
Clearly, the suggestions in WCAG 2.0 are both stricter and more comprehensive. Whereas 1.0 emphasizes the screen, version 2.0 emphasizes the multi-device web: screen, print, handheld, aural, braille, embossed, projection, tty, tv, and whatever else comes along.
What both WCAG 1.0 and 2.0 require
For WCAG 1.0, we need both sufficient contrast and to ensure that text and graphics work without color. But for WCAG 2.0, everything—information, functionality and structure—has to (1) work without color; and (2) be "sufficiently contrasted" with (clearly distinguished from) any background.
So let's start with "sufficient contrast," particularly for people with color deficits. We need to get this right for both WCAG 1.0 and 2.0. Again, however, here we benefit from the hard work of other people.
Understanding "sufficient contrast"
Christine Rigden, a web design professional for BT Exact, explains the three kinds of color vision deficiency and provides color palettes along with plenty of how-to information. She even offers an outstanding PDF.
Although Ridgen comes close to explaining everything we need to know both simply and well, there are other excellent resources.
For a shorter but interactive version based on Ridgen's work (and some other references), Cal Henderson does a great job with Color Vision.
Likewise, Lighthouse International's Effective Color Contrast offers a simple and effective demonstration as to what works, what doesn't, and why.
Otherwise, for the person who wants even more information and has the science background, Thomas G. Wolfmaier's Designing for the Color-Challenged: A Challenge explains in detail the statistical occurrences of color vision deficiency, the finer points of Red-Green defects and Blue-Yellow defects, and so on.
Finally, for person who prefers hands-on learning, you've lucked out twice. The Net provides two excellent tools which simulate how sites appear to people with different types of color deficits.
Testing your design
Vischeck offers "sufficient contrast" testing for URLs and images. Additionally, at Vischeck the user can Daltonize an image. (Daltonize: "a digital image processing technique that can make print or video display more salient to color blind people without distorting the color balance to an unacceptable degree").
Similarly, the Color Laboratory also offers a Web Page Filter that simulates how sites will appear to people with different types of color deficits.
The good news
Between Ridgen to Wolfmaier, and with Vischeck & Color Laboratory, we have all the practical information, hard science, examples, and testing tools needed to establish whether or not a site has "sufficient contrast" for people with color deficits.
Furthermore, even commercial companies are developing solutions. VisiBone offers an inexpensive but very useful Color Card and Color Chart, both of which also show how the standard web palette appears to people with color deficits. Others offer free for download the Adobe Photoshop versions of the Protanopia (red-deficit) and Deuteranopia (green-deficit) palettes.
Let's finish where we started: With the practical implications of designing for people with different types of color deficits, particularly in regard to Web Accessibility Initiative guidelines.
From theory to practice
For WCAG 1.0, the bottom line is simple: sufficient contrast does not mean boring or blandness. Rather, it involves learning about and avoiding certain foreground-background combinations—combinations that will not work for 1 in 12 people, roughly 8% of the population. Otherwise, the designer still has 16.7 million colors to command.
For WCAG 2.0 and the multi-device web, the bottom line is a bit more complex: how color will be rendered (if at all) is device-dependent. So the emphasis shifts to using the tactics in WCAG 1.0 for most visual outputs (screen, print, tv, projection), but also ensuring that information, functionality, and structure can be (re)presented for non-visual outputs (aural, braille, embossed) and alternative visual outputs (tty, handheld).
Obviously, some of these output media make effective use of color; others will not use color at all.
This design practice—for WCAG 2.0 and the future— is not about the familiar mantra of separating style from content. Rather, as Owen Briggs rightly suggests, it is about having content with multiple presentation options.
Publish once, present everywhere with appropriate styling for all standards-compliant devices. This—one could argue—is the writer's, the publisher's, and the designer's dream. It is also—in the words of evolt.org contributor Marlene Bruce—more than just the right thing to do.
