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

Excellent solution! Thanks much

On Fri, Jul 15, 2022 at 1:20 PM Marcos Villaseñor <
villasenor.marcos@gmail.com> wrote:

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