Re: Color contrast between semi-transparent colors

This issue came up for a site I was working on, and my recommendation would be to use a sampling tool to determine color values where the contrast would be lowest. Or you could mathematically check the contrast at each edge of the gradient span and ensure that BOTH ends past contrast checks.

For instance, if a background is going from #333333 to #999999 and the text color is white, I would check where the white text is meeting the palest gray and ensure that contrast is satisfactory. It may be that the padding is sufficient to that the contrast is acceptable where the text actually is.

Alternatively, you could reject this gradient since we know that #999999 and white will fail a contrast check.  A change from #333333 to #6666666 (or something like #222222 to #666666) would be fine.

On a final note, some would probably argue that most gradients degrade legibility somewhat. But I like gradients myself, so I wouldn't ban it automatically.

My two cents.

Elizaveth

On Sep 4, 2012, at 4:48 PM, Lea Verou <lea@w3.org> 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
> 
> 
> 
> 
> 
> 

=-=-=-=-=-=-=-=-=-=-=-=-=
Elizabeth J. Pyatt, Ph.D.
Instructional Designer
Education Technology Services, TLT/ITS
Penn State University
ejp10@psu.edu, (814) 865-0805 or (814) 865-2030 (Main Office)

210 Rider Building  (formerly Rider II)
227 W. Beaver Avenue
State College, PA   16801-4819
http://www.personal.psu.edu/ejp10/psu
http://tlt.psu.edu

Received on Tuesday, 4 September 2012 21:01:16 UTC