Understanding Color and Accessibility
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.
Comments
Not quite sufficient
Web developers only have to worry about confusable colours used in confusable ways. In short, not every usage of red or green is suspect.
The plain reading of the WCAG 1 and 2 guidelines is flatly at odds with the truth about colour deficiency, as I have been explaining to WAI for years. They seem to think that all colours are a problem and that significant numbers of people can't see colour at all, both of which are false.
You can check the chapter of my book to understand why.
web design for colour blind
Reply to Joe Clark
I have read your book. Should I take it that "not quite sufficient" means "does not mention Joe Clark?"
You post here:" "In short, not every usage of red or green is suspect."
Not a claim I made. Nor Ridgen. Nor Wolfmaier. Nor et cetera. So who is this addressed to?
You post here: " "Web developers only have to worry about confusable colours used in confusable ways."
Maybe you'd like to rephrase that. To start, it's a tautology. I've tried to explain sufficient color contrast so it doesn't just exist in the eye of the beholder. Thankfully, many intelligent and hardworking people--people who have relevant experience with color-blindness and low vision--have done the work to specify the problem. I don't see how anyone benefits from throwing out that research to just say "well, it doesn't look confusing to me."
And on same, to only get started, when it comes to color and other style choices, designers--and those involved with digital document production and distribution--have be concerned with much more than what you acknowledge.
You post here:" "The plain reading of the WCAG 1 and 2 guidelines is flatly at odds with the truth about colour deficiency, as I have been explaining to WAI for years. They seem to think that all colours are a problem and that significant numbers of people can't see colour at all, both of which are false."
Two items of note:
Now let me end where all this began: Joe Clark recommending that I read Joe Clark.
Like many others concered with accessibility, I regard Joe Clark as one more--and often very valuable--source of information. But Joe Clark--as his repeated posting and comments elsewhere and everywhere indicate--sees it differently. King Louis XIV famously said "L'etat, cest moi!" (roughly: "I am the state--the state is me"). Joe Clark is our would-be Louis XIV of Accessibility: what matters most is his opinion, his experience, his decree. Authority not by careful study and testing; not by necessary compromise and consensus; not by consideration of relevant work in other professional fields. Just authority by decree: I, Joe Clark, have spoken.
WAI goes about things a bit differently. It's a fairly transparent process, open to comment, review and participation.
If Joe Clark has evidence that the WAI committee members are deliberately distorting evidence, making false claims or otherwise exaggerating the problems that people with disabilities have, let Joe Clark present it. Certainly, no one is repressing him. Otherwise, I will thank Joe Clark to leave me out his schemes for self-aggrandizement.
Bottom line: if you are an Evolt.Org member or visitor, and have not read Joe Clark's book--it is worth reading.
Color contrast checker
trooperbill
Still not quite sufficient
No.
The reader.
And I consulted them at length in writing the colour-vision chapter of my book, then asked them to vet it before publication. Keep in mind, of course, that colour perception and contrast perception are related but not interchangeable issues, which, as we'll see shortly, is one of the confusions the WAI guidelines bring into being. My chapter dealt mostly with colour perception and your article deals mostly with contrast.
Great. And I actually consulted those researchers.
I guess paraphrasing is now viewed as a false claim. The WCAG 1.0 guideline essentially tells you never to rely on colour ("alone," that is, all colour).
I don't know-- perhaps because you think that the typical WCAG contributor has any knowledge at all (of colour deficiency or Web development)? The typical WCAG contributor does not.
I spent over an hour explaining the deficiencies of WCAG 1.0's colour guidelines at the Toronto f2f meeting in September 2003. I brought along all my copies of the relevant research. There was agreement in the room (particularly from one WCAG Participant in Good Standing) that the guideline was not based on the truth of colour deficiency and needed to be rewritten. A couple of weeks later, lo and behold, a posting to the WAI-GL list from that same Participant reiterated all the old WCAG 1.0 claims and ignored what he, and everyone at the table, had agreed to at the meeting.
Forgive me if I have spared you and other readers the details, all of which are Googlable in the archives of that mailing list.
Because I did my homework.
A rather broad statement. Meet me at SXSW or @media and back it up.
On the topic of colour deficiency, my recommendations are very solid.
No, by careful study and consultation with the experts.
...after consideration of relevant work in other professional fields.
And then having expert input simply ignored.
As above.
That does it. I'm cutting you out of my will.
But not, apparently, worth believing.
My thanks to Joe Clark
1. Thank you very much, indeed, for your clarification on color perception vs. color contrast. In regard (again) to Design Accessible Web Sites, I pre-ordered your book, have long since read it, and keep it handy as a reference. It's a very good tool. Is your work worth believing? These are--as we both might agree--not matters of faith.
2. We're both wasting far too time on this exchange. But I'll foolishly continue. Our remaining business, if any: let's say your rhetoric, which is much more measured in your reply than your initial post. Your corrections:
That WCAG 1.0 recommendation on color is too broad and therefore misleading. That your paraphrase reflects how many people have felt frustrated with, confused by, or unable to feasibly implement it.
I have--for what this is worth--no objections to those claims whatsoever. Furthermore, I thank you and other people for participating in a process--however imperfect that might be--which brings about better recommendations. But what you initially wrote: " the WCAG 1 and 2 guidelines is flatly at odds with the truth." C'mon. There's no organized jihad against color that you or I must save free-thinking designers from.
That the reader should not mistakenly believe "that every usage of red or green is suspect." To be sure, which is why my exact words were that "the designer still has 16.7 million colors to command" and that the problem boils down to "learning about and avoiding certain foreground-background combinations" which have been defined rather precisely by people with expert knowledge. To make that knowledge available was my goal in writing in this article: I learned a great deal from Ridgen, Wolfmaier, et alia. But obviously, and c'mon again, the point of your comment: I was piously perpetuating the standard misinformation.
Turns out I was not--and more importantly, that Ridgen, Wolfmaier, et alia are not. I can't speak for your experience with certain WAI members. I will take that on faith--but if that was your context, only you understood it. Not my roadkill--not gonna eat it.
On all points, agreed. 100% I'm sharing research and information--not providing the last word.
Now back to you, Joe Clark. You have legitimate concerns with WAI. These--IMO--should be articulated in a manner that does not trivialize you, that does not appear to be rant or conspiracy. These concerns could be even fashioned into an Evolt article, which I would certainly read and benefit from; or should you find the time, a detailed examination of both WAI's processes and the the most recent WCAG Guidelines. Put this in book form--and I'll buy it. More importantly, I'll read it.
3. Cutting me out of your will. Yes, indeed. Please use whatever vast fortune you have for other more noble purposes. Please also choose your words more carefully: you are, after all, Joe Clark--both a widely acknowledged expert on accessibility and a professional writer.
reply to trooperbill (and codepo8)
reply to trooperbill:
Dude, thanks. I do list that tool in the "Testing your design" section. But I probably should have organized all the links by category at the end of the article. Making it easier to find. That's my bad. Next time I'll know and do better.
It's supercool that you're using theWeb Page Filter, IMO; and I wish you great luck with a sharp looking site (and of course, your biz). This brings me to codepo8's suggestions/comments on the design.
I'm afraid of codepo8 <joke /> , but more to the point I think his work is generally excellent. So I'm just adding my two cents that I hope you find his comments helpful.
reply to jehiah (re: Color contrast checker)
Jehiah, that--Color Contrast Checker--is absolutely fantastic.
Right now, you've done something unlike any else out there: testing the CSS itself. I can't wait to try it out.
I know that color deficits fall within certain ranges--and can be mathematically described. So there's a set of algorithms which define each type of color deficit. This--getting a mathematical description or feasible algorithm--strikes me as much more tricky when we're talking about people with low vision (my legally blind sister-in-law, for example, who makes her living as a tech professional). Just an awful lot of varieties. Some of the reading I've done, though, suggests that sufficient contrast also benefits--just for all the common sense reasons--people with low vision. So I'm guessing your tool would help somewhat with that as well.
With all this love going around, let me pick up on one of Joe Clark's very good points concerning Bobby (pages 57-58, BAW), another Accessibility tool. To paraphrase Clark, if I may, we should NOT think of these tools as providing validation: human judgment and user testing are always required. On this I agree completely. (As we all know, you can certainly validate markup: but perfect syntax on the code level need not have anything to do with user experience).
But you're not slapping stickers on anything, or making claims on behalf of 508 or WAI. You're just--it seems--helping out with the CSS to make sure the color/background selections pass some well-defined criteria. (Correct me if I'm wrong about that). So, again: congrats. Don't know where you got the great idea to do this, but I'm happy my article not only insufficient but already outdated. Cool cool cool.
Black and white
A good idea is to take a screenshot of your page, then make it black and white in an image editor. This will immediately show you areas of high and low contrast.
Better still, you can add a line of CSS to your page and view it in Internet Explorer 5.5+, which then makes the whole web page black and white.
* {filter:Gray;}(Note this can be quite processor-intensive. It may be better to style only certain elements only.)
It may be interesting
[ADMIN] and how is that relevant to the topic?
Web site colors
Hang on its not as simple as that