AA级可访问性-使用文本阴影可增强色彩对比度 [英] AA Level Accessibility - Colour Contrast boosted using text shadow

问题描述

我有一个要按照WCAG 2.0 AA Level规范进行编码的站点，并且其中一个按钮的颜色对比度无法通过.

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.

背景-#D57405前景-#FFF

Background - #D57405 Foreground - #FFF

是否可以使用文本阴影来增强对比度–这会被视为合格吗?

Is it possible to use text-shadow to boost the contrast – would that be seen as a pass?

我可以为不支持文本阴影的浏览器提供不同的颜色，但我想尝试将按钮的颜色保持不变，以符合大多数用户的品牌准则.作为背景-我正在使用没有粗体变化的网络字体，而且我也不想对粗体进行仿造.另外，我无法将字体大小更改为18pt.

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.

谢谢

编辑-对于任何遇到此问题的人:

EDIT - For anyone stumbling across this question:

"字母周围的背景可以选择，也可以阴影，这样即使字母与整个背景之间没有对比度，也可以使它们后面的背景保持4.5:1的对比度." http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G18

"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

(我使用粗体)

推荐答案

WCAG是一个有趣的标准，因为它很难满足并且很难自动化测试.使用批判性思维并为自己的立场辩护通常很重要.您的情况就是一个很好的例子.

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.

此外，我还认为阴影需要清除，以确保文本仍然可读.我强烈建议您将此问题的一部分带到 User Experience.SE ，以获得他们对橙色背景上的白色文本的看法，因为他们也许能够提供与您的品牌保持一致的更可重用的替代方案.

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.

这篇关于AA级可访问性-使用文本阴影可增强色彩对比度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！