Date 2026-05-11 11:08:02
作为 Handsome 作为一名产品设计师，我最近与客户合作，创建了一个强大的可访问色彩系统。与我们通常使用的颜色匹配相比，该系统更复杂、更苛刻，因此我对颜色的可访问性有了更深入的了解。
数字产品的可访问性对每个人（包括视觉、听觉、语言、身体和认知障碍的用户）都非常重要。作为一名设计师和开发人员，数字产品应该有足够好的包容性，这样每个人都可以从中受益。
可访问性好的产品优雅友好，我们应该对大家友好。
数字产品的可访问性在产品维度上有很多不同的方面。颜色是与设计最紧密相连的部分。对于视力受损的用户来说，颜色的可访问性与他们的体验密切相关。其中，弱色和色盲用户占很大比例。根据世界卫生组织2017年的规定 经过多年的调查，世界上有2.17亿人患有中度甚至严重的视力障碍。仅凭这一统计数据就足以说明数字产品可访问性的重要性。
数字产品的可访问性不仅涉及基本道德，还涉及潜在的法律问题和影响。2017年，在美国，共有814起关于无法访问或可访问性差网站的联邦诉讼，包括一些集体诉讼。各组织都试图建立可访问性设计标准，其中最著名的是联邦可访问性委员会（第508条）和W3C。以下是相关标准的概述：
第五百八条：这是指最早创立的 1973年康复法案第508条，您可以点击此处查看详细信息。一般来说，直接属于联邦网站、相关机构或承包商创建的网站都需要具有良好的可访问性。
W3C：万维网联盟(W3C）成立于自发国际组织的国际组织 1994年，旨在制定开放的网络标准。W3C 在 WCAG 2.1 他们的Web概述了他们的Web 可访问性的详细标准和指南本质上是今天 Web 可访问性最佳实践的黄金标准。
在产品开发的整个生命周期中，最好尽快考虑可访问性设计——这样可以减少产品后期追溯相关设计所花费的时间和金钱。在选择产品配色的早期阶段，我们需要考虑产品配色的可访问性。
以下是一些有用的提示，确保您的产品具有良好的可访问性：
为满足W3C最低值 AA 等级，你选择的背景和文本的对比度至少要达到 4.5 : 因此，在设计按钮、卡片和导航元素时，请确保颜色组合的对比度。
有很多工具可以帮助你测试颜色组合的可访问性，但我发现最有用的工具总是 Colorable 和 Colorsafe。我个人更倾向于 Colorable，因为滑块可以实时调整色相、饱和度和亮度，所以可以直接选择特定的配色方案，确定其可访问性等级。
您还需要确保许多信息不依赖于颜色来传输，特别是一些关键的系统信息，它们的可访问性也需要考虑。对于错误状态、成功状态、系统警告和提示，一定要匹配文本信息和图标，并清楚地告知用户（特别是视觉障碍用户）正在发生的事情。
对于图表信息，应该添加纹理或图案，这样即使是色盲用户也可以很容易地区分它们，而不用担心颜色会影响他们对数据的感知。Trello Colorblind 友好模式做得很好。
虽然绝大多数用户在浏览网页时使用鼠标或直接点击屏幕，但仍会有一些运动障碍用户使用键盘导航。所谓焦点状态，是指用户使用键盘「Tab」点击切换网页中不同链接时，每个链接周围都会出现画边外发光的视觉效果。
所有浏览器对焦点状态都有默认的显示颜色。如果您想在后续产品中调整其显示，您需要尽可能确保其对比度足够明显，这也可以为视觉缺陷用户带来足够明显的效果。
最后，创建一个具有良好可访问性的颜色系统，最重要的方面是让你的团队在需要时直接使用，每个人都可以在正确的地方使用。系统设计配色系统不仅可以减少混乱，而且可以确保整个团队范围内可访问性的一致性。根据我的经验，在用户界面 Kit 固定组合和相应的可访问性等级直接标记在设计系统中，这是最有效的。此外，使用 InVision Craft 或者 InVision DSM 作为团队合作，其他工具非常有帮助。以下是如何记录各种配色组合和配色可访问性评级的例子。
事实上，我今天谈到的更多的是关于可访问性的一些一般技能。然而，如果你考虑这个问题，最值得参考的是 W3C 中的 WCAG 2.1 ，它包含了最专业和最详细的描述。虽然这些指导方针看起来有点令人生畏，但它们可以帮助你对可用性设计有更深入的了解。
本文提到了一些设计资源：
Colorbox: Lyft 最新的配色工具旨在创建可用性好、可扩展性好的配色系统。
Designing Systematic Colors by Jeeyoung Jung: 为您创建可用性好的配色系统提供了一种非常深入的方法，如果您正在为多种产品设计配色，那么它将非常有用。
Colorable: 这是评估配色可访问性的一种非常实用的工具。
Colorsafe: 高可访问性配色生成工具。
Color Oracle: 适用于色盲模拟器 Windows、Mac 和 Linux。