E-mail List Archives
Thread: Removing CSS Background image for legibility an Accessibility requirement?
Number of posts in this thread: 21 (In chronological order)
From: Ramakrishnan Subramanian
Date: Tue, Mar 15 2022 2:03AM
Subject: Removing CSS Background image for legibility an Accessibility requirement?
No previous message | Next message →
Hi Folks,
I have a query on testing a Web page by removing the background image.
I am aware of the scenario of failures where the page content fails
when a background CSS image is used for informative purpose. But I am
not sure about the following scenario hence request your inputs. the
scenario which we have is White text with background image. When we
remove the background CSS image, the White text will not be visible
because it is white on white. Is this a WCAG or Section 508 failure?
Is it a common practice to test a web page by removing the CSS
decorative image to see whether the foreground content is legible?
--
Thanks and Regards
Ramakrishnan
From: JP Jamous
Date: Tue, Mar 15 2022 7:07AM
Subject: Re: Removing CSS Background image for legibility anAccessibility requirement?
← Previous message | Next message →
Ramakrishnan,
Why not remove the background image and test, while leaving the CSS alone?
Is it a WCAG failure?
Of course, because white on white provide no visible content. That fails color contrast big time.
It would not impact screen reader users, as all the content would be in the HTML markup. However, low-vision, color-blind and all sighted users are blocked tremendously from reading white on white.
If the concern is the background image, then you have to validate the color contrast and how is the background impacting the foreground text. Honestly, I am not a fan of background images that contain any text or symbols.
However, if the background image serves as a background color for the page, as long as the color contrast is not impacting the foreground content, you can pass it.
From: Patrick H. Lauke
Date: Tue, Mar 15 2022 7:39AM
Subject: Re: Removing CSS Background image for legibility an Accessibility requirement?
← Previous message | Next message →
On 15/03/2022 13:07, JP Jamous wrote:
> Is it a WCAG failure?
> Of course, because white on white provide no visible content. That fails color contrast big time.
However, you're not testing the site as sent by the author - a site that
was using CSS and images as its accessibility-supported baseline
technology. This is essentially testing that once a user has customised
their experience, things still work, which is outside of WCAG. So I'd
disagree here, it's not a WCAG failure (though there is a failure
technique - non-normative, of course -
https://www.w3.org/WAI/WCAG21/Techniques/general/G148 that seems to
suggest that not setting a fallback colour in addition to an image
background is a failure ... but I'm not sold on this being a hard
failure, again because it relates to the user having modified how the
author-provided content is displayed. I'd say it's more best practice...
Long story short, from my point of view: no, you don't really test sites
these days with CSS or images or JavaScript disabled. That's some
hang-up from old WCAG 1.0 / original Section 508 (before it was 508
Refresh, incorporating WCAG 2.0 by reference). So the scenario of "with
the background image off, you can't see the white on white text" is, to
me, a best practice case rather than an outright failure of WCAG. But
opinions may be split here...
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
From: Steve Green
Date: Tue, Mar 15 2022 9:19AM
Subject: Re: Removing CSS Background image for legibility an Accessibility requirement?
← Previous message | Next message →
I agree entirely with Patrick's view on this. However, for those of us working on UK central government websites, it is worth noting that the GDS Service Manual requires that the websites are fully usable without images and/or stylesheets and/or JavaScript, although this is just a policy and has nothing to do with WCAG.
https://www.gov.uk/service-manual/technology/using-progressive-enhancement
Steve Green
Managing Director
Test Partners Ltd
From: Jared Smith
Date: Tue, Mar 15 2022 10:52AM
Subject: Re: [EXT]Removing CSS Background image for legibility an Accessibility requirement?
← Previous message | Next message →
> This is essentially testing that once a user has customised their experience, things still work, which is outside of WCAG.
As a counter-point, the Resize Text, Reflow, User of Color, and Text Spacing success criteria in WCAG all require certain levels of support and accessibility after end-user customizations have been applied. All of these - resizing text, zooming, overriding colors or text styles, etc. - can result in text with very low or no contrast if a background color is not defined or inherited. In these cases, text might be repositioned outside the boundaries of a background image or the system may not be able to calculate sufficient color changes when a background is in place, but not a fall-back CSS background color. G183 supports text accessibility in these cases.
Additionally, images might fail to download or the user might be in a very low bandwidth environment, so having a fall-back color ensures legible text in these situations that may be out of the user's control.
Jared Smith
WebAIM
From: Steve Green
Date: Tue, Mar 15 2022 10:55AM
Subject: Re: [EXT]Removing CSS Background image for legibility an Accessibility requirement?
← Previous message | Next message →
True, but none of those involve the intentional removal of a relied-on, accessibility supported technology. And WCAG does not require us to test what happens if any file types fail to load.
Steve
From: Tom Livingston
Date: Tue, Mar 15 2022 11:29AM
Subject: Re: Removing CSS Background image for legibility an Accessibility requirement?
← Previous message | Next message →
On Tue, Mar 15, 2022 at 9:39 AM Patrick H. Lauke < = EMAIL ADDRESS REMOVED = > wrote:
>
> On 15/03/2022 13:07, JP Jamous wrote:
>
> > Is it a WCAG failure?
> > Of course, because white on white provide no visible content. That fails color contrast big time.
>
> However, you're not testing the site as sent by the author - a site that
> was using CSS and images as its accessibility-supported baseline
> technology. This is essentially testing that once a user has customised
> their experience, things still work, which is outside of WCAG. So I'd
> disagree here, it's not a WCAG failure (though there is a failure
> technique - non-normative, of course -
> https://www.w3.org/WAI/WCAG21/Techniques/general/G148 that seems to
> suggest that not setting a fallback colour in addition to an image
> background is a failure ... but I'm not sold on this being a hard
> failure, again because it relates to the user having modified how the
> author-provided content is displayed. I'd say it's more best practice...
>
> Long story short, from my point of view: no, you don't really test sites
> these days with CSS or images or JavaScript disabled. That's some
> hang-up from old WCAG 1.0 / original Section 508 (before it was 508
> Refresh, incorporating WCAG 2.0 by reference). So the scenario of "with
> the background image off, you can't see the white on white text" is, to
> me, a best practice case rather than an outright failure of WCAG. But
> opinions may be split here...
>
> P
> --
> Patrick H. Lauke
>
What is the best way to plan a fallback for when a bg image doesn't
load when using white type over a background image? A dark background
color also specified? This seems like it would have some issues, like
scaling text causing the BG color to be visible.
--
Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
#663399
From: Swift, Daniel P.
Date: Tue, Mar 15 2022 11:35AM
Subject: Re: Removing CSS Background image for legibility an Accessibility requirement?
← Previous message | Next message →
It should just work if you set the background color first and then background image/size afterwards. Something like this:
#container {
color: #FFF;
background-color: #000;
background: url(image.jpg);
background-size: cover;
}
Daniel Swift, MBA
Senior Web Specialist
University Communications and Marketing
West Chester University
610.738.0589
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Tom Livingston
Sent: Tuesday, March 15, 2022 1:29 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Removing CSS Background image for legibility an Accessibility requirement?
On Tue, Mar 15, 2022 at 9:39 AM Patrick H. Lauke < = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >> wrote:
>
> On 15/03/2022 13:07, JP Jamous wrote:
>
> > Is it a WCAG failure?
> > Of course, because white on white provide no visible content. That fails color contrast big time.
>
> However, you're not testing the site as sent by the author - a site that
> was using CSS and images as its accessibility-supported baseline
> technology. This is essentially testing that once a user has customised
> their experience, things still work, which is outside of WCAG. So I'd
> disagree here, it's not a WCAG failure (though there is a failure
> technique - non-normative, of course -
> https://www.w3.org/WAI/WCAG21/Techniques/general/G148<https://www.w3.org/WAI/WCAG21/Techniques/general/G148> that seems to
> suggest that not setting a fallback colour in addition to an image
> background is a failure ... but I'm not sold on this being a hard
> failure, again because it relates to the user having modified how the
> author-provided content is displayed. I'd say it's more best practice...
>
> Long story short, from my point of view: no, you don't really test sites
> these days with CSS or images or JavaScript disabled. That's some
> hang-up from old WCAG 1.0 / original Section 508 (before it was 508
> Refresh, incorporating WCAG 2.0 by reference). So the scenario of "with
> the background image off, you can't see the white on white text" is, to
> me, a best practice case rather than an outright failure of WCAG. But
> opinions may be split here...
>
> P
> --
> Patrick H. Lauke
>
What is the best way to plan a fallback for when a bg image doesn't
load when using white type over a background image? A dark background
color also specified? This seems like it would have some issues, like
scaling text causing the BG color to be visible.
--
Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
#663399
From: Tom Livingston
Date: Tue, Mar 15 2022 11:57AM
Subject: Re: Removing CSS Background image for legibility an Accessibility requirement?
← Previous message | Next message →
On Tue, Mar 15, 2022 at 1:36 PM Swift, Daniel P. < = EMAIL ADDRESS REMOVED = > wrote:
>
> It should just work if you set the background color first and then background image/size afterwards. Something like this:
>
> #container {
> color: #FFF;
> background-color: #000;
> background: url(image.jpg);
> background-size: cover;
> }
>
> Daniel Swift, MBA
> Senior Web Specialist
> University Communications and Marketing
> West Chester University
> 610.738.0589
>
>
> What is the best way to plan a fallback for when a bg image doesn't
> load when using white type over a background image? A dark background
> color also specified? This seems like it would have some issues, like
> scaling text causing the BG color to be visible.
>
>
> --
>
> Tom Livingston | Senior Front End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>
>
I get that, but I may not want to use background-size:cover; in every
situation. THere could still be cases where the black could peek from
behind the image.
--
Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
#663399
From: Swift, Daniel P.
Date: Tue, Mar 15 2022 12:32PM
Subject: Re: Removing CSS Background image for legibility an Accessibility requirement?
← Previous message | Next message →
Hmmm â you might have to explore other image size options on a case-by-case basis. Alternatively, you might be able to see if the image loaded using JS. I'm not sure if that will work when the image is a CSS background. If the image fails to load, set a class or background color at that point.
Daniel Swift, MBA
Senior Web Specialist
University Communications and Marketing
West Chester University
610.738.0589
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Tom Livingston
Sent: Tuesday, March 15, 2022 1:57 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Removing CSS Background image for legibility an Accessibility requirement?
On Tue, Mar 15, 2022 at 1:36 PM Swift, Daniel P. < = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >> wrote:
>
> It should just work if you set the background color first and then background image/size afterwards. Something like this:
>
> #container {
> color: #FFF;
> background-color: #000;
> background: url(image.jpg);
> background-size: cover;
> }
>
> Daniel Swift, MBA
> Senior Web Specialist
> University Communications and Marketing
> West Chester University
> 610.738.0589
>
>
> What is the best way to plan a fallback for when a bg image doesn't
> load when using white type over a background image? A dark background
> color also specified? This seems like it would have some issues, like
> scaling text causing the BG color to be visible.
>
>
> --
>
> Tom Livingston | Senior Front End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>
>
I get that, but I may not want to use background-size:cover; in every
situation. THere could still be cases where the black could peek from
behind the image.
--
Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
#663399
From: David Engebretson Jr.
Date: Tue, Mar 15 2022 1:38PM
Subject: Re: Removing CSS Background image for legibility an Accessibility requirement?
← Previous message | Next message →
I'm just starting to follow this thread now and I have a question that may or may not be pertinent:
1. if the background image does load, and said background image has a section of it that matches (or has insufficient contrast to) the color definition of the text in front of it, how does the low vision and/or color blind person discern the text that overlaps that section of the background image?
Thanks for your thoughts and please pardon my ignorance,
David
From: glen walker
Date: Tue, Mar 15 2022 1:41PM
Subject: Re: Removing CSS Background image for legibility an Accessibility requirement?
← Previous message | Next message →
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.
On Tue, Mar 15, 2022 at 1:38 PM David Engebretson Jr. <
= EMAIL ADDRESS REMOVED = > wrote:
>
> 1. if the background image does load, and said background image has a
> section of it that matches (or has insufficient contrast to) the color
> definition of the text in front of it, how does the low vision and/or color
> blind person discern the text that overlaps that section of the background
> image?
>
>
From: Patrick H. Lauke
Date: Tue, Mar 15 2022 6:09PM
Subject: Re: Removing CSS Background image for legibility an Accessibility requirement?
← Previous message | Next message →
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
From: Patrick H. Lauke
Date: Tue, Mar 15 2022 6:17PM
Subject: Re: [EXT]Removing CSS Background image for legibility an Accessibility requirement?
← Previous message | Next message →
On 15/03/2022 16:52, Jared Smith wrote:
>> This is essentially testing that once a user has customised their experience, things still work, which is outside of WCAG.
>
> As a counter-point, the Resize Text, Reflow, User of Color, and Text Spacing success criteria in WCAG all require certain levels of support and accessibility after end-user customizations have been applied. All of these - resizing text, zooming, overriding colors or text styles
As a side note "use of color" is not specifically about "overriding
colors" though, but about users who have trouble distinguishing colors
(so it's not really directly about users that run WHCM or similar ...
it's only a side effect that content that passes "use of color" also
stands a chance of working correctly - all other things being correct -
for users that do run forced colors).
And yes, I agree that resize text, reflow, and text spacing do indeed
skirt into user customisation areas. But their normative definition is
quite clear about that. SCs like contrast (minimum) etc however do not
normatively or informatively state anything about how content should
adapt to user customisations, and certainly not drastic ones like "if
the user overrides CSS" or "if the user has images turned off".
> Additionally, images might fail to download or the user might be in a very low bandwidth environment, so having a fall-back color ensures legible text in these situations that may be out of the user's control.
As Steve mentions, catering for situations where relied-upon
technologies fail is certainly beyond the scope of WCAG. It's of course
best practice, and benefits all users equally, but it's not something
that would lead to a fail.
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
From: Steve Green
Date: Tue, Mar 15 2022 7:08PM
Subject: Re: Removing CSS Background image for legibility an Accessibility requirement?
← Previous message | Next message →
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
From: David Engebretson Jr.
Date: Tue, Mar 15 2022 7:37PM
Subject: Re: Removing CSS Background image for legibility an Accessibility requirement?
← Previous message | Next message →
And, I wonder, with reflow in play:
How can any visual designer test all of the possible instances? I ponder how many different devices, resolutions, and screen sizes there might be...
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...
I use assistive technology (NVDA, JAWS, and Voiceover) to get around the issue but not everyone knows how to use assistive technology.
Thanks,
David
From: Patrick H. Lauke
Date: Wed, Mar 16 2022 2:45AM
Subject: Re: Removing CSS Background image for legibility an Accessibility requirement?
← Previous message | Next message →
On 16/03/2022 01:37, David Engebretson Jr. wrote:
> And, I wonder, with reflow in play:
>
> How can any visual designer test all of the possible instances? I ponder how many different devices, resolutions, and screen sizes there might be...
>
> 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...
There are a few options for designers:
* 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
* 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)
*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
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
From: Sandy Feldman
Date: Wed, Mar 16 2022 9:41AM
Subject: Re: Removing CSS Background image for legibility an Accessibility requirement?
← Previous message | Next message →
<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 ADDRESS 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>
From: Kevin Prince
Date: Mon, Mar 21 2022 4:41PM
Subject: Re: Removing CSS Background image for legibility an Accessibility requirement?
← Previous message | Next message →
Interesting thread - oddly I came across an issue in testing only yesterday that illustrated it perfectly. I've taken it as a failure of 1.3.4 as the image is fine (the text is beautifully clear at all sizes), until you go mobile landscape but that's not actually a valid failure condition as you can reorient.
I should have considered it as 1.4.3 but the cause is the change of position when going from portrait to landscape. At a practical level it is easier for the customer to understand orientation as the issue that needs a fix than contrast.
Kevin
From: glen walker
Date: Mon, Mar 21 2022 4:59PM
Subject: Re: Removing CSS Background image for legibility an Accessibility requirement?
← Previous message | Next message →
If the image isn't loading in landscape mode, that sounds like a functional
bug . The fact that the page reflows when in landscape shows that 1.3.4
passes.
On Mon, Mar 21, 2022 at 4:41 PM Kevin Prince < = EMAIL ADDRESS REMOVED = >
wrote:
> Interesting thread - oddly I came across an issue in testing only
> yesterday that illustrated it perfectly. I've taken it as a failure of
> 1.3.4 as the image is fine (the text is beautifully clear at all sizes),
> until you go mobile landscape but that's not actually a valid failure
> condition as you can reorient.
>
> I should have considered it as 1.4.3 but the cause is the change of
> position when going from portrait to landscape. At a practical level it is
> easier for the customer to understand orientation as the issue that needs a
> fix than contrast.
>
>
From: Kevin Prince
Date: Mon, Mar 21 2022 5:06PM
Subject: Re: Removing CSS Background image for legibility an Accessibility requirement?
← Previous message | No next message
The image loads, but loads such that it obscures the text. Have updated the advice to 1.4.3 which, thankfully, was still in a draft
Kev
Kevin Prince
Product Accessibility & Usability Consultant