2

I'm interested in understanding whether there has been any research or confirmed values for using the text-shadow property with the goal of meeting WCAG minimum colour contrast values.

In my particular use case, I have a button component which doesn't meet WCAG 2.1 AA for some Whitelabel clients. I'm seeking a robust solution using text-shadow to accommodate non-conforming colour pairings.

Specifically, I'd like to know things like:

  • How much shadow is enough to constitute the adjacent element in WCAG terms
  • If I pick a shadow colour that adequately contrasts as a solid background, but only applies it as a shadow, is that still enough contrast? or would I need to pick a colour that contrasts in a graduated state? (maybe that's higher contrast than solid) - if that's the case, how can I calculate this?
  • Are there any tools that either assess or generate confirming text-shadow values?

EDIT In answer to the third question there does appear to be a plugin for chrome which performs a pixel by pixel scan of a webpage and whilst it requires a bit of tweaking and judgement, it's about the best thing I've found for this problem: https://chrome.google.com/webstore/detail/color-contrast-analyzer/dagdlcijhfbmgkjokkjicnnfimlebcll/related?hl=en

The project is on Github here: https://github.com/gdkraus/color-contrast-chrome

1 Answer 1

3

Using text-shadow in the right way ( 4.5:1 contrast ratio between text color and shadow color ) will increase your contrast to theoretically pass the WCAG.

The issue is that it might be hard to validate the contrast with the tools.

This is what W3 says about contrast and shadow, strokes :

If the background or the letters vary in relative luminance (or are patterned) then the background around the letters can be chosen or shaded so that the letters maintain a 4.5:1 contrast ratio with the background behind them even if they do not have that contrast ratio with the entire background.

For example, if a letter is lighter at the top than it is a the bottom, it may be difficult to maintain the contrast ratio between the letter and the background over the full letter. In this case, the designer might darken the background behind the letter, or add a thin black outline (at least one pixel wide) around the letter in order to keep the contrast ratio between the letter and the background above 4.5:1.

https://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/G18

As mentioned in the comment below. One way to determine the contrast would be to take the lightest area of the shadow :

renter image description here

Pick it up as a resulting color:

enter image description here

And run it in the contrast checker :

enter image description here

5
  • Yeah, I think this confirms what I suspect, I think the challenge is how to work out how much text-shadow is needed to provide at least 1px "worth" of darker BG colour before it starts fading out and doesn't offer the intended contrast. Oct 18, 2021 at 11:04
  • I assume, for example, if using a #000 4px blur that 1/4 of the blur would be say 100% of the colour, 1/4 75% etc. But I'm not sure if the blur algorithm is linear, and if the shadow is obscured by the text at all, whether offsetting is necessary or not :*( Oct 18, 2021 at 11:06
  • You can only guess by color picking the resulting color from the background combined with the drop shadow in the lighest area of shadow and add it in the contrast checker. So officially there's no way to measure it but you can manually ensure the coverage of it. Check my post for updated example.
    – Chris
    Oct 18, 2021 at 11:33
  • After some extensive searching I have found this plugin which is quite interesting chrome.google.com/webstore/detail/color-contrast-analyzer/… Oct 18, 2021 at 12:49
  • Great answer, i think you approach is literally what that plugin does, I'll update the question Oct 18, 2021 at 12:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.