关于文本/链接颜色差异有哪些（如果有）指南？

Question

对于网页上的链接颜色与常规文本之间的对比，是否有任何最佳做法或指南？

我知道有关于文本与背景颜色的对比准则，但我也想知道是否有关于纯文本和链接文本之间应该存在的最小色差的准则。

例如，我的背景是白色 (FFF)，我的文本颜色是黑色 (000)，我的链接颜色是绿色 (007C41)

编辑：

我意识到这在某种程度上取决于个人喜好。但是，虽然我的眼睛可能能够区分 #000000 和 #000001 之间的区别（他们不能，但只是为了争论），其他人将无法区分。我想知道是否有任何关于最小色差应该是多少的无障碍指南。

Answer 1

有几条准则可以结合起来涵盖该场景：

• Color is not used as the only visual means of conveying information, 指示动作、提示响应或区分 视觉元素。
• Contrast (Minimum)：文字的视觉呈现 文字图片的对比度至少为 4.5:1

good article on webaim 解释说：

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

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

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

总的来说，最简单的方法是使用更多的颜色，例如下划线、轮廓或粗体文本，在这种情况下，您只需要担心与背景的对比度，而不是周围的文本。

Answer 2

上面已经介绍了最重要的注意事项。除了这些考虑之外，我倾向于不使用下划线（悬停时除外），因为我喜欢使用下划线来传达强调或其他上下文信息的选项。

我们自称可用性大师尼尔森曾经大声喊道，无论如何，所有链接都应永远加下划线，许多宁愿被告知而不是自己思考的人狼吞虎咽。但大多数理性的设计师都明白这样的规则是无稽之谈。

Answer 3

• Basic guidelines from the US Department of Health & Human Services
• http://www.w3.org/TR/WCAG-TECHS/G183.html（由 steveax 提供）

确保您的浏览器具有color blindness emulator plugin。无法区分色调变化是一种半常见的情况。对于某些类型的色盲，您看起来“不同”的地方可能并不明显。

解决色盲问题后，请确保在适当或中性的环境中使用具有流行意义的颜色（红色、黄色、绿色）。例如，“注册我！”链接可能不应该是红色的（危险，关键），除非很明显它是主题的一部分（例如所有链接都是红色的）。 “删除”链接可能永远不应该是绿色的。

值得熟悉正确的color compliments。即使您制作了一个可读性强、可用的网站，people react differently 也可以使用不同的颜色。有些颜色/颜色组合只是“看起来”比其他颜色更好，而且通常有一个简单的数学原因。

Answer 4

我被教过的关于链接的唯一准则是：

• 让它明显是一个链接。不要做任何可能诱使用户点击他们不想点击的东西的事情。
• 让它明显不同于页面上的其他文本，因为您不希望您的用户错过他们可能想要点击的链接。
• 多年前，我被告知所有链接都应加下划线。显然，包括我们心爱的 SO 在内的许多人并没有这样做。许多人现在赞成仅在将鼠标悬停在链接上时才带下划线。