WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Sandy Feldman
Date: Mar 16, 2022 9:41AM

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<p>All really good options. Two others - outline the text, or give
it a shadow that goes all the way around.</p>
<p><a moz-do-not-send="true"
href="https://www.a11yready.com/cover-images/">a11yready.com/cover-images/</a><br>
</p>
<div class="moz-signature">Sandy
<p><a href="https://sandyfeldman.com">sandyfeldman.com</a>
<br>
<a href="https://www.a11yready.com/">a11yready.com</a><a>
</a></p>
<a><br>
<br>
</a></div>
<div class="moz-cite-prefix">On 2022-03-16 4:45 a.m., Patrick H.
Lauke wrote:<br>
</div>
<blockquote type="cite"
cite="mid: <EMAIL REMOVED> ">On
16/03/2022 01:37, David Engebretson Jr. wrote:
<br>
<blockquote type="cite">And, I wonder, with reflow in play:
<br>
<br>
How can any visual designer test all of the possible instances?
I ponder how many different devices, resolutions, and screen
sizes there might be...
<br>
<br>
As a formerly sighted person the task seems ominous to me. I'm
hoping you will enlighten me how a segment of a background image
that is white will allow my low vision and/or color blind
colleagues have equal access to HTML text that is also white...
<br>
</blockquote>
<br>
There are a few options for designers:
<br>
* plan all their responsive/adaptive layouts carefully so that
text is guaranteed never to fall over parts of the image that
result in contrast that's too low
<br>
* modify the background image to guarantee that nothing is too
bright (darkening the lightest parts of the image, maybe
overlaying a dark gradient over the original image if they know
that text will be placed over a particular section, like the
bottom third)
<br>
*add an explicit solid backplate/background behind the text, or a
contrasting outline or strong drop shadow or glow behind the text,
to make it contrasting regardless of background image
<br>
<br>
P
<br>
</blockquote>
</body>
</html>