7

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

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

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

编辑：

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

4

4 回答 4

5

我被教过的关于链接的唯一指导方针是：

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

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

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

熟悉适当的颜色赞美是值得的。即使您制作了一个可读性强、可用的网站，人们对不同颜色的反应也会不同。一些颜色/颜色组合只是“看起来”比其他颜色更好，并且通常有一个简单的数学原因。

于 2013-09-26T02:18:03.227 回答
3

有一些指导方针结合起来涵盖了这种情况：

webaim 上的一篇好文章解释说：

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

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

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

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

于 2013-09-26T11:47:42.033 回答
0

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

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

于 2013-09-26T12:10:35.187 回答