在一个段落中考虑对比的众多地方

当我们考虑在设计中选择颜色时，我们始终在考虑无障碍性。每当颜色接触时，就会产生对比，如果我们谈论的是文本的颜色对比，它需要足够高才能易于阅读。这对各种视觉障碍人士有益，而且每个人都欣赏易于阅读的文本。

让我们看看单个段落中需要考虑的颜色对比！

段落中的链接可能设置为另一种颜色，以将其区分开来，使其成为链接。

可聚焦元素（如链接）也需要具有焦点样式。默认情况下，我们可能会获得模糊的蓝色轮廓，因此我们需要检查其颜色对比度是否足够。如果我们对其进行自定义，则自定义也需要良好的颜色对比度。

对于鼠标用户，我们还需要一个悬停状态。在这里，我将使用覆盖大约一半文本的背景效果。当您执行此类操作时，效果需要足够强烈才能在悬停时显眼，并且两种背景上的对比度都需要正常工作。

虽然不常见，但您也可以设置 :visited 链接的样式。样式有些受限（例如，您无法更改 opacity 或 background，因为这涉及安全问题），但您可以更改颜色。如果您这样做，它也需要适当的对比度。也许我们可以使用 color: inherit; 取消颜色差异，以某种程度弱化链接，但仍表明其为链接。

另一件需要考虑的事情是人们突出显示文本。在我的机器上，我将其默认设置为橙色突出显示（在 macOS 上通常为浅蓝色）。

希望链接颜色在用户可能选择的任何突出显示颜色下都能保持良好效果。它们往往是非常浅的色调。

您还可以通过 CSS 使用 ::selection { background: purple; } 控制文本选择颜色。如果您已执行此操作，则必须再次检查所有颜色，以确保您获得了足够的对比度。

您可以尝试通过更改颜色和背景来掌控局面。

但请注意，此处文本内的链接失去了一些对比度。我们可以继续深入研究，在 a::selection 和文本中具有自身颜色的每个其他元素上设置新颜色。

我想说一个好的经验法则是，如果您要使用自定义突出显示颜色，则将其设置为非常浅，然后不要对选定的文本进行任何进一步的自定义。

---

这篇文章的想法来自于我收到的一些错误报告，人们报告说，在突出显示文本然后聚焦链接时，此网站上的链接很难阅读。我尝试通过变得更复杂来修复它，但所能做的事情是有限的。

::selection a:focus { /* nope */ }
a:focus::selection  { /* nope */ }
a::selection:focus  { /* nope */ }

少做比多做更好。

---

我最近阅读了 Ethan Muller 的 为设计系统设计 文章，他在其中提到了关于对比度的类似观点，但是在整个颜色范围内而不是在整个上下文中。例如，您的蓝色链接颜色可能在您的一些设计系统颜色上效果很好，但在其他颜色上则效果不佳。

有一些方法可能会有所帮助。

• “每次声明背景颜色时，都声明一个颜色” 的通用建议可能会有所帮助。
• 我使用了像 on-light 这样的父级类，以便在浅色容器内部广泛更改事物颜色。
• 我使用了一个 Sass 混合宏来简化链接和链接状态的更改，因此在更改背景时我更有可能这样做。

@mixin linkStyleText($linkColor) {
  a {
    // Update generic link styles with $linkColor
    &:hover,
    &:focus {
      // Also change the hover/focus styles, probably by altering $linkColor programatically
    }
  }
}

.variation {
   background: $someNewBGColor;
   linkStyleText($someNewLinkColor)
}

---

好吧，感谢您与我一起踏上这段旅程。我突然意识到，颜色对比并不像检查背景上的单个链接颜色以确保其通过那么简单。根据您在正文中着色的内容数量，可能需要检查十几甚至更多内容。

这些屏幕截图中的字体是 Ibarra Real Nova，它最近刚刚在 Google Fonts 上发布。