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:
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:
It's close-but-no-cigar:
(It has text-shadow: 0px 0px 1px rgb(55, 90, 99) with color: #f7f6f6 on background: #39acc9.)
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.
Under AX_COLOR_01, it mentions that:
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:
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:The question was asked on the WCAG mailing list:
which led to this response:
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:
It's close-but-no-cigar:
(It has
text-shadow: 0px 0px 1px rgb(55, 90, 99)
withcolor: #f7f6f6
onbackground: #39acc9
.)