E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 5 (In chronological order)

From: David Ashleydale
Date: Tue, May 22 2012 9:57AM
Subject: Color Contrast and Gradients
No previous message | Next message →

Hi,

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? Does
WCAG have anything to say about this? I looked around in the "How to Meet"
section for this particular guideline, but didn't see much about gradients.

BTW, in case it matters, this would not be an image of text -- it would be
regular HTML text. Although, I haven't decided whether to use an image for
the gradient background or CSS.

Thanks,
David

From: Jared Smith
Date: Tue, May 22 2012 10:13AM
Subject: Re: Color Contrast and Gradients
← Previous message | Next message →

On Tue, May 22, 2012 at 9:57 AM, 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?

I don't believe WCAG provides any guidance here. Regardless of where
you measure or what the guidelines require, the key is simply to
ensure that there's adequate contrast. It's not like it automatically
switches from accessible to inaccessible (or readable to unreadable)
at the exact point in the gradient where it falls below the WCAG
contrast ratio. Perhaps you could err on the side of caution and
measure where there's the least amount of contrast.

One area where I've seen issues with background gradients is when the
text size is increased. Sometimes the text will span into areas where
there is very low contrast on the background. And be sure that if you
use an image background that there is also a suitable background color
defined in case images are disabled (and also allows text to be read
while images are downloading). I don't think any of these things are
required in the guidelines, but they are all good to watch out for
because users with low vision that need adequate contrast are also
more likely to increase text sizes or disable images.

Jared Smith
WebAIM

From: John Foliot
Date: Tue, May 22 2012 9:57PM
Subject: Re: Color Contrast and Gradients
← Previous message | Next message →

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

From: Elle
Date: Wed, May 23 2012 6:24AM
Subject: Re: Color Contrast and Gradients
← Previous message | Next message →

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

From: Monique Brunel
Date: Wed, May 23 2012 8:45AM
Subject: Re: Color Contrast and Gradients
← Previous message | No next message

Le 23/05/2012 14:24, Elle a écrit :
> 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

Hi,

Just a feedback on this ...

I am dyslexic and very sensitive to the brightness (I can not easily
read white text on black background), and more, my speed of
accommodation to light variations is very small ... also, whatever the
color of the gradient and color of text, reading is very difficult for
me, sometimes impossible (I have also the same problems on paper, such
as magazines or flyers).

Best regards,
Monique

> On Tue, May 22, 2012 at 11:57 PM, John Foliot< = EMAIL ADDRESS 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


--
Accessibilité et qualité des sites Web
Monique Brunel - Conférences - Ateliers - Conseil
| http://blog.webatou.info | Tél. +32(0)473 25 81 94
| www.opquast.com | www.openweb.eu.org | www.mozilla-belgium.org |