# 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

--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