Re: Color contrast of text on variable color background

Since it is not good to post text over a pattern -- or photo -- the best would be either to not do it or to halo the text with white/very light. 

Gregg
--------------------------------------------------------
Gregg Vanderheiden Ph.D.
Director Trace R&D Center
Professor Industrial & Systems Engineering
and Biomedical Engineering
University of Wisconsin-Madison

Technical Director - Cloud4all Project - http://Cloud4all.info
Co-Director, Raising the Floor - International
and the Global Public Inclusive Infrastructure Project
http://Raisingthefloor.org   ---   http://GPII.net









On Sep 4, 2012, at 4:06 PM, Lea Verou <lea@w3.org> wrote:

> Hi all,
> 
> I was studying the color contrast section of WCAG 2.0 [1] and I observed that the algorithm presented assumes opaque colors. In modern web design, authors often want to place text over a variable color background, such as a photograph, a gradient or even shadows of the text itself. I was wondering how to calculate the contrast ratio for such use cases. 
> 
> One possible approach would be to take the minimum contrast that occurs. However, this could often be unnecessarily restrictive, as it might only occur in a small number of pixels that don’t hinder readability. Especially in the case of photographs, where practically every pixel has a different color.
> 
> Another possible approach would be to take the average color and calculate the contrast ratio for that. However, this might yield many false positives. A simple example would be black text on a black & white checkerboard. Although the average background color is gray, which has an acceptable 5.3:1 ratio, the text would still be unreadable.
> 
> It appears that there are multiple factors affecting the readability of text on such cases, so I'm not sure what kind of algorithm could be followed. Thoughts?
> 
> [1]: http://www.w3.org/TR/WCAG/#visual-audio-contrast-contrast
> 
> Lea Verou
> W3C developer relations
> http://w3.org/people/all#lea ✿ http://lea.verou.me ✿ @leaverou
> 
> 
> 
> 
> 
>