WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: What is good contrast? How do you know?


From: philip steven lanier
Date: Jun 5, 2002 8:30AM

For individuals who have normal 20/20 vision, the general rule of thumb is
that the two shades should differ by 70% to have good readability. 70%
difference means the difference in absolute percentages. So you could put
100% black on 30% gray. Or 10% gray (near white) on 80% gray.

With regard to color, it is best to differentiate based on luminance
rather than hue or saturation, as the human perceptual system can only
differentiate between about 200 colors (hues), 20 saturations, but can
distinguish around 500 different shades (lightnesses).

Also, keep in mind that users may have varying degrees of colorblindness,
and some may have limited or no sight. So always provide a text
equivalent of every non-text element! If you must differentiate based on
color in an image, there are schemes that work well for readers who are
colorblind. A very gross generalization to remember that for the majority
of people who are colorblind, reds and greens will appear yellowish. Like
I said, this is a very gross generalizatoin... for a much more in-depth
discussion, check out www.vischeck.com.

Hope this helps!

Philip Lanier,
University of Washington

P.S. Much of the info here was taken from Colin Ware's book "Information
Visualization: Perception for Design"

On Wed, 5 Jun 2002, Mark Magennis wrote:

> I know that it's important to have good contrast between text and background
> or between colours in an image. But how can you tell whether contrast is
> good and what is good enough?
> Are there any tools that can be used and that do a decent job?
> Are there any calculations you can make with the colour values?
> Thanks, Mark

To subscribe, unsubscribe, or view list archives,
visit http://www.webaim.org/discussion/