WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Color Contrast and Gradients

for

From: John Foliot
Date: May 22, 2012 9:57PM

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