WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: using glows for contrast

for

From: Sandy Feldman
Date: Mar 13, 2019 10:44AM

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