颜色在网页设计中总是很重要——但它在与视力相关的残障人士的用户体验中起着至关重要的作用。选择错误的颜色可能是一个代价高昂的错误。
想象一下，您的访问者无法阅读您的内容，无法从图表中挑选出重要信息，也无法点击您的号召性用语 (CTA) 按钮。最有可能的是，他们想要离开您的网站——也许是因为对返回没有兴趣。这就是为什么颜色在网络可访问性中很重要。
影响颜色感知的条件比您想象的更常见。因此，在这篇文章中，我们将讨论弱视、阅读障碍和色盲等残障人士如何体验网络。然后我们将解释如何通过做出更明智的颜色和设计选择来改善网站的可访问性和用户体验。
低视力网页颜色可访问性
白内障是 40 岁以上人群最常见的视力丧失类型，是一种影响对比度感知的低视力形式。患有白内障的人很难在低对比度背景下阅读文本，例如白色背景上的浅灰色。 视力低下的人需要的是高对比度的配色方案。高对比度模式实际上内置于 Windows 和 Mac 操作系统中。
然而，并不是每个需要高对比度模式的人都意识到它的存在或知道如何打开它。因此，明智的做法是在您的网站上坚持使用高对比度的颜色以方便访问。
阅读障碍的网页颜色可访问性
阅读障碍是一种影响阅读和写作的学习困难，今天有10% 的人 患有阅读障碍。阅读障碍会影响人们如何看待颜色，这可能会影响可读性。 虽然高对比度配色方案（例如纯黑色白色）对视力受损的人有益，但对于阅读障碍者来说，这种对比度可能太大了——他们可能会发现页面上的文字模糊在一起。更安全的选择是灰白色背景上的深灰色。 一些网站提供替代配色方案，这对有阅读障碍的用户很有帮助。例如，读障碍协会有一个允许用户更改背景颜色的控件。 看一看——用户可以从这个改变背景……
对比一下：
接下来让我们回顾一下色盲人士是如何看待网络的。
你能看到下图中的数字吗？嗯，色盲的人不能。
色盲影响了世界 4.5% 的人口，男性占该百分比的最大部分，因为男性色盲是女性的 16 倍。这是 8% 对 0.5%。 红绿色盲占色觉缺陷的绝大多数。
这包括患有红色盲（红盲）、红色盲（红色弱）、绿色盲（绿色盲）和绿色盲（绿色弱）的人。
色盲人士面临的一个大问题是网站上仅通过颜色传达的信息。这可能会减慢或混淆色盲访客，因为他们必须停下来弄清楚意思。 例如，对于视力正常的人来说，看着下面的饼图，很容易分辨出哪个等级对应哪个百分比。
现在看看红色盲患者看到的同一张图表：
该图表很难解释，因为有些颜色看起来太相似了。很难说哪个段对应哪个值。 更好的方法是将彩色部分链接到等级和百分比，或者将等级和百分比叠加在每个部分上。 另一种标记彩色区域的解决方案是使用图案。国外的设计师设计了一种色盲友好模式，用于使用纹理和颜色来标记卡片。
现在，回到我们的颜色对比讨论——您如何知道您网站的颜色是否可访问？有一些指南和工具可以帮助您找到答案。
Web 可访问性颜色对比
为了满足网页内容可访问性指南 (WCAG)指定的最低对比度级别，颜色需要满足网页上文本和背景之间的正确对比度。LOGO不符合 Web 可访问性颜色对比度要求。 在查看 WCAG 时，您可能会看到术语 A 级、AA 级和 AAA 级。这些代表了 WCAG 定义的不同级别的一致性，A 是最低的，AAA 是最高的。虽然每个级别都满足标准的要求，但鼓励站点所有者超越最低级别的一致性，并致力于向更高级别发展。
文本要求
WCAG 要求您在文本和背景颜色之间提供足够的对比度，以便任何人（包括中等视力低下的人）都可以阅读它。 文本和背景颜色之间所需的对比度取决于文本的大小和粗细。例如，较大的文本在较低的对比度下更容易阅读，因此对比度要求较低。让我们在下面指定要求。
普通文本：文本和背景之间的对比度应为 4.5:1。这是为 AA 级选择的比率。 大文本：对于大文本，文本和背景之间的对比度应为 3:1。（约 24 像素）或更大的文本被视为“大”。
如果文本是粗体，则只需 14pt（大约 18.5 像素）或更大即可被视为大文本。 增强对比度。
普通文本的对比度为 7:1，大文本的对比度为 4.5:1 被认为是增强的。这是为 AAA 级选择的比率。白底黑字的对比度最高，为 21:1。
颜色要求
仅使用颜色来指示操作、提示响应或区分网站上的元素将排除难以感知颜色的用户。这就是为什么 WCAG 包含禁止颜色成为传达信息的唯一视觉方式的指南。 要满足此成功标准，您必须提供除颜色之外的另一种视觉方式来传达信息。例如，用红色文本标记其必填输入字段的表单不符合使用颜色的成功标准。但是，如果此表单还用带有“必填”替代文本的图标标记其必填字段，那么它就符合标准。
网站的背景颜色
WCAG的另一个要求是区分前景和背景，方便用户看到内容。 这就是您必须指定背景颜色的原因。如果指定了文本颜色，但您的网站上没有背景颜色，那么它将被视为不符合 WCAG 的“可区分指南”。这是因为用户的默认背景颜色是未知的，无法评估是否有足够的对比度。如果指定了背景颜色但未指定文本颜色，则同样适用。
