WCAG 2.0 AA 要求 3:1 链接和周围文本之间的颜色对比度?

WCAG 2.0 AA requirement for 3:1 color contrast between links and surrounding text?

我看到 https://webaim.org/blog/wcag-2-0-and-link-colors/ 等来源发布的要求和其他声明符合 WCAG AA 建议 link 与 3:1 周围文本之间的颜色对比需要(假设非粗体较小字体)。

So if you combine these two requirements, in order to be Level AA conformant, your page must have all of the following:

  • A 4.5:1 contrast between the non-link text color and the background.
  • A 4.5:1 contrast between the link text color and the background.
  • A 3:1 contrast between the link text color and the surrounding non-link text color.

In other words, your link color has to be significantly different from the background color AND the surrounding text color, which also has to be significantly different from the background color.

但是,在阅读实际建议时,我没有看到该要求。唯一提到的是one possible technique (G183) to resolve Use of Color (1.4.1) issues. The two sections on Contrast (Minimum 1.4.3 and Enhanced 1.4.6)没有提到这个要求。

根据我对直接来自 WCAG 的文档的理解,在我看来,只有在没有任何其他视觉指示器的情况下,才需要 link 和周围文本之间的 3:1 对比就像 link 下划线,如果你打算完全依赖 3:1 颜色对比,你需要有一个非颜色视觉 hover/focus 指示器。

谁能证实或否认?

你是对的,如果你有第二个链接标识符,比如下划线,那么就不需要担心周围的对比度问题。

你已经参考了所有相关文件,但1.4.1 Use of colour中的关键字是only(不能用作only 视觉传达信息的方式)。

如果您使用下划线或类似符号来表示超链接,您的链接可以与文本颜色相同(尽管我会推荐不同的颜色,因为这是预期的行为)。

解释规则/思考规则的更好方法是“如果此页面是黑白的,我如何传达含义?”。应该使用颜色来增强没有色盲的人的体验,但页面也应该在灰度下工作。

人们经常忽视的关键一点是,对于任何事物,您都不能单独使用颜色来传达意义。访问过的链接呢?激活呢?专注力呢?

检查的好方法

Google chrome 现在有模拟色盲的滤镜。

检查您的页面是否可访问的最简单方法是在 Google Chrome 中打开开发人员工具,然后转到“渲染”->“模拟视觉缺陷”->“色盲”(其中是完全色盲)。

然后测试您的页面,看看是否有任何难以使用的地方。