Color contrast of text on variable color background

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#leahttp://lea.verou.me ✿ @leaverou

Received on Tuesday, 4 September 2012 21:07:02 UTC