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>
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>
> Sent: 15 July 2022 14:59
> To: 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
>
>
>