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

Question

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

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

例如，我的背景是白色（FFF），我的文字颜色是黑色（000），我的链接颜色是绿色（007C41）

修改

我意识到这取决于某种程度上的个人偏好。然而，虽然我的眼睛可能能够分辨出＃000000和＃000001之间的区别（他们不能，但仅仅是出于争论的缘故），其他人将无法做到。我想知道的是，是否存在关于最小色差应该是什么的可访问性指南。

Answer 1

我曾经教过的关于链接的唯一指导原则是：

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

Answer 2

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

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

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

值得熟悉正确的color compliments。即使您已经建立了一个高度可读，可用的网站，people react differently为不同的颜色。有些颜色/颜色组合比其他颜色/颜色组合“看起来”更好，并且通常有一个简单的数学原因。

Answer 3

有几个指南可以结合起来涵盖这种情况：

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

good article on webaim解释说：

  

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

     

  
• 4.5：1非链接文本颜色与背景之间的对比。
  
• 4.5：1链接文字颜色与背景之间的对比。
  
• 链接文本颜色与周围非链接文本颜色之间的3：1对比。
  

     

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

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

Answer 4

上面已经介绍了最重要的考虑因素。除了这些考虑因素之外，我还远离下划线（除了悬停），因为我喜欢使用下划线来传达重点或其他上下文信息。

我们自称的可用性大师尼尔森曾一度大声地喊道，无论如何，所有链接都应该被永远强调，并且很多人更喜欢被告知而不是做自己的想法。但是大多数合理的设计师都明白这些规则是无稽之谈。