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 Friday, 29 August 2003 17:02:55 UTC