辅助功能 颜色对比
为什么
网页上的文本和图形组件需要良好的对比度，以确保用户能够感知。我们中的一些人视力下降。其他人则会在对比度很重要的环境中，例如在强烈的阳光下。
什么
我们测量文本或图形与背景颜色之间的对比度。这称为对比度比率。白色背景上的白色文本的对比度比率为 1。这无法感知。白色背景上的黑色文本的对比度比率为 21。
没有完美的比率。它并不总是尽可能高，即使高对比度通常比低对比度更易读。根据苹果的说法，我们应该争取至少 4.5，尽管 7 是首选。
如何
测量颜色对比度的一种方法是使用像 对比度比率 这样的工具。它接受多种颜色输入，如 RGB、HSL 和十六进制。它甚至支持透明度，如 RGBA。
Foodora 的示例
Foodora 使用颜色 皇家红 作为其主要品牌颜色。该颜色的十六进制代码为 #D60265。在白色上，颜色对比度为 5.17。这对于装饰、图标、徽标和按钮来说是不错的。如果 Foodora 将此颜色用于较大的文本块，则可读性会很差。
图像上的文本
要测量图像顶部文本的对比度，我们需要找到图像中最亮或最暗的部分。如果文本是亮的，则查找最亮的部分，反之亦然。
在这个 Wolt 的示例中，我们在明亮的背景图像上使用了白色文本。在浅绿色部分使用拾色器会得到十六进制值 #a1ad95。这表示对比度比率为 2.35。不够。一种可能的改进是在带有文本的图片的那一部分添加颜色叠加层。叠加层可以是纯色或具有透明度。
不同的状态
任何交互式组件都有不同的状态——悬停、焦点、活动、未访问、已访问和停用。请记住，确保这些状态也具有良好的对比度。使用状态时，我们需要考虑两种情况
- 所有状态的颜色对比度都需要良好。
- 从未聚焦状态到聚焦状态的对比度变化至少为 3。
在这个 Cos 服装的示例中，导航的颜色对比度为 9.73。
但是，将鼠标悬停在 女士 上会得到 2.84 的悬停对比度。
