WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Color contrast with images disabled - violation?

for

From: JP Jamous
Date: Jan 30, 2017 1:52PM

Answers below.

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Preast, Vanessa
Sent: Monday, January 30, 2017 2:46 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: [WebAIM] Color contrast with images disabled - violation?

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?
Correct

* If there is sufficient color contrast between text and image, must it also have sufficient contrast with the background color of the <div>?
It is best if the image background and Div background colors are similar. If not, make sure that the image background color is less than the text in the image by 4.5:1


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?
Absolutely.
Best,
Vanessa