WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: using glows for contrast

for

From: Patrick H. Lauke
Date: Mar 13, 2019 10:30AM

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