WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Removing CSS Background image for legibility an Accessibility requirement?

for

From: Steve Green
Date: Mar 15, 2022 7:08PM

It's actually a lot easier to test the contrast of real text overlaying an image (or any uneven background, such as a gradient) than it used to be. Firefox's built-in colour contrast checker measures the contrast of every pixel in the text against all its surrounding pixels in the background. I have tried all sort of ways to fool it, without success.

The only downside is that it doesn't show which pixels have insufficient contrast or display the number or percentage of such pixels. If you just accept the result at face value, you may report a non-conformance when only one pixel has insufficient contrast.

Steve


-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Patrick H. Lauke
Sent: 16 March 2022 00:09
To: <EMAIL REMOVED>
Subject: Re: [WebAIM] Removing CSS Background image for legibility an Accessibility requirement?

On 15/03/2022 19:41, glen walker wrote:
> They can't, which is why it would fail 1.4.3
>
> 1.4.3 says, "The visual presentation of text *and images of text *has
> a contrast ratio of at least 4.5:1..."
>
> Emphasis on "and images of text" is mine specifically for this question.

But David isn't talking about images of text (i.e. text that's "baked into" an image), but real HTML text that sits over an image.

To answer the question, even in those cases, there still is a requirement for contrast ratio of 4.5:1 / 3:1 for large text. It's just slightly more difficult to test (you'll need to use a contrast tool with a color picker, and compare the text color to the lightest part of the image that it may end up sitting on top of), and then evaluate the resulting ratio.

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