Re: [TECH] Colour Difference Algorithm

> "Don't set red on black or black on red.
> Don't set green on red or red on green.
>
A good start. But what are the RGB values, or range of RGB values, for these
colors?

Here are some examples of text using these colors:
http://www.aprompt.ca/redgreen.gif
http://www.aprompt.ca/greenred.gif
http://www.aprompt.ca/redblack.gif
http://www.aprompt.ca/blackred.gif

They might not appeal to your artistic sensibility but are they an
accessibility problem?

Chris

----- Original Message ----- 
From: "Wendy A Chisholm" <wendy@w3.org>
To: "Chris Ridpath" <chris.ridpath@utoronto.ca>
Cc: <w3c-wai-gl@w3.org>
Sent: Friday, August 29, 2003 5:02 PM
Subject: Re: [TECH] Colour Difference Algorithm


> Joe's book and Aries pamphlet are good places to start.  Here's a summary.
>
> In Chapter 9 of "Building Accessible Web Sites," [1] Joe says
> "If I confuse this item with something else, will I make a mistake? Will I
> be unable to do what I want?"
>
> "keep in mind you always have to think in groups.  When considering two
> items, is the first on top of the second? Or right alongside?"
>
> "Don't set red on black or black on red.
> Don't set green on red or red on green.
> Don't place the two halves of a confusable pair next to each other.
> Don't mix beige/yellow/orange with red and green.
> UNLESS
> There is no actual chance of confusion.
> The items are widely spaced.
> The items have considerable difference in brightness."
>
> "If, however, you wish to maximally avoid colour confusions, you have a
> range of colour choices at your disposal.
> Red/blue
>    Steps: Dark red; medium red; light red; light blue; medium blue; dark
blue
> Orange/blue
>    Steps: Dark orange; medium orange; light orange; light blue; medium
> blue; dark blue
> Orange/purple
>    Steps: Dark orange; medium orange; light orange; light purple; medium
> purple; dark purple
> Yellow/purple
>    Steps (note the restricted list): Yellow; light purple; medium purple;
> dark purple"
>
> "B-list:
> Brown/blue
>    Steps: Dark brown; medium brown; light brown; light blue; medium blue;
> dark blue
> Yellow/blue
>    Steps: Yellow; light blue; medium blue; dark blue"
>
> "You can mix white, black, and grey with confusable colours if the
results,
> given foreground/background combinations, contrast, and other factors, are
> actually unconfusable.
> You can use confusable colours all you want if the confusion has no impact
> on the meaning or function of the site."
>
> In "Effective Color Contrast" by Aries Arditi, PhD [2], he says
> "Exaggerate lightness differences between foreground and background
colors,
> and avoid using colors of similar lightness adjacent to one another, eve
if
> they differ in saturation or hue...If you lighten your light colors and
> darken your dark colors, you will increase the visual accessibility of
your
> design."
>
> (in reference to a color wheel described at [3]),
> "Choose dark colors with hues from the bottom half of the hue circle
> against light colors from the top half of the circle. Avoid contrasting
> light colors from the bottom half against dark colors from the top half."
> "Avoid contrasting hues from adjacent parts of the hue circle, especially
> if the colors do not contrast sharply in lightness."
>
> In other words, Choose dark [blue, violet, purple or red] against light
> [blue-green, green, yellow, or orange].  Avoid light [blue, violet, purple
> or red] against dark [blue-green, green, yellow, or orange].  Orange on
red
> (or vice-versa) is not effective because they are next to each other in
the
> color wheel.  Yellow on purple (or vice versa) is effective since they are
> not adjacent.
>
> --w
>
> [1] http://joeclark.org/book/sashay/serialization/Chapter09.html
> [2] http://www.lighthouse.org/color_contrast.htm
> [3] description of color wheel - light colors: blue-green, green, yellow,
> orange.  dark colors: blue, violet, purple, red
>
> At 03:55 PM 8/28/2003, you wrote:
>
> > > ...However we can take steps to recommend content
> > > providers avoid using colours which exacerbate the problem. This, in
my
> > > opinion at least, should be where WCAG stops.
> > >
> >I agree. There are certain combinations that everyone agrees are bad. For
> >example the exact same colour used for both text and background. There
are
> >certain colours that everyone agrees are OK - black on white.
> >
> >But as we move away from these extremes we start to run into problems.
Which
> >colours do we recommend the content providers avoid? Is it possible to
draw
> >a clear line?
> >
> >Chris
>
> -- 
> wendy a chisholm
> world wide web consortium
> web accessibility initiative
> http://www.w3.org/WAI/
> /-- 
>

Received on Thursday, 4 September 2003 09:32:44 UTC