WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: numeric contrast checks

for

From: Carol Foster
Date: Jan 8, 2003 7:31AM

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 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 REMOVED>
http://www.umass-its.net/ipg
--



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