E-mail List Archives
Thread: using glows for contrast
Number of posts in this thread: 12 (In chronological order)
From: Sandy Feldman
Date: Wed, Mar 13 2019 10:00AM
Subject: using glows for contrast
No previous message | Next message →
hey all,
https://www.inclusivemedia.ca/clients/glow/
I am using a black glow around white text to provide contrast. There's
an article on WebAim, "Contrast and Color Accessibility" that says this
is ok.
https://webaim.org/articles/contrast/
The page fails a WAVE, aXe, and SiteImprove. It passes Lighthouse. I
need to be able to put text over an image and have it stay readable even
when the background is light. What do you think?
--
Sandy
sandyfeldman.com
From: Patrick H. Lauke
Date: Wed, Mar 13 2019 10:30AM
Subject: Re: using glows for contrast
← Previous message | Next message →
On 13/03/2019 16:00, Sandy Feldman wrote:
> hey all,
>
> https://www.inclusivemedia.ca/clients/glow/
>
> I am using a black glow around white text to provide contrast. There's
> an article on WebAim, "Contrast and Color Accessibility" that says this
> is ok.
> https://webaim.org/articles/contrast/
Without seeing it in action over an actual representative image, I'd say
that yes conceptually that's ok. Of course, if the image is very
visually busy, a stronger/thicker glow will be better than a super-thin
one. Noting also that even if you define the glow as being black, it
won't "start" on the outskirts of the text as pure black..it's already a
bit smudged/fudged due to the blur, so more like a dark gray. Something
to look out for and adjust if possible/needed (sadly, text shadow does
not have a value to define an overall thickness before the blur takes
place). Maybe use the stacked/offset text shadow technique from
https://css-tricks.com/adding-stroke-to-web-text/ to guarantee that at
least the first pixel around the text is pure black.
> The page fails a WAVE, aXe, and SiteImprove. It passes Lighthouse.
Most automated tools can't test these sorts of situations (as it really
depends even on things like the blur value used, and how much that would
affect the end result). I even suspect that Lighthouse passes this not
because it has correctly worked out what you're doing, but rather
because it took a very high-level "there's text shadow with this
particular color, so regardless of blur/offset i'm going to just compare
text color and text shadow color). What I'm trying to say is probably:
don't trust automated tools for anything nuanced like this.
P
--
Patrick H. Lauke
www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke
From: Sandy Feldman
Date: Wed, Mar 13 2019 10:44AM
Subject: Re: using glows for contrast
← Previous message | Next message →
Thanks Patrick!
https://css-tricks.com/text-stroke-stuck-middle/
I've used this on an H2. It looks very wonky in chrome, a little odd in
FireFox, and not too bad in Safari. Not really usable yet, I don't think.
https://www.inclusivemedia.ca/clients/glow/
Sandy
On 2019-03-13 12:30 p.m., Patrick H. Lauke wrote:
> On 13/03/2019 16:00, Sandy Feldman wrote:
>> hey all,
>>
>> https://www.inclusivemedia.ca/clients/glow/
>>
>> I am using a black glow around white text to provide contrast.
>> There's an article on WebAim, "Contrast and Color Accessibility" that
>> says this is ok.
>> https://webaim.org/articles/contrast/
>
> Without seeing it in action over an actual representative image, I'd
> say that yes conceptually that's ok. Of course, if the image is very
> visually busy, a stronger/thicker glow will be better than a
> super-thin one. Noting also that even if you define the glow as being
> black, it won't "start" on the outskirts of the text as pure
> black..it's already a bit smudged/fudged due to the blur, so more like
> a dark gray. Something to look out for and adjust if possible/needed
> (sadly, text shadow does not have a value to define an overall
> thickness before the blur takes place). Maybe use the stacked/offset
> text shadow technique from
> https://css-tricks.com/adding-stroke-to-web-text/ to guarantee that at
> least the first pixel around the text is pure black.
>
>> The page fails a WAVE, aXe, and SiteImprove. It passes Lighthouse.
>
> Most automated tools can't test these sorts of situations (as it
> really depends even on things like the blur value used, and how much
> that would affect the end result). I even suspect that Lighthouse
> passes this not because it has correctly worked out what you're doing,
> but rather because it took a very high-level "there's text shadow with
> this particular color, so regardless of blur/offset i'm going to just
> compare text color and text shadow color). What I'm trying to say is
> probably: don't trust automated tools for anything nuanced like this.
>
> P
--
Sandy
sandyfeldman.com
From: glen walker
Date: Wed, Mar 13 2019 10:45AM
Subject: Re: using glows for contrast
← Previous message | Next message →
If you look close, the page doesn't fail under axe. In the upper left of
the results, there's an "all issues" dropdown (to the left of the 'i' info
icon). If the dropdown is set to "all issues", it's going to show
violations, needs review, and best practices and your contrast issue will
be listed. If you change the dropdown to "violations", then you won't see
a contrast issue. The "needs review" shows the contrast issue because it
says it doesn't know if it's a true contrast issue.
I'm not sure if all contrast issues fall under "needs review" for axe. I
tried a simple case with:
<a href="#" style="color:white">hello</a>
<div style="color:white">
<a href="#" style="color:white">there</a>
</div>
<div style="background-color:white">
<a href="#" style="color:white">world</a>
</div>
and all links came under "needs review". Because there are lots of tricks
you can do in CSS to make the contrast ok, axe probably isn't checking the
CSS and just says you need to manually check it. If you look at the axe
plugin page (both chrome and firefox), the #3 item in the description says:
3. It has zero false positives (bugs notwithstanding)
So axe is going to lean on the side of caution and not flag it as an issue
and say you should manually check it.
And since it doesn't fail under axe, it won't fail under Lighthouse
either. Although if you look at the Lighthouse report under "passed
audits", it says all color contrast is satisfactory, which doesn't seem
right.
From: Sandy Feldman
Date: Wed, Mar 13 2019 11:00AM
Subject: Re: using glows for contrast
← Previous message | Next message →
Glen, thanks for clarifying that. That makes sense!
Sandy
On 2019-03-13 12:45 p.m., glen walker wrote:
> If you look close, the page doesn't fail under axe. In the upper left of
> the results, there's an "all issues" dropdown (to the left of the 'i' info
> icon). If the dropdown is set to "all issues", it's going to show
> violations, needs review, and best practices and your contrast issue will
> be listed. If you change the dropdown to "violations", then you won't see
> a contrast issue. The "needs review" shows the contrast issue because it
> says it doesn't know if it's a true contrast issue.
>
> I'm not sure if all contrast issues fall under "needs review" for axe. I
> tried a simple case with:
>
> <a href="#" style="color:white">hello</a>
>
> <div style="color:white">
> <a href="#" style="color:white">there</a>
> </div>
>
> <div style="background-color:white">
> <a href="#" style="color:white">world</a>
> </div>
>
> and all links came under "needs review". Because there are lots of tricks
> you can do in CSS to make the contrast ok, axe probably isn't checking the
> CSS and just says you need to manually check it. If you look at the axe
> plugin page (both chrome and firefox), the #3 item in the description says:
>
> 3. It has zero false positives (bugs notwithstanding)
>
> So axe is going to lean on the side of caution and not flag it as an issue
> and say you should manually check it.
>
> And since it doesn't fail under axe, it won't fail under Lighthouse
> either. Although if you look at the Lighthouse report under "passed
> audits", it says all color contrast is satisfactory, which doesn't seem
> right.
> > > > >
--
Sandy
sandyfeldman.com
From: England, Kristina
Date: Wed, Mar 13 2019 11:29AM
Subject: Re: using glows for contrast
← Previous message | Next message →
I think, back to Patrick's point, the glow may need to be thicker. I'm having a hard time seeing the glow test on Safari, but the last "We have the same contrast ratio" shadow effect of the WebAIM example is quite easy to read on all three browsers (Firefox, Chrome, and Safari). Of course, as Patrick mentioned, it's hard to really confirm without a visually busy image (assuming this text is going over an image, you would want to come up with a few images where you could really test the thickness of the glow). I would ask the customer for a few sample images they might use or pull a few off the web that you think may be good gut checks of the glow. A manual test is always best.
From: Sandy Feldman
Date: Wed, Mar 13 2019 11:52AM
Subject: Re: using glows for contrast
← Previous message | Next message →
hey Kristina, and all of you -
Thanks for taking the time to help me thing this through!
The WebAIM example is an image, so cross-browser trouble doesn't come
into it. I have just put some glowing text with 2 different thicknesses
on an image. What do you think?
https://www.inclusivemedia.ca/clients/glow/
--
Sandy
sandyfeldman.com
On 2019-03-13 1:29 p.m., England, Kristina wrote:
> I think, back to Patrick's point, the glow may need to be thicker. I'm having a hard time seeing the glow test on Safari, but the last "We have the same contrast ratio" shadow effect of the WebAIM example is quite easy to read on all three browsers (Firefox, Chrome, and Safari). Of course, as Patrick mentioned, it's hard to really confirm without a visually busy image (assuming this text is going over an image, you would want to come up with a few images where you could really test the thickness of the glow). I would ask the customer for a few sample images they might use or pull a few off the web that you think may be good gut checks of the glow. A manual test is always best.
>
> > > > >
From: glen walker
Date: Wed, Mar 13 2019 12:33PM
Subject: Re: using glows for contrast
← Previous message | Next message →
> the glow may need to be thicker.
From a UX perspective, yes, the glow might have to be thicker. The
guideline doesn't specify how thick a font border or font glow/halo has to
be.
See "note 5" under
https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html#contrast-ratiodef
From: Patrick H. Lauke
Date: Wed, Mar 13 2019 12:54PM
Subject: Re: using glows for contrast
← Previous message | Next message →
On 13/03/2019 17:52, Sandy Feldman wrote:
> hey Kristina, and all of you -
>
> Thanks for taking the time to help me thing this through!
>
> The WebAIM example is an image, so cross-browser trouble doesn't come
> into it. I have just put some glowing text with 2 different thicknesses
> on an image. What do you think?
>
> https://www.inclusivemedia.ca/clients/glow/
Note that making the last value of the text-shadow larger only results
in a more smeared out and faint shadow, which lowers its
opacity/darkness even further. Indeed, checking your current example
with a Color Contrast Analyser and trying to pick the darkest possible
bit of the shadow close to the text, I get a value of approx #CDCDCD
which against white still only gives me a contrast ratio of 1.6:1 (in
the bits of the window in the image where it's pure white).
So just to check: did you try the "4 shadows" technique, i.e. changing
text-shadow to something like
text-shadow: -1px 0px 2px #000, 0px 1px 2px #000, -1px 1px 2px #000, 1px
-1px 2px #000;
Trying it myself (at least briefly checking in Chrome/Windows), that
gives me a far more pleasant and dark outline glow, which comes very
close to being actual black right on the periphery of the white
characters, and gives a really good strong contrast ratio.
An alternative, of course, could be to apply a solid background behind
the text, with a tiny bit of semi-transparency to let the underlying
picture shine through, like
background: #00000089;
which even on the lightest bit of the image guarantees a contrast of
4.5:1 for white text (and if you're actually using large text like in
that example, can drop it to background: #00000070 for a ratio of 3.2:1)
P
--
Patrick H. Lauke
www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke
From: Sandy Feldman
Date: Wed, Mar 13 2019 4:09PM
Subject: Re: using glows for contrast
← Previous message | Next message →
Patrick - "4 shadows" technique rocks! Thank you very much.
https://www.inclusivemedia.ca/clients/glow/
--
Sandy
sandyfeldman.com
On 2019-03-13 2:54 p.m., Patrick H. Lauke wrote:
> On 13/03/2019 17:52, Sandy Feldman wrote:
>> hey Kristina, and all of you -
>>
>> Thanks for taking the time to help me thing this through!
>>
>> The WebAIM example is an image, so cross-browser trouble doesn't come
>> into it. I have just put some glowing text with 2 different
>> thicknesses on an image. What do you think?
>>
>> https://www.inclusivemedia.ca/clients/glow/
>
> Note that making the last value of the text-shadow larger only results
> in a more smeared out and faint shadow, which lowers its
> opacity/darkness even further. Indeed, checking your current example
> with a Color Contrast Analyser and trying to pick the darkest possible
> bit of the shadow close to the text, I get a value of approx #CDCDCD
> which against white still only gives me a contrast ratio of 1.6:1 (in
> the bits of the window in the image where it's pure white).
>
> So just to check: did you try the "4 shadows" technique, i.e. changing
> text-shadow to something like
>
> text-shadow: -1px 0px 2px #000, 0px 1px 2px #000, -1px 1px 2px #000,
> 1px -1px 2px #000;
>
> Trying it myself (at least briefly checking in Chrome/Windows), that
> gives me a far more pleasant and dark outline glow, which comes very
> close to being actual black right on the periphery of the white
> characters, and gives a really good strong contrast ratio.
>
> An alternative, of course, could be to apply a solid background behind
> the text, with a tiny bit of semi-transparency to let the underlying
> picture shine through, like
>
> background: #00000089;
>
> which even on the lightest bit of the image guarantees a contrast of
> 4.5:1 for white text (and if you're actually using large text like in
> that example, can drop it to background: #00000070 for a ratio of 3.2:1)
>
> P
From: Patrick H. Lauke
Date: Wed, Mar 13 2019 5:36PM
Subject: Re: using glows for contrast
← Previous message | Next message →
On 13/03/2019 22:09, Sandy Feldman wrote:
> Patrick - "4 shadows" technique rocks! Thank you very much.
>
> https://www.inclusivemedia.ca/clients/glow/
Playing some more, turns out you get an even closer effect to a proper
outer stroke but just layering a large number of shadows, without any
offset. Seems very subtly darker/smoother.
https://codepen.io/patrickhlauke/pen/ZPvmog
P
--
Patrick H. Lauke
www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke
From: Sandy Feldman
Date: Wed, Mar 13 2019 7:27PM
Subject: Re: using glows for contrast
← Previous message | No next message
https://www.inclusivemedia.ca/clients/glow/
wow, Patrick. That looks really, really good! The CSS looks like command
V got stuck, but it really works. THANK YOU!
Sandy
On 2019-03-13 7:36 p.m., Patrick H. Lauke wrote:
> On 13/03/2019 22:09, Sandy Feldman wrote:
>> Patrick - "4 shadows" technique rocks! Thank you very much.
>>
>> https://www.inclusivemedia.ca/clients/glow/
>
> Playing some more, turns out you get an even closer effect to a proper
> outer stroke but just layering a large number of shadows, without any
> offset. Seems very subtly darker/smoother.
>
> https://codepen.io/patrickhlauke/pen/ZPvmog
>
> P