0

So I'm trying to apply text-shadow to white large text over a gradient background in order to meet the WCAG AA contrast ratio requirements. I am following procedure of checking the gradient where contrast is lowest. The foreground is #e1dee6 while the text is white. On its own it does not meet the requirements so I am adding a text-shadow of #7f7e83 which brings the ratio at 3:1 which is acceptable, however the text does not look well with the shadow on all four sides so I'm wondering if two sides are accepted as you can see in the attached image:

image showing the two side text-shadow of #7f7e83 colour applied to white text over a #e1dee6 colour background

The bottom and right are ok but the left and top come at about 1.45:1. Is two sides ok or all 4 sides of the text need to meet the WCAG AA requirements ?

UPDATE:

I found another related question on stackexchange and according to the comments, quoting slugolicios here:

"just make sure the drop shadow goes all the way around the letter (more of an outline than a shadow). if the shadow is only on 2 sides, then it will still fail on the sides that don't have a shadow and will be an overall failure (even though two sides conformed)"

https://ux.stackexchange.com/questions/123863/do-drop-shadows-count-for-accessibility

Until there is official mentioning that text-shadow on 2 sides is enough to pass the WCAG, I'll have to take this advice.

williambc
  • 1
  • 2
  • Hi William, welcome to SO! As I understand it the 'overal' contrast should be sufficient without a darker shadow. Logic says, given that contrast, you can use a shadow to emphasize text even more. How the shadow is constructed should not matter as you already have sufficient contrast. [How to Meet WCAG (Quick Reference)](https://www.w3.org/WAI/WCAG21/quickref/?currentsidebar=%23col_customize&tags=contrast%2Ctext%2Cvisual-cues&levels=a%2Caaa&technologies=wai-aria%2Cjs%2Cserver%2Csmil%2Cpdf%2Cflash%2Csl&showtechniques=143%2C1411).... – Rene van der Lende Sep 15 '20 at 13:24
  • Thank you Rene, glad to be here! Here I find it's pointed out that "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" [https://stackoverflow.com/questions/21106622/aa-level-accessibility-colour-contrast-boosted-using-text-shadow] (AA Level Accessibility) – williambc Sep 15 '20 at 13:40
  • Even better, however, it says nothing about **how** a shadow should be constructed (xy and blur wise). Will be hard to figure out if you don't have (hardware)tools to measure the contrast. Check with a few `

    ` with and without shadow alternatives, squint your eyes and see what happens. Yep, doing it the budget way....

     – Rene van der Lende Sep 15 '20 at 13:50
  • Yes, I couldn't find anything stating whether the shadow should be applied on all sides or not. The reason for choosing a shadow is that the initial colour contrast does not comply with the requirements. Personally, I find the two sides of text-shadow applied sufficient (testing the budged way) but I don't know whether that passes ok with WCAG AA – williambc Sep 15 '20 at 14:15
  • Here's another answer I recently gave on a similar question with a colored (rainbow) background: [SO63761688](https://stackoverflow.com/a/63770279/2015909), not WCAG, but you get the idea... – Rene van der Lende Sep 15 '20 at 14:26

0 Answers0