WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Color Contrast and Gradients

for

From: Elle
Date: May 23, 2012 6:24AM

David:

We test highest, midpoint, and lowest points of a gradient to ensure proper
color contrast. However, we also look for readability on any text over
background images (something else to consider during this conversation).


Cheers,
Elle





On Tue, May 22, 2012 at 11:57 PM, John Foliot < <EMAIL REMOVED> > wrote:

> David Ashleydale wrote:
> >
> > Do any of you have any tips on color contrast considerations when a
> > piece
> > of text's background color isn't solid, but is a gradient? Off the top
> > of
> > my head, I was thinking that I could just measure the contrast at the
> > highest and lowest points of the letters and ensure that the contrast is
> > sufficient there. Or perhaps I could just do the midpoint of the text?
>
> FWIW, this is how we are dealing with this issue internally.
>
> Assume that the gradient goes from lightest at the top to darkest at the
> bottom. We look to the "middle" range of the color and ensure that the
> lettering that is on top of that gradient has at least 51% "below" that
> middle line: in other words more than 50% of the letter is on a background
> that meets or exceeds the minimum.
>
> We rely on a known phenomenon where the human eye fills in "missing data"
> in
> the same way that you can figure out what I wrote here: I Lv Nw Yrk
>
> It is essentially an optical illusion, although not of the "trick" variety:
> none-the-less because there is enough letter on the dark-enough contrast,
> most human eyes will make up the difference and you will discern the
> letter(s) - and because our eyes also group letters as words, that too will
> re-enforce the overall cognition of the text on the gradient.
>
> FWIW.
>
> JF
>
>
> > > >



--
If you want to build a ship, don't drum up the people to gather wood,
divide the work, and give orders. Instead, teach them to yearn for the vast
and endless sea.
- Antoine De Saint-Exupéry, The Little Prince