E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

Thread: Color Contrast Formula

Number of posts in this thread: 8 (In chronological order)

From: Tim Harshbarger
Date: Tue, Mar 15 2005 9:53AM
Subject: Color Contrast Formula
No previous message | Next message →

Hi,

Would someone be willing to explain the color contrast formulae
mentioned in this document?

http://www.w3.org/TR/AERT#color-contrast

The color brightness formula seems straightforward. We are not so
certain about the color difference formula. What is meant by max and
min values?

Thanks!
Tim

From: Andrew Kirkpatrick
Date: Tue, Mar 15 2005 10:20AM
Subject: Re: Color Contrast Formula
← Previous message | Next message →

Tim,
> What is meant by max and min values?

When comparing two colors [e.g. (200, 100, 200) and (255, 0, 100)] the
formula would be:
color difference = (maximum(255,200) - minimum(255,200)) +
(maximum(100,0) - minimum(100,0)) + (maximum(100,200) -
minimum(100,200))
or
color difference = (255-200)+(100-0)+(200-100)

AWK

--
Andrew Kirkpatrick
WGBH National Center for Accessible Media
125 Western Ave.
Boston, MA 02134
E-mail: = EMAIL ADDRESS REMOVED =
617.300.4420

From: Michael D. Roush
Date: Tue, Mar 15 2005 10:27AM
Subject: Re: Color Contrast Formula
← Previous message | Next message →

tim.harshbarger.cqwg wrote:
> http://www.w3.org/TR/AERT#color-contrast
>
> The color brightness formula seems straightforward. We are not so
> certain about the color difference formula. What is meant by max and
> min values?

I've always understood it to mean the larger and smaller of the 'red
values' in the two colors that are being compared. The formula
max(red1,red2)-min(red1,red2) might also be understood as "The absolute
value of the difference between red1 and red2", or even simpler
"Subtract the smaller one from the larger one".

For example, I am using rgb(153,255,51) for a font color on a background
of rgb(204,102,204)....

max(red1,red2)-min(red1,red2) = 204 - 153 = 51
max(grn1,grn2)-min(grn1,grn2) = 255 - 102 = 153
max(blu1,blu2)-min(blu1,blu2) = 204 - 51 = 153

51 + 153 + 153 = 357 (Quite a bit below the 500 standard.)

If I change the font color to rgb(102,204,0), I get a color difference
value of 510, just above what I need to satisfy the formula.

Now, the example I just gave was intentional. I find both of these
terribly hard to read. I find the 'passable' example even more
difficult than the one that doesn't pass the formula.

Moral of the story.... keep the 500 number in mind as a guide if you
wish, but don't rely on a 500+ score to guarantee good color contrast.

Of course, that's if I'm understanding their formula right....

Michael Roush
= EMAIL ADDRESS REMOVED =

From: Mark Magennis
Date: Wed, Mar 16 2005 2:58AM
Subject: Re: Color Contrast Formula
← Previous message | Next message →

> For example, I am using rgb(153,255,51) for a font color on a
> background of rgb(204,102,204)....
>
> If I change the font color to rgb(102,204,0), I get a color
> difference value of 510

By my calculation, the difference value is 408.

max(red1,red2)-min(red1,red2) = 204 - 102 = 102
max(grn1,grn2)-min(grn1,grn2) = 204 - 102 = 102
max(blu1,blu2)-min(blu1,blu2) = 204 - 0 = 204

Am I missing something?

Mark

From: Mark Magennis
Date: Wed, Mar 16 2005 2:57AM
Subject: Re: Color Contrast Formula
← Previous message | Next message →

From: reply-to:to:subject:in-reply-to:mime-version:content-type:content-transfer-encoding:references;
Date: Wed, Mar 16 2005 3:10AM
Subject: Re: Color Contrast Formula
← Previous message | Next message →

On Wed, 16 Mar 2005 09:54:53 -0000, mark.magennis wrote:
>
> > For example, I am using rgb(153,255,51) for a font color on a
> > background of rgb(204,102,204)....
> >
> > If I change the font color to rgb(102,204,0), I get a color
> > difference value of 510
>
> By my calculation, the difference value is 408.
>
> max(red1,red2)-min(red1,red2) = 204 - 102 = 102
> max(grn1,grn2)-min(grn1,grn2) = 204 - 102 = 102
> max(blu1,blu2)-min(blu1,blu2) = 204 - 0 = 204
>
> Am I missing something?

There are two very useful tools available that can help with checking
colour contrast.

Online - http://www.juicystudio.com/services/colourcontrast.asp
Offline - http://www.nils.org.au/ais/web/resources/contrast_analyser/index.html

Cheers,

pix
http://www.pixeldiva.co.uk

From: Terence de Giere
Date: Thu, Mar 17 2005 9:40AM
Subject: Re: Color Contrast Formula
← Previous message | No next message

Tim Harshbarger wrote:

Would someone be willing to explain the color contrast formulae
mentioned in this document?

http://www.w3.org/TR/AERT#color-contra

Tim --

For the not so greatly mathematically inclined there is a nifty tool
that performs these calculations with visual output that might be more
useful for graphic designers. This tool, the Colour Contrast Analyser,
also incorporates the implementation of the Brettel algorithm used in
the Vischeck color blindness simulation software so it can check for
color contrast differences with Protanopia, Deuteranopia, and
Tritanopia, with a visual output of the results. I found the results
rather surprising, as what works for a normal vision user may fail with
color blindness. Many designers might find the resulting color palette
too narrow to suit their sensibilities.

The tool may be found at
http://www.nils.org.au/ais/web/resources/contrast_analyser/index.html

There was some research done at a Texas university in 1997 that tested
various fonts of various styles, with various colors and backgrounds,
and the results (with normal users I presume) indicated that readability
of fonts was not always what was expected when just considering
contrast. The conclusion of the research was: "In general these results
suggest that there is no one foreground/background combination, font, or
word style which leads to the fastest RT (i.e. best readability), but
rather a designer must consider how each variable affects the other(s).

http://hubel.sfasu.edu/research/AHNCUR.html
http://hubel.sfasu.edu/research/reslvs.html

This interaction might explain why a font and background combination
that passes the contrast test might still be difficult to read. The
Colour Contrast Analyser also allows you to change the font. A very
useful tool for scoping out an accessible design.

Another factor in readability might be the difference in display between
a Cathode Ray Tube (CRT) video monitor and the new Liquid Crystal
Display (LCD) monitors. The flaring effect from the electron guns in
CRTs makes smaller text rather fuzzy. LCDs now have very hight contrast
and provide very clear text when used at their design resolution. But
many users I note often set LCDs to a lower than optimum resolution to
get type to show larger (for example, 800x600 pixels on a 1280x1024
pixel display), and when this is done, the text is far less crisp, in
some ways the opposite of what happens when the display resolution is
lowered on a CRT.

Terence de Giere
= EMAIL ADDRESS REMOVED =