问题描述
我看到https://webaim.org/blog/wcag-2-0-and-link-colors/之类的资源上发布了要求,并指出其他要求符合WCAG AA的要求,建议链接与周围文本之间的颜色对比度为3:1(假设非粗体字较小,请注意)字体)。
因此,如果您将这两个要求结合在一起,为了符合AA级标准,您的页面必须具有以下所有条件:
但是,在阅读实际建议时,我没有看到该要求。唯一提及的是one possible technique (G183),以解决Use of Color (1.4.1)问题。对比度的两个部分(Minimum 1.4.3和Enhanced 1.4.6)没有提及此要求。
基于我对WCAG直接提供的文档的理解,在我看来,仅当您没有像链接下划线之类的任何其他可视指示符时,才需要链接与周围文本之间的3:1对比要完全依靠3:1的颜色对比,您需要有一个非彩色的视觉悬停/焦点指示器。
任何人都可以确认或拒绝吗?
解决方法
您是正确的,如果您为链接(例如下划线)添加了第二个标识符,则无需担心周围的对比度问题。
您已经参考了所有相关文档,但是1.4.1 Use of colour中的关键字仅是 (不能用作仅的视觉传达信息的手段)。
如果您使用下划线或类似的符号来表示超链接,则您的链接可以与您的文本使用相同的颜色(尽管我建议使用其他颜色,因为这是预期的行为)。
解释规则/进行思考的一种更好的方法是“如果此页面是黑白的,我该如何传达含义?”。应该使用颜色来增强无色盲人士的体验,但是页面也应该在灰度下工作。
人们经常忽略的关键是,您不能使用颜色来传达任何含义。那么访问链接呢?激活呢?重点呢?
一种检查的好方法
Google chrome现在具有可模拟色盲的过滤器。
访问页面最简单的方法是打开Google Chrome浏览器中的开发人员工具,然后转到“渲染”->“模拟视力缺陷”->“色盲”(完全失明)。
然后测试您的页面,看看是否有任何难以使用的东西。