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 elementin 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
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