WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Color Contrast and Gradients

for

From: Jared Smith
Date: May 22, 2012 10:13AM

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