WCAG 2.0和链接颜色

WCAG 2.0颜色要求

WCAG 2.0要求前景色和背景色有AA级的对比度为4.5:1和aAAA级对比度为7:1您可以使用我们的对比检查工具确定任何前景色和背景色之间的比率。

WCAG 2.0也要求(在A级)颜色不能用作传达内容或区分视觉元素的唯一方法他们进一步定义了链接的这个要求技术G183, which states, “Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them.” This means that if you do not underline your links (or provide some other non-color designator for links), that the links must be sufficiently different in contrast from the surrounding text.

因此,如果您将这两个要求结合起来,为了符合AA级要求,您的页面必须具备所有以下的:

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

换句话说,您的链接颜色必须与背景颜色和周围文本颜色明显不同,后者也必须与背景颜色明显不同。

满足这些要求

如果你开始探索这个,你会发现这个要求只留下一个可用页面和链接颜色的小窗口例如,如果您的页面在白色背景上有黑色文本而您使用标准蓝色作为链接,则链接颜色必须介于约这种蓝色(#6a5eff)这种蓝色(#531fff)任何更亮或更暗,它们分别与相邻的黑色文本或白色背景没有足够的对比度。

如果您的文字/背景颜色不是纯黑色和白色,这会显着缩小或消除具有足够对比度的颜色窗口。

Link states

如果要提供各种链接状态(悬停/焦点,访问,活动)颜色,这会变得更加复杂如果您使用传统的蓝色,红色和紫色作为链接状态,则这三种颜色中的每一种都必须适合可用对比度的窄窗口。

一些测试显示这是可能的......几乎没有链接状态的以下颜色满足白页上黑色的这些要求:

正常:#3344dd
悬停/聚焦/活动:#bb1122
访问:#884488

但是没有太大的摆动空间 - 如果你改变这些颜色中的任何一种,你就会破坏3:1的黑色要求或4.5:1的白色要求W3C确实提供了一个符合这些对比度要求的Web安全颜色列表但是如果你的页面上没有白色的黑色(反之亦然),很快就无法使任何一种颜色起作用,更不用说两种或三种颜色用于各种链接状态。

AAA级一致性

更复杂的是,如果你正在寻找AAA一致性,这需要7:1的前景/背景对比度,你几乎没有选择的颜色组合您必须在白色背景上有黑色文字,你的蓝色/红色/紫色必须是非常相近#3344dd#b50010,和#804180它们精确到3:1到黑色,7:1到白色,允许的最小级别。

悬停/焦点状态要求

重要的是要注意根据G183,链接的焦点/悬停状态必须具有非颜色指示符这通常意味着您可以在链接悬停或选项卡时为链接添加下划线样式这是A级要求。

Because links that have current focus or are being activated will be visually apparent through the non-color designator, not to mention the fact the user has manually focused them, I believe the 3:1 contrast rule does not (or should not) apply to the hover, focus, or active statesIn other words, it’s acceptable to have the hover, focus, and active link be very similar in contrast to the surrounding text color because the user must have done something with the link to activate that state如果他们已经这样做,那么非颜色指示符必须存在对背景的4.5:1(或7:1)对比度要求适用于所有链路状态。

摘要

由于WCAG 2.0对比度的要求,如果你没有强调你的链接,如果你想成为AA级别,那就没有太大的灵活性了,更不用说符合AAA级别了WCAG认识到满足这些对比要求“不是区分链接文本的首选技术”当然,对此的简单解决方案是简单地在默认状态下强调链接有趣的是,带下划线的链接可以是与其周围文本完全相同的颜色,尽管这远非最佳。

The contrast requirements for non-underlined links is a Level A guideline, which might suggest that they are of more importance than having high levels of contrast for non-linked content (which, interestingly, is only addressed at Level AA and AAA – white text on a white background with white underlined links is seemingly allowed at Level A)无论一致性如何,对于可访问性而言,文本具有良好的对比度并且链接是可辨别的。

So, are the WCAG contrast requirements too stringent and inflexible? Or is it optimal for accessibility for WCAG 2.0 to limit non-underlined links to this narrow contrast window?

评论

  1. 史蒂夫B.

    这只能被归类为“难题”,我可以告诉你,我是一个受这个要求的原因影响的人。
    一致性所需的解决方案仍然给我带来了一些问题。
    我会尽量简短。
    对比度和色差可能是相反的问题。
    由于鲜明的白色可能非常累人,我的浏览器设置为非常浅灰色的背景当网站设置白色(#000000)背景时,我忍受了它,这通常不是一个大问题。

    在Jared的要求示例中:“这种蓝色(#6e5eff)和蓝色(#531fff)的颜色”,第一种颜色模糊不清,导致我不得不付出额外的努力来聚焦和阅读文本。

    在第二种情况:
    “正常:#3344dd
    悬停/聚焦/活动:#bb1122
    访问量:#884488“,
    “悬停/聚焦/活动”是我所感知的颜色,与周围的黑色文字无法区分。
    鼠标扫描或标签通常有帮助,但是是PITA。

    当涉及“AAA级一致性”示例时,我无法将“#b50010”颜色与周围的黑色文本区分开来。

    我的建议是:“做到最好,我们会弄明白其余的”

    史蒂夫。

  2. 大卫特拉维斯

    贾里德

    这是一篇优秀的文章,对指南非常有用。

    这些颜色要求的另一个问题是它们基于以下假设:在不同的显示器上颜色呈现完全相同:显示器上的颜色“#3344dd”与我的相同仅使用颜色校准的监视器就是如此,它代表了现有显示硬件的一小部分实际上,在现实世界中,许多显示器上的颜色“#3344dd”不会达到3:1的对比度,而在其他显示器上可能会超过3:1事实是,我们只是不知道在大多数情况下,这种可变性不是问题,但是当我们谈论具有非常小的蠕动的应用程序时 - 就像你正在写的那样 - 它成为一个主要的混淆因素。

  3. 蒂姆·H

    是的,如果页面作者选择仅按颜色指示链接,则颜色选择是限制性的但是,用户的观点呢?
    The user sees the page, but no underlined links (or any other non-colour indicators.) To figure out which items are links, the user now has to tab through the page or hold the mouse over each element to determine which ones might be links对我来说,这听起来像是一个用户沮丧和低效的秘诀我宁愿避免让用户感到沮丧并使任务更难执行。
    我同意悬停,焦点和活动状态的颜色对比我认为准则1.4和成功标准1.4.1的目的似乎表明,如果存在其他类型的指标,颜色并不重要。

  4. C亲爱的

    从技术上讲,根据目标受众,尝试实施这些符合指南1.4的要求可能会令人沮丧。

    为了获得最佳实践,除非链接在网页上加下划线,否则无法满足此指南的结论是正确的吗?

    I have QA’ed some webpages using Colour Contrast analyser and Fujitsu ColorDoctor and I agree, it is difficult for users to differentiate a link and non-linked text on a webpage; especially when looking at a page in black and white.

  5. 杰瑞德史密斯

    C达林问道,“为了达到最佳实践,除非链接在网页上加下划线,否则无法满足此指南是否正确?”

    它当然可以满足,但仅限于一些相当有限的情况下我不打算完全忽略这个优先级,但W3C建议这不是提供链接可访问性的最佳方式,当然应该强烈权衡。

  6. 理查德沃伦

    我有一个问题,理解为什么有人会认为提供没有下划线的链接文本是一个好主意新网页用户获得的第一课是带下划线的文字是指向另一个网页的链接,那么为什么要删除下划线会让用户感到困惑呢?
    我没有残疾,但是当我使用手机时,我有非下划线链接的真正问题色盲(或使用单色显示器)的人也必须处于不利地位当然,网页的主要目的是向用户传达某些信息通过删除下划线隐藏链接文本不是有效的通信。

    理查德
    (抱歉咆哮)

  7. 德布

    像理查德一样,我倾向于使用下划线来表示链接我希望尽可能轻松地提升用户体验,正如他所说,人们希望链接能够得到强调。

    But what about navigation menus? I tend to use color changes to indicate the hover state and the currently selected link, albeit the text size is generally larger.

  8. 大卫阿什莱戴尔

    理查德,我曾经合作过的一些视觉设计师真的不喜欢页面看起来像带有下划线链接的海洋它在视觉上混乱而令人生畏如果列表中有很多链接,他们宁愿不加下划线链接,以便放眼。