Skip to page content or Skip to Accesskey List.

Work

Main Page Content

Understanding Color And Accessibility

Posted on 14 Feb 2005

in Site Development

by (ThomH)

Rated 3.89 (Ratings: 0)

Want more?

 

Member info

User since:

Articles written: 0

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 href="http://www.iamcal.com/toys/colors/stats.php"

target="_blank">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 href="http://www.useit.com" target="_blank">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 href="http://www.w3.org/WAI/" target="_blank">WC3 Web

Content Accessibility Guidelines (WCAG). Since href="http://www.w3.org/TR/WAI-WEBCONTENT/"

target="_blank">WCAG 1.0 is the current recommendation

but will soon be superseded by href="http://www.w3.org/TR/WCAG20/" target="_blank">WCAG

2.0, the current working draft, let's take a look

at both.

WCAG 1.0

For target="_blank">WCAG 1.0, the most relevant section is

as follows:

target="_blank">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 href="http://www.w3.org/TR/WAI-WEBCONTENT/"

target="_blank">1.0 as done, let's also consider href="http://www.w3.org/TR/WCAG20/" target="_blank">WCAG

2.0, and how it evolves from href="http://www.w3.org/TR/WAI-WEBCONTENT/"

target="_blank">1.0

WCAG 2.0

For target="_blank">WCAG 2.0, the most relevant sections

are as follows:

href="http://www.w3.org/TR/WCAG20/#content-structure-separation"

target="_blank">Guideline 1.3 Ensure that information,

functionality, and structure are separable from

presentation.


href="http://www.w3.org/TR/WCAG20/#visual-audio-contrast"

target="_blank">Guideline 1.4 Make it easy to

distinguish foreground information from background images

or sounds.

Clearly, the suggestions in href="http://www.w3.org/TR/WCAG20/" target="_blank">WCAG

2.0 are both stricter and more comprehensive. Whereas

target="_blank">1.0 emphasizes the screen, version href="http://www.w3.org/TR/WCAG20/" target="_blank">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 target="_blank">WCAG 1.0, we need both sufficient

contrast and to ensure that text and graphics work without

color. But for target="_blank">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 href="http://www.w3.org/TR/WAI-WEBCONTENT/"

target="_blank">WCAG 1.0 and href="http://www.w3.org/TR/WCAG20/"

target="_blank">2.0. Again, however, here we benefit

from the hard work of other people.

Understanding "sufficient

contrast"

target="_blank">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 href="http://more.btexact.com/people/rigdence/colours/colours.pdf"

target="_blank">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 target="_blank">Color Vision.

Likewise, Lighthouse International's href="http://www.lighthouse.org/color_contrast.htm"

target="_blank">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

href="http://www.internettg.org/newsletter/mar99/accessibility_color_challenged.html"

target="_blank">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

target="_blank">Vischeck offers "sufficient

contrast" testing for href="http://www.vischeck.com/vischeck/vischeckURL.php"

target="_blank">URLs and href="http://www.vischeck.com/vischeck/vischeckImage.php"

target="_blank">images. Additionally, at href="http://www.vischeck.com/index.php"

target="_blank">Vischeck the user can href="http://www.vischeck.com/daltonize/"

target="_blank">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 href="http://colorlab.wickline.org/colorblind/colorlab/"

target="_blank">Color Laboratory also offers a href="http://colorfilter.wickline.org/"

target="_blank">Web Page Filter that simulates how

sites will appear to people with different types of color

deficits.

The good news

Between href="http://more.btexact.com/people/rigdence/colours/"

target="_blank">Ridgen to href="http://www.internettg.org/newsletter/mar99/accessibility_color_challenged.html"

target="_blank">Wolfmaier, and with href="http://www.vischeck.com/index.php"

target="_blank">Vischeck & href="http://colorlab.wickline.org/colorblind/colorlab/"

target="_blank">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. target="_blank">VisiBone offers an inexpensive but very

useful target="_blank">Color Card and href="http://www.visibone.com/color/chart.html"

target="_blank">Color Chart, both of which also show

how the standard web palette appears to people with color

deficits. Others offer free for download the href="http://www.jessett.com/web_sites/usability/colour_blindness.shtml">

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 href="http://www.w3.org/WAI/" target="_blank">Web

Accessibility Initiative guidelines.

From theory to practice

For target="_blank">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 href="http://www.iamcal.com/toys/colors/stats.php"

target="_blank">1 in 12 people, roughly 8% of the

population. Otherwise, the designer still has 16.7 million colors

to command.

For target="_blank">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 href="http://www.w3.org/TR/WAI-WEBCONTENT/"

target="_blank">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 target="_blank">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 href="http://www.thenoodleincident.com/tutorials/design_rant/2.html"

target="_blank">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— href="http://www.evolt.org/article/Accessibility_more_than_the_right_thing_to_do/4090/381/index.html"

target="_blank">more than just the right thing to do.

Further Reading

  • href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnhess/html/hess10092000.asp"

    target="_blank">Can Color-Blind Users See Your Site?

    «

  • target="_blank">Color Vision Confusion «

  • href="http://webdesign.about.com/od/accessibility/a/aa062804.htm"

    target="_blank">Are Your Web Pages Color Sensitive?

    «

  • href="http://www.webtechniques.com/archives/2000/08/newman/"

    target="_blank">Considering the Color-Blind «

  • target="_blank">Color Matters Confusion «

  • href="http://www.kodak.com/US/en/digital/dlc/book3/chapter2/"

    target="_blank">Color Theory «

  • target="_blank">Introduction to Color «

  • href="http://www.thenoodleincident.com/tutorials/design_rant/"

    target="_blank">Design Rant «

The access keys for this page are: ALT (Control on a Mac) plus:

evolt.org Evolt.org is an all-volunteer resource for web developers made up of a discussion list, a browser archive, and member-submitted articles. This article is the property of its author, please do not redistribute or use elsewhere without checking with the author.