WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: using glows for contrast

for

From: Sandy Feldman
Date: Mar 13, 2019 4:09PM

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