WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Color contrast with images disabled - violation?

for

From: Mr K M I Brown
Date: Jan 30, 2017 1:54PM

Hi Vanessa,

I'd flag both as failures. The image is easier for the designers and developers to see.

If there is a background colour that shows when the image fails to load, it becomes the background for the text so there needs to be a sufficient contrast. An image can fail due to size, network speed, the author failing to load one in, etc. I've been having that conversation with a client today who wants default text to be white on top of an image, with no background colour, and only by switching images off did they realize that might not be a great idea.

For images the contrast is wherever the text is above the image. When I get home I'll dig out an online image/text checker which has been useful at the office.

All the best,
Karl

On 30 January 2017, at 20:46, "Preast, Vanessa" < <EMAIL REMOVED> > wrote:

Hello,

I'm an intermediate to advanced novice when it comes to analyzing web content. Using the WAVE tool, I'm seeing some color contrast errors I'm not sure how to advise fixing.

There are some areas <div> which have white text on top of an image with the predominant color of #51B9A2. WAVE seems to pick up on the text color and the light grey background behind the image. If I disable images (using a web-developer plugin), I am able to see the grey background within <div>. So it seems that there is color contrast with both the text and image as well as the text and the <div> background.


* Text that does not sufficiently contrast with the background image is a color contrast failure, right?
* If there is sufficient color contrast between text and image, must it also have sufficient contrast with the background color of the <div>?

My plan is to advise the webmaster to darken the background images to ensure color contrast is sufficient between foreground text and background image. I also would like to advise that the background under the image within the <div> is also made to have sufficient contrast in case someone turns off the images. Is this appropriate advice?

Best,
Vanessa