WebAIM - Web Accessibility In Mind

E-mail List Archives

Color contrast with images disabled - violation?


From: Preast, Vanessa
Date: Jan 30, 2017 1:46PM


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?