Re: Color contrast between semi-transparent colors

I just had a brainwave and I think I've figured it out! The extremes, i.e. the backgrounds that produce the minimum and maximum contrast are not fixed. They depend on the foreground color (text color). The background* that produces the minimum contrast if combined with the semi transparent background color is the text color, since this is as close as you can get to it. Similarly, the background that produces the maximum contrast is the inverse of the text color. Therefore, the contrast ratio range, is the contrast ratios produced by these two colors.

Allow me to illustrate with a (quite common in modern web design) example:
Text color: white (#FFFFFF)
Background color: rgba(0, 0, 0, .5) (50% semi-transparent black)

The inverse of white is black.
rgba(0, 0, 0, .5) on white produces gray (#808080). The contrast ratio of gray and white is 4.
rgba(0, 0, 0, .5)  on black produces black (#000000). The contrast ratio of white and black is 21.

Therefore, the contrast ratio range of white text on rgba(0, 0, 0, .5) is 4 - 21. In other words, the contrast ratio of these two colors is 12.5±8.5. This tells us that we can use this for large text (if AA is sufficient), but we should be wary of using it for body text, since it can go below the 4.5 threshold. Increasing the transparency to .55 passes AA for any size text.

I've tested this algorithm with a number of different colors and it seems to produce accurate results. Please let me know if you see an error in my reasoning, or my math.

If I'm correct, I think this should be added in WCAG. Authors use semi-transparent colors all the time in modern web design, and it would immensely help them to be able to determine whether their backgrounds might produce illegible text.

* I'm using the word "background" for two separate things: The (semi-transparent) background color and what's going to be behind it. I hope the meaning is clear through the context.

Lea Verou
W3C developer relations
http://w3.org/people/all#lea ✿ http://lea.verou.me ✿ @leaverou






On Sep 4, 2012, at 23:48, Lea Verou 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 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
> 
> 
> 
> 
> 
>