E-mail List Archives
Thread: Color contrast with images disabled - violation?
Number of posts in this thread: 3 (In chronological order)
From: Preast, Vanessa
Date: Mon, Jan 30 2017 1:46PM
Subject: Color contrast with images disabled - violation?
No previous message | Next message →
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
From: JP Jamous
Date: Mon, Jan 30 2017 1:52PM
Subject: Re: Color contrast with images disabled - violation?
← Previous message | Next message →
Answers below.
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Preast, Vanessa
Sent: Monday, January 30, 2017 2:46 PM
To: WebAIM Discussion List < = EMAIL ADDRESS 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
From: Mr K M I Brown
Date: Mon, Jan 30 2017 1:54PM
Subject: Re: Color contrast with images disabled - violation?
← Previous message | No next message
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 ADDRESS 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