GoogleChrome / accessibility-developer-tools

This is a library of accessibility-related testing and utility code.
Apache License 2.0
2.28k stars 363 forks source link

should text shadow affect calculated color contrast? #302

Open techieshark opened 8 years ago

techieshark commented 8 years ago

Under AX_COLOR_01, it mentions that:

The Web Content Accessibility Guidelines 2.0 recommendation is that text has a contrast ratio of at least 4.5:1, or 3:1 for large text.

and it seems that the tool is looking at the contrast difference between the text and the background color.

However, even if you have white text on white background, the text is still readable if a text-shadow is set (effectively creating a background of a different color than the element's background).

To illustrate, consider that even though white text on white background has no difference in color and no contrast, it is still visible:

image

See example on codepen

Using the NoCoffee Chrome extension and setting contrast loss to 40, you can still see the white-on-white text with just the text-shadow property set:

image

The question was asked on the WCAG mailing list:

Can someone use a text shadow in order to meet the colour contrast requirement?

which led to this response:

Yes if done correctly, it can be used to create the contrast needed.

WGAG gives an example [found via this question on stack overflow] of using this method to increase contrast: "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."

p.s. for the record, I'm not meaning to have white on white but rather something like this:

image

It's close-but-no-cigar:

image

(It has text-shadow: 0px 0px 1px rgb(55, 90, 99) with color: #f7f6f6 on background: #39acc9.)

debajit commented 7 years ago

Adding a text-shadow allows me to pass the color contrast tests (4.5:1 ratio) with Color Contrast Analyzer but it looks like the Accessibility Dev Tools ignores text-shadows.