问题
I have a site that I'm coding to WCAG 2.0 AA Level compliance and one of the buttons has a colour contrast that does not pass.
Background - #D57405 Foreground - #FFF
Is it possible to use text-shadow to boost the contrast – would that be seen as a pass?
I can serve up a different colour for browsers that don't support text-shadow, but I'd like to try to keep the button the same colour to match brand guidelines for the majority of users. As background - I'm using a web font that doesn't have a bold variation, and I don't want to faux bold it. Also I can’t change the font size to 18pt.
thanks
EDIT - For anyone stumbling across this question:
"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" http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G18
(my use of bold)
回答1:
WCAG is an interesting standard as its very difficult to meet and its difficult to automate tests. Often its important to use critical thinking, and have a solid argument for a position. Your case is a prime example of that.
If I had white text on a white background, with a clear, black outline on the text common sense suggests you would pass. If you are able to render the text clearly with an outline that is contrasted to either the text or the background you'd be able to make a case for passing this test. However, the only viable solution is a much darker outline (you can't go lighter than the white text) which may be visually clashing, so take precaution.
Also, I'd argue that the shadow would need to be clear to ensure that the text is still readable. I'd strongly recommend taking part of this question to User Experience.SE to get their opinion on a white text on an orange background, as they may be able to offer a more redable alternative that keeps with your branding.
回答2:
Is it possible to invert the Foreground colors ? #000 will pass the AA in normal. But shadow will not be considered by automatic checker.
来源：https://stackoverflow.com/questions/21106622/aa-level-accessibility-colour-contrast-boosted-using-text-shadow