Color contrast between semi-transparent colors

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 the case of an opaque background, it's easy to calculate the color contrast using the same algorithm, even when the foreground is translucent. However, when the background is semi-transparent (for example, CSS rgba() or hsla() colors) and the colors it’s going to be on are unknown, there is no single contrast ratio, but a range of potential contrast ratios. How would somebody calculate this range? It’s obviously impractical to calculate the ratios for every possible color that might be underneath, these could be in the millions.

I tried calculating the min and max ratios by using white and black, but it did not yield accurate results. Consider the example of gray text on hsla(0,0%,50%,0.5) background (gray with 50% transparency). On white, this is gives us gray on hsl(0,0%,75%) which has a ratio of 2.1:1. On black, it gives us gray on hsl(0,0%,25%) which has a ratio of 2.7:1. However, this doesn’t mean that every potential color will yield a ratio between 2.1 and 2.7: If we have gray underneath, the resulting ratio is 1:1.

My question is: Which (and how many) colors should be sampled to get an accurate minimum and maximum contrast ratio?

[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