E-mail List Archives

Search E-mail List Archives for

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

From: Carol Foster
Date: Tue, Jan 07 2003 8:32AM
Subject: numeric contrast checks
No previous message | Next message →

Hello,

I am looking for an algorithm to check for color contrast based on HTML
color codes - is this possible? I believe that A-Prompt uses something
like this - at least it identified contrast issues and suggested
alternative colors when I tried it out maybe a year or 2 ago.

Looking back through previous discussions on this list, the most numeric
info I found was from Philip Lanier - he said:

[beginning of quote]

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

[end of quote]

Can this be translated into the terms of HTML color codes?

I did check out vischeck and some links in bobby and lighthouse, but I
did not have a lot of time. Maybe this is a big research project with
no quick answers, but if anyone does have an algorithm like this, or
some numeric tips more intended for HTML techies who don't know too much
about color theory, I would be most grateful.

Best wishes,
Carol

--
Carol Foster, Web Developer
Internet Publishing Group, Information Technology Services
University of Massachusetts, President's Office
phone: (413) 587-2130
fax: (413) 587-2148
mailto: = EMAIL ADDRESS REMOVED =
http://www.umass-its.net/ipg
--



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

From: philip steven lanier
Date: Wed, Jan 08 2003 2:53AM
Subject: Re: numeric contrast checks
← Previous message | Next message →

Carol,
You can calculate the percentage difference with just a little
programming. HTML color codes are a hexadecimal representation of the
red, green, and blue (RGB) values of the given color. Colors can also be
represented as a separation of hue, saturation, and lightness (HSL). You
can convert from RGB to HSL. I did a quick search online and came up with
some code fragments that do so. (Note that you'd want to test these,
though.) If you open up MS Paint or Word or any other program that lets
you specify custom colors, you can play around with the RGB and HSL
values and see how they affect each other.

In order to calculate contrast according to the method I described
earlier in the email you quoted, you will want to pay attention to the
lightness component. It will be a value between 0 and 255, where 0 is
black, and 255 is white. Contrast for two "colors" can be evaluated by
comparing the difference in the percentage of 255 that each represents in
lightness.

Example:

-----------------------------------------
COLOR_1 = #C0C0FF (a light blue or lavender color)
Breaking down above code, Red = 'C0', Green = 'C0', Blue = 'FF'
Converted from hexadecimal:
R = 192
G = 192
B = 255
Converted to HSL:
Hue = 169
Sat. = 255
Light. = 224

-----
COLOR_2 = #400040 (a deep purple color)
Converted to hexadecimal:
R = 64
G = 0
R = 64
Converted to HSL:
H = 212
S = 266
L = 32

-----
Calculating difference in percentage:

COLOR_1 lightness = 224
224/255 = 88%

COLOR_2 lightness = 32
32/255 = 13%

>>>>> Difference in percentage = 88% = 13% = 75% <<<<<<

-------------------------------------------

Of course you may want to do some more research into color contrast and
develop some other measures of contrast. If you're looking for a good
book on such issues, I recomment Colin Ware's book "Information
Visualization: Perception for Design". It can be fairly technical, but it
is very well grounded in scientific research, unlike some design books
which often spout misunderstood, misleading, and often unfounded "rules of
thumb".

Hope this helps!
Phil Lanier





On Tue, 7 Jan 2003, Carol Foster wrote:

> Hello,
>
> I am looking for an algorithm to check for color contrast based on HTML
> color codes - is this possible? I believe that A-Prompt uses something
> like this - at least it identified contrast issues and suggested
> alternative colors when I tried it out maybe a year or 2 ago.
>
> Looking back through previous discussions on this list, the most numeric
> info I found was from Philip Lanier - he said:
>
> [beginning of quote]
>
> "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."
>
> [end of quote]
>
> Can this be translated into the terms of HTML color codes?
>
> I did check out vischeck and some links in bobby and lighthouse, but I
> did not have a lot of time. Maybe this is a big research project with
> no quick answers, but if anyone does have an algorithm like this, or
> some numeric tips more intended for HTML techies who don't know too much
> about color theory, I would be most grateful.
>
> Best wishes,
> Carol
>
> --
> Carol Foster, Web Developer
> Internet Publishing Group, Information Technology Services
> University of Massachusetts, President's Office
> phone: (413) 587-2130
> fax: (413) 587-2148
> mailto: = EMAIL ADDRESS REMOVED =
> http://www.umass-its.net/ipg
> --
>
>
>
> ----
> To subscribe, unsubscribe, or view list archives,
> visit http://www.webaim.org/discussion/
>
>



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

From: Carol Foster
Date: Wed, Jan 08 2003 7:31AM
Subject: Re: numeric contrast checks
← Previous message | No next message

Thank you, thank you - just what I was looking for!

philip steven lanier wrote:

> Carol,
> You can calculate the percentage difference with just a little
> programming. HTML color codes are a hexadecimal representation of the
> red, green, and blue (RGB) values of the given color. Colors can also be
> represented as a separation of hue, saturation, and lightness (HSL). You
> can convert from RGB to HSL. I did a quick search online and came up with
> some code fragments that do so. (Note that you'd want to test these,
> though.) If you open up MS Paint or Word or any other program that lets
> you specify custom colors, you can play around with the RGB and HSL
> values and see how they affect each other.
>
> In order to calculate contrast according to the method I described
> earlier in the email you quoted, you will want to pay attention to the
> lightness component. It will be a value between 0 and 255, where 0 is
> black, and 255 is white. Contrast for two "colors" can be evaluated by
> comparing the difference in the percentage of 255 that each represents in
> lightness.
>
> Example:
>
> -----------------------------------------
> COLOR_1 = #C0C0FF (a light blue or lavender color)
> Breaking down above code, Red = 'C0', Green = 'C0', Blue = 'FF'
> Converted from hexadecimal:
> R = 192
> G = 192
> B = 255
> Converted to HSL:
> Hue = 169
> Sat. = 255
> Light. = 224
>
> -----
> COLOR_2 = #400040 (a deep purple color)
> Converted to hexadecimal:
> R = 64
> G = 0
> R = 64
> Converted to HSL:
> H = 212
> S = 266
> L = 32
>
> -----
> Calculating difference in percentage:
>
> COLOR_1 lightness = 224
> 224/255 = 88%
>
> COLOR_2 lightness = 32
> 32/255 = 13%
>
> >>>>> Difference in percentage = 88% = 13% = 75% <<<<<<
>
> -------------------------------------------
>
> Of course you may want to do some more research into color contrast and
> develop some other measures of contrast. If you're looking for a good
> book on such issues, I recomment Colin Ware's book "Information
> Visualization: Perception for Design". It can be fairly technical, but it
> is very well grounded in scientific research, unlike some design books
> which often spout misunderstood, misleading, and often unfounded "rules of
> thumb".
>
> Hope this helps!
> Phil Lanier
>
> On Tue, 7 Jan 2003, Carol Foster wrote:
>
> > Hello,
> >
> > I am looking for an algorithm to check for color contrast based on HTML
> > color codes - is this possible? I believe that A-Prompt uses something
> > like this - at least it identified contrast issues and suggested
> > alternative colors when I tried it out maybe a year or 2 ago.
> >
> > Looking back through previous discussions on this list, the most numeric
> > info I found was from Philip Lanier - he said:
> >
> > [beginning of quote]
> >
> > "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."
> >
> > [end of quote]
> >
> > Can this be translated into the terms of HTML color codes?
> >
> > I did check out vischeck and some links in bobby and lighthouse, but I
> > did not have a lot of time. Maybe this is a big research project with
> > no quick answers, but if anyone does have an algorithm like this, or
> > some numeric tips more intended for HTML techies who don't know too much
> > about color theory, I would be most grateful.
> >
> > Best wishes,
> > Carol
> >
> > --
> > Carol Foster, Web Developer
> > Internet Publishing Group, Information Technology Services
> > University of Massachusetts, President's Office
> > phone: (413) 587-2130
> > fax: (413) 587-2148
> > mailto: = EMAIL ADDRESS REMOVED =
> > http://www.umass-its.net/ipg
> > --
> >
> >
> >
> > ----
> > To subscribe, unsubscribe, or view list archives,
> > visit http://www.webaim.org/discussion/
> >
> >
>
> ----
> To subscribe, unsubscribe, or view list archives,
> visit http://www.webaim.org/discussion/

--
Carol Foster, Web Developer
Internet Publishing Group, Information Technology Services
University of Massachusetts, President's Office
phone: (413) 587-2130
fax: (413) 587-2148
mailto: = EMAIL ADDRESS REMOVED =
http://www.umass-its.net/ipg
--



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