Re: Color contrast between semi-transparent colors

Hi Lea,

now I got it, I guess - its about how to calculate it, to change the 
semitransparent layer automatically to produce a satisfying contrast ratio?

We talk about contrast in brightness, not in color, so colors do not 
matter, right?

Maybe it is enough to add the values for red, green and blue to find out 
the brightness of the text? On the other hand you need to know, how 
bright the background must be in minimum to give you enough contrast to 
your text (or how dark, if text is bright).

But my math is not only very rusty - I never needed this kind of 
calculation throughout my whole professional career. Of course there are 
people dealing with this kind of stuff, so I would ask the developers of 
paciello group who developed the Color contrast Analyser 
(http://www.paciellogroup.com/resources/contrastAnalyser). I bet, they 
know the maths you need! ;-)

I am very interested in the result of this, by the way!

Marc

Am 06.09.2012 13:33, schrieb Lea Verou:
> Actually, the algorithm I described seems correct to determine a lower bound. However, when it comes to the upper bound, I found an error in my reasoning: I assumed the color with the maximum contrast for a given color A is the inverse of A. This seems correct for colors close to the edges of the RGB cube, but becomes more and more inaccurate as we move towards the center of the cube. It’s especially incorrect for gray, as the inverse of gray is …gray.
>
> Another possible way to calculate this (that I need to test more) is that the color with the maximum (linear) distance in the RGB cube could be the one that produces the maximum contrast. If that fails too, there are strictly defined mathematical algorithms to find the maximum(s) of any function, which could be applied to the contrast ratio function. I'm quite rusty on multivariable calculus, but I could give it a shot.
>
> I haven't given up on this, and am still looking into it. Any help would be immensely appreciated. I've tried googling for algorithms about maximizing color contrast for a given color, but can't seem to find anything. All I could find was tutorials for designers about when to use white or black text on certain backgrounds or research papers about monitor display contrast :( There must be prior research on this, I'm probably just too useless at searching to find it.
>
>
> Lea Verou
> W3C developer relations
> http://w3.org/people/all#lea ✿ http://lea.verou.me ✿ @leaverou
>
>
>
>
>
>
> On Sep 6, 2012, at 11:38, Shadi Abou-Zahra wrote:
>
>> Hi Lea,
>>
>> Sounds very conclusive. Interesting.
>>
>> You say you've tested this with color combinations other than white text on a semi-transparent black background and it seems to work?
>>
>> If so then it seems apt to submit to WCAG WG as a proposed technique:
>> - <http://www.w3.org/WAI/GL/WCAG20/TECHS-SUBMIT/>
>>
>> Best,
>>   Shadi
>>
>>
>> On 5.9.2012 16:24, Lea Verou wrote:
>>> 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
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>
>> -- 
>> Shadi Abou-Zahra - http://www.w3.org/People/shadi/
>> Activity Lead, W3C/WAI International Program Office
>> Evaluation and Repair Tools Working Group (ERT WG)
>> Research and Development Working Group (RDWG)
>>
>


-- 
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
_______________________________________________

Received on Thursday, 6 September 2012 11:49:12 UTC