Re: Color contrast between semi-transparent colors

Hi Lea,

maybe I did not understand everything, but I think this is quite easy?!?

You have a background and a forground and you use a semi transparent 
layer between them. So just make sure (if text is dark) that the darkest 
possible bakckground (black) will be still bright enough to produce a 
satisfying contrast ratio.

Or use a semi transparent layer which darkens even a white background so 
that you can use a white font. If the font should be not white, you must 
darken the background even more...

Marc

Am 05.09.2012 16:24, schrieb Lea Verou:
> 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 
>> <http://lea.verou.me/> ✿ @leaverou
>>
>>
>>
>>
>>
>>
>


-- 
Mit freundlichen Grüßen,

i. A. Marc Haunschild
Zugängliche Anwendungsentwicklung und Qualitätskontrolle
______________________________________________

Referat 614 - Konzeption und Aufbau von Informationsdiensten
Bundesanstalt für Landwirtschaft und Ernährung
Anschrift: Deichmanns Aue 29, 53179 Bonn
Telefon: +49 (0)228 99 6845-7324
Fax: +49 (0)228 99 6845-7111
E-Mail: marc.haunschild@zadi.de
Internet: www.ble.de
_______________________________________________