WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: numeric contrast checks

for

From: philip steven lanier
Date: Jan 8, 2003 2:53AM

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/