WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: using glows for contrast

for

From: Patrick H. Lauke
Date: Mar 13, 2019 12:54PM

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