AA级可访问性 - 使用文本阴影增强颜色对比度

时间:2014-01-14 05:26:10

标签: html css3 contrast wcag2.0

我有一个网站,我正在编码符合WCAG 2.0 AA Level标准,其中一个按钮的颜色对比度没有通过。

背景 - #D57405 前景 - #FFF

是否可以使用文字阴影来增强对比度 - 这会被视为传递吗?

我可以为不支持文字阴影的浏览器提供不同的颜色,但我想尝试保持按钮颜色相同,以符合大多数用户的品牌指南。 作为背景 - 我使用的是没有大胆变化的网络字体,我不想将它加粗。另外,我无法将字体大小更改为18pt。

感谢


编辑 - 对于任何绊倒这个问题的人:

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

(我使用粗体)

2 个答案:

答案 0 :(得分:4)

WCAG是一个有趣的标准,因为它很难满足并且难以自动化测试。通常,重要的是使用批判性思维,并对一个职位有一个坚实的论据。你的案例就是一个很好的例子。

如果我在白色背景上有白色文字,文字上有一个清晰的黑色轮廓常识表示你会通过。如果您能够使用与文本或背景形成对比的轮廓清晰地呈现文本,那么您将能够通过此测试。然而,唯一可行的解​​决方案是更暗的轮廓(你不能比白色文字更轻),这可能会在视觉上发生冲突,所以要采取预防措施。

另外,我认为需要明确阴影以确保文本仍然可读。我强烈建议您将此问题的一部分提交给User Experience.SE,以便在橙色背景上的白色文字上发表意见,因为他们可能会提供更加灵活的替代方案,与您的品牌保持一致。

答案 1 :(得分:0)

是否可以反转前景色? #000将正常通过AA。但是自动检查器不会考虑阴影。