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

Question

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

因此，如果您将这两个要求结合起来，为了符合 AA 级标准，您的页面必须具备以下所有条件：

• 非链接文本颜色和背景之间的对比度为 4.5:1。
• 链接文本颜色和背景之间的对比度为 4.5:1。
• 链接文本颜色与周围非链接文本颜色之间的 3:1 对比。

换句话说，您的链接颜色必须与背景颜色和周围的文本颜色显着不同，这也必须与背景颜色显着不同。

但是，在阅读实际建议时，我没有看到该要求。唯一提到的是一种可能的技术 (G183)来解决使用颜色 (1.4.1)问题。关于对比度的两个部分（最低 1.4.3和增强 1.4.6）没有提到这个要求。

根据我对 WCAG 直接提供的文档的理解，在我看来，只有当您没有任何其他视觉指示器（如链接下划线）并且您打算完全依赖时，才需要链接和周围文本之间的 3:1 对比在 3:1 颜色对比度上，您需要有一个非彩色视觉悬停/焦点指示器。

任何人都可以确认或否认吗？

标签： accessibilitywcagwcag2.0

Answer 1

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

您已经参考了所有相关文件，但1.4.1 使用颜色中的关键词只是（不能作为传达信息的唯一视觉手段）。

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

解释规则/思考它的更好方法是“如果这个页面是黑白的，我怎么能传达意思？”。颜色应该用于增强没有色盲的人的体验，但页面也应该在灰度下工作。

人们经常忽略的关键是您不能单独使用颜色来传达任何事物的含义。访问过的链接呢？激活呢？重点呢？

检查的好方法

谷歌浏览器现在有过滤器来模拟色盲。

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

然后测试你的页面，看看是否有什么难以使用的地方。