Re: Guidance Needed: Color contrast error using Wave tool when text over background image is present

That’s right, though I imagine you meant to write “colour above the image”. Something I have done in the past is to calculate that contrast ratio is met between your text and the semi-transparent colour overlay over #fff. That way (if you use a normal blending mode), you can guarantee that any image you throw at it (and any way the image is resized across breakpoints) will have enough contrast with the text.

From: Kiran <kiranph@gmail.com>
Date: Friday, 15 July 2022 at 18:08
To: Steve Green <steve.green@testpartners.co.uk>
Cc: w3c-wai-ig@w3.org <w3c-wai-ig@w3.org>
Subject: Re: Guidance Needed: Color contrast error using Wave tool when text over background image is present
Thank you so much all for your valuable time and guidance. humbly appreciated.

so summary is irrespective of Image, it is good practice to provide background color beneath the image? correct?

On Fri, Jul 15, 2022 at 9:19 AM Steve Green <steve.green@testpartners.co.uk<mailto:steve.green@testpartners.co.uk>> wrote:

The best option is to measure the colour contrast using the built-in tool in Firefox. As far as I can tell, it measures the contrast between the text and every adjacent pixel in the image. I don't know of any other tool that does this. The process is:



1.       In Firefox dev tools, right-click the element you want to measure and click Show Accessibility Properties in the popup menu.



2.       In most cases, the parent container will be selected in the Accessibility tab. Although it might show the accessible name of the element you want to measure, it is not the right node and no contrast measurements will be displayed.



3.       Expand the node and select the relevant “text leaf” node. The minimum and maximum colour contrast values will be displayed.



https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/index.html#color-contrast

Steve Green
Managing Director
Test Partners Ltd




-----Original Message-----
From: Patrick H. Lauke <redux@splintered.co.uk<mailto:redux@splintered.co.uk>>
Sent: 15 July 2022 14:59
To: w3c-wai-ig@w3.org<mailto:w3c-wai-ig@w3.org>
Subject: Re: Guidance Needed: Color contrast error using Wave tool when text over background image is present



On 15/07/2022 14:38, Kiran wrote:

[...]

> In one section of the page, there is content over a background image.

> (_not referring to Images of text here_) Content over the image is

> clearly visible however Wave shows a contrast error of 1:1, due to the

> white font and white background underneath the image?



That's a shortcoming of Wave, as it should not flag it as an error, but

- since it can't analyse the image itself - it should probably flag it as a warning for you to do a manual check.



> My question is

>

> 1. can this error be ignored?



I would not say "ignore" it. I'd crack open something like CCA https://github.com/ThePacielloGroup/CCAe/ and manually check that the text has sufficient contrast everywhere around it.



Also, consider how the text might be placed over different parts of the image when the user's browser window is resized, zoomed, etc. check most common variations to ensure that that text is always over a dark-enough region of the image. If you can't guarantee that, look at adding something like a solid or dark semi-transparent background colour behind the text itself, so that regardless of where it's placed over the background image, it will have a consistently dark backdrop to guarantee sufficient contrast in all situations.



> 2. is an automated tool showing an error just in case if image doesn't load?



No, it's just a shortcoming of Wave. and likely most other tools out there will flag this as at least a warning/manual check.



> 3. Or do I need to make the background color underneath the image to

> dark color? in order to make WAVE happy? is it important in terms of

> accessibility?



That would be a good best practice, but it's not required per se by WCAG.



P

--

Patrick H. Lauke



https://www.splintered.co.uk/ | https://github.com/patrickhlauke https://flickr.com/photos/redux/ | https://www.deviantart.com/redux

twitter: @patrick_h_lauke | skype: patrick_h_lauke