可访问性 仅使用颜色表示含义

为什么

并非每个人都以相同的方式感知颜色。 红绿色盲是最常见的形式，它影响高达 8% 的男性。有些人使用 灰度模式来抑制他们对手机的依赖。

什么

不要仅使用颜色作为含义的唯一视觉指示。

最常见的例子是为链接设置样式而不使用下划线或边框。

浏览器默认情况下会为超文本链接添加下划线。可以使用层叠样式表 (CSS) 删除下划线，但这在大多数情况下是一个坏主意。用户习惯于看到链接带下划线。

WebAIM：链接和超文本

维基百科就是一个仅使用颜色为链接设置样式的例子。在该网站的灰度版本中，无法区分纯文本和链接。

如何

带下划线的链接

为链接添加下划线。或者，不要删除它们。请记住，它们可能会降低可读性。

为了提高可读性，我们可以使用 CSS 属性，如text-underline-offset 和 text-decoration-color。 

颜色作为状态

除了颜色之外，还要添加文本和/或图标来传达含义。

工具

工具 对比度比率 使用颜色来传达 色彩对比度 是否良好。红色表示对比度差。在此示例中，您可能会说数字是另一个指标。这是一个有效的论点。但是，您是在假设用户了解度量对比度比率并了解指南。

工具 Coolors 色彩对比度检查器 使用三种方法来告诉我们颜色组合是否良好

• 红色告诉我们对比度差。
• 文本非常差告诉我们对比度非常差。
• 5 星中的 1 星告诉我们这真的很糟糕。

不要仅仅依赖颜色。像 Coolors 一样，使用两种或三种方法。