WebAIM  - 无障碍记

WCAG 2.0和链接颜色

WCAG 2.0的颜色要求

WCAG 2.0要求前景色和背景色有4.5:在AA级别1的对比度和一个7:在AAA级1的对比度。您可以使用我们对比检查工具以确定的比例是什么任何前景色和背景色之间。

WCAG 2.0也要求(在级别A上)这样做颜色不能作为传达内容或区分视觉元素的唯一方法。他们还定义与链接这一要求技术G183,它说,“使用3:1的对比度与周围的文字,并提供额外的视觉线索的重点链接或控件,仅用颜色来识别他们。”这意味着,如果你的链接没有下划线(或者为链接提供一些其他非颜色的标记),那么链接必须与周围的文本有足够的不同。

所以,如果你把这两方面的要求,以等级达到AA符合的,你的网页必须有所有下面的:

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

换句话说,你的链接颜色必须与背景颜色和周围的文本颜色,也有是从背景颜色显著不同显著不同。

满足这些要求

如果你开始探索这个,你会发现只有这个要求叶可用的页面和链接的颜色的小窗口。例如,如果你的页面有一个白底黑字的文字,并使用标准的蓝色的链接,链接的颜色必须接近之间这种颜色的蓝色(#6a5eff)这种颜色的蓝色(#531fff)。任何更亮或更暗,它不会有足够的对比度,以在相邻的黑色文字或白色背景,分别。

如果你的文本/背景颜色不是纯粹的黑与白,这显著缩小或消除与足够的对比度色彩的窗口。

链接状态

如果你想提供各种链接状态(悬停/聚焦、已访问、活动)的颜色,这就变得更加复杂了。如果使用传统的蓝色、红色和紫色作为链接状态,那么这三种颜色中的每一种都必须适合可用对比度的狭窄窗口。

一些测试表明,这是可能的...勉强。下面的颜色链路状态满足白色页面上的黑色以下要求:

正常:# 3344 dd
哈弗/福克斯/活动:#bb1122
访问:#884488

但没有多少回旋的余地 - 如果改变这些颜色的多,你会打破无论是3:1的要求,以黑色或4.5:1的要求为白色。W3C的确实提供了一个网页安全色符合这些要求的对比度范围内的清单。但是如果你的页面不是黑白相间的(或者相反),那么很快就不可能使用任何一种颜色,更不用说为不同的链接状态使用两到三种颜色了。

AAA级一致性

为了使事情变得复杂进一步,如果你正在寻找AAA一致性,这需要7前景/背景:1的对比度,你在色彩组合几乎没有选择。您必须有白色背景上的黑色文本和你的蓝/红色/紫色的颜色必须是非常相近#3344dd#b50010,# 804180。这些工作究竟进行到3:1,以黑色和7:1至白色,非常最低水平允许的。

哈弗/对焦状态的要求

,根据要注意这一点很重要G183,用于链接重点/悬停状态必须有一个非颜色代号。这通常意味着你会当它盘旋或标签的下划线样式添加到链接。这是一个A级的要求。

因为有当前焦点或正在激活的链接会通过非颜色的指示器在视觉上很明显,更不用说用户已经手动对它们进行了聚焦,所以我认为3:1的对比规则不(或不应该)适用于悬停、焦点或活动状态。换句话说,让悬停、焦点和活动链接与周围的文本颜色非常相似是可以接受的,因为用户必须对链接做了一些操作来激活该状态非颜色指示符必须出现,如果他们这样做了。4.5:1(或7:1)的背景对比度要求适用于所有链接状态。

概要

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

non-underlined链接是一个级别的对比要求指南,这可能表明他们是更重要的比拥有高水平的对比non-linked内容(有趣的是,仅仅是解决在AA、AAA级——白色文本在一个白色背景与白色下划线链接似乎允许在层次)。不管一致性,是重要的可访问性,有很好的对比文本和链接是明显的。

那么,是WCAG对比度的要求过于严格和僵化?或者是最佳的可访问性的WCAG 2.0来限制这种狭隘的对比窗无下划线的链接?

评论

  1. 史蒂夫乙

    这是什么,只能被归类为“谜”,我可以告诉你,我是受非常令人这一要求的人。
    是否符合要求的解决方案仍对我的一些问题。
    我会尽量简短。
    对比度和色彩差异可对方的关切。
    因为纯白色会很累人,所以我把我的浏览器设置为浅灰色背景。当网站设置白色(#000000)背景时,我可以忍受,这通常不是一个大问题。

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

    在第二种情况下:
    “正常:#3344dd
    哈弗/福克斯/活动:#bb1122
    访问:# 884488”,
    在“哈弗/福克斯/活动”颜色感知,通过我,从周围的黑色文本没有区别。
    鼠标扫瞄或点击通常会有帮助,但这是一种皮塔饼。

    当谈到“AAA级一致性”比如,我不能区分周围的黑色文字“#b50010”的色彩。

    我的建议是:“你尽力而为,我们会解决剩下的问题。”

    史蒂夫。

  2. 大卫·特拉维斯

    贾里德

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

    这些颜色要求的另外一个问题是,他们是基于这样的假设颜色的渲染完全一样在不同的显示器:显示器上的颜色“#3344dd”看起来一样对矿井。这将是与唯一的颜色校准的显示器,其表示在存在显示硬件的一小部分真。在现实中,颜色“#3344dd”不会达到3:在现实世界中许多显示器1的对比度,并且可能超过3:在其它显示器1。事实是,我们只是不知道。在大多数情况下,这种变化是没有问题的,但是当我们谈论的应用程序很少蠕动室 - 像一个你关于写作 - 它成为一个重大的混杂因素。

  3. 蒂姆·H。

    是的,颜色的选择是严格的,如果网页作者选择表明单靠颜色链接。然而,那用户的角度来看?
    用户看到的页面,但没有下划线的链接(或任何其他非彩色的指标)。为了弄清楚哪些项是链接,用户现在可以通过该页面有标签或者按住鼠标在每个元素,以确定哪些可能是链接。对我来说,这听起来像用户的挫折和效率低下的良方。我倾向于避免折腾用户,使更多的任务难以执行。
    我同意了悬停,焦点和活动状态的色彩对比。我想的方针1.4和成功标准1.4.1的目的似乎表明,颜色是n不是那么重要,如果有一些其他类型的目前指标。

  4. ç达林

    从技术上讲,试图实现这种套的要求,符合准则1.4可frustarting,这取决于目标受众。

    就最佳做法而言,是否可以断定除非网页上的连结有下划线,否则就不符合这条指引?

    我曾使用色彩对比分析器和富士通色彩博士对一些网页进行过测试,我同意这一点,用户很难区分网页上的链接和非链接文本;尤其是看白纸黑字的时候。

  5. 杰瑞德史密斯

    Ç亲爱的问,“对于最佳实践,这将是正确得出结论,这一准则不能满足,除非链接网页上的下划线?”

    这当然可以实现,但只能在一些相当有限的情况下。我不会完全否定这一优先级,但W3C的建议是,这并不是提供链接可访问性的最佳方式,当然应该认真权衡。

  6. 理查德·沃伦

    我有一个问题理解为什么有人会认为这是一个好主意,以提供一个不带下划线的链接文字。一个新的网络用户得到的第一个教训是,带下划线的文本是另一页面的链接,那么为什么通过删除下划线迷惑你的用户?
    我不是残疾的时候我有,当我使用我的手机非下划线的链接实际问题。人们谁是色盲(或使用单色显示器)也必须处于不利地位。当然一个网页的主要目的是什么传达给用户。通过移除下划线隐藏链接文本是不是有效的沟通。

    理查德
    (关于咆哮抱歉)

  7. 黛比

    像理查德,我倾向于使用下划线的链接。我想使用户体验无忧尽可能和,如他所说,人们期望链接下划线。

    但是,我们的导航菜单?我倾向于使用颜色的变化来表示悬停状态和当前选择的链接,虽然文字大小一般较大。

  8. 大卫Ashleydale

    Richard,我和一些视觉设计师一起工作过,他们非常不喜欢带有大量下划线链接的页面。它在视觉上混乱而令人生畏。在列表中有很多链接的情况下,他们宁愿不使用下划线链接,以方便视觉。