- 原文出处：Stripe Blog
- 作者：Daryl Koopersmith 和 Wilson Miner
- 时间：2019-10-15
颜色对比度是可访问性的重要方面。良好的对比度使视障人士更容易使用产品，并在光线不足的环境或较旧的屏幕等不完美的条件下提供帮助。考虑到这一点，我们最近更新了用户界面中的颜色以使其更易于访问。现在，文本和图标的颜色在整个Stripe仪表板以及使用我们的内部接口库构建的所有其他产品中都具有明显的对比。
要实现与颜色的正确对比度具有挑战性，尤其是因为颜色具有令人难以置信的主观性，并且对产品的美学效果有很大影响。我们希望创建一个具有手工挑选的鲜艳色彩的色彩系统，该色彩系统也符合可访问性和对比度的标准。
当我们评估外部工具以改善产品的色彩对比度和清晰度时，我们注意到了两种常见的解决方法：
- 手动选择颜色并对照标准检查它们的对比度。我们的经验告诉我们，这种方法使选择颜色过于依赖反复试验。
- 从一组基色中产生较浅和较深的色彩。不幸的是，仅仅变暗或变亮会导致颜色暗淡或柔和，这可能很难将它们彼此区分开并且常常看起来并不好。
使用我们发现的现有工具，很难创建一种颜色系统，使我们能够在确保可访问性的同时选择出色的颜色。我们决定创建一个使用感知颜色模型的新工具，以提供有关可访问性的实时反馈。这使我们能够快速创建满足我们需求的配色方案，并为我们提供将来可以迭代的功能。
背景
我们在产品界面中使用的颜色基于我们的品牌调色板。在我们的产品中使用这些颜色可使我们将Stripe品牌的某些特征带入我们的界面。
不幸的是，用这些颜色很难达到（并保持）对比度准则。网络可访问性指南建议，小文本的最小对比度为4.5，大文本的最小对比度为3.0。当我们审核产品中的颜色使用情况时，我们发现用于小文本的默认文本颜色（黑色除外）均未达到对比度阈值。
选择可访问的颜色组合需要每个设计师或工程师理解准则，并在每种情况下选择具有足够对比度的颜色对。对于某些颜色组合，选项受到限制，可访问的颜色组合看起来并不好。
当我们第一次研究改善产品中文本对比度的方法时，我们最初探索了将文本的默认颜色按比例尺调暗一阶的步骤，如下图左栏所示。
不幸的是，我们的某些颜色在下一个最暗的阴影下仍然没有足够的对比度。一旦达到与现有比例尺足够对比度的阴影（右列），我们就会失去很多颜色的亮度和鲜艳度。这些颜色在白色背景上通过了准则，但它们又暗又泥泞，很难区分色相。
如果不深入研究，则很容易接受您需要在具有可访问的颜色或看起来不错的颜色之间进行选择的权衡。为了获得两者，我们需要彻底重新设计我们的色彩系统。
我们想设计一种新的色彩系统，该系统可以提供以下三个主要优点：
- 可预测的可访问性：颜色具有足够的对比度以通过可访问性准则。
- 清晰生动的色彩：用户可以轻松地区分颜色。
- 一致的视觉重量：在每个级别上，没有任何一种颜色看起来比其他颜色具有优先权。
色彩空间的简短插曲
为了解释我们是如何到达那里的，我们需要对颜色有所了解。
我们习惯于使用RGB颜色空间在屏幕上使用颜色。颜色是根据在屏幕上混合多少红色，绿色和蓝色光以产生颜色来指定的。
不幸的是，尽管用这种方式描述颜色对于计算机来说是很自然的，但对于人类却不是很自然。给定RGB颜色值，需要进行哪些更改才能使其更亮？更丰富多彩？添加更多黄色？
对于我们来说，将颜色视为由三个属性组成的组织更为直观：
- 色相：什么颜色？
- 色度：色彩如何？
- 亮度：它有多亮？
支持这种方式指定颜色的流行颜色空间是HSL。设计工具和流行的颜色处理代码库均对此提供了很好的支持。有一个问题：HSL计算亮度的方法有缺陷。大多数色彩空间没有考虑到的是，人眼固有地将不同的色调感知为不同级别的亮度-在相同的数学亮度级别下，黄色看上去比蓝色更亮。
下图是在显示颜色空间中具有相同亮度和饱和度的一组颜色。尽管色彩空间声称饱和度和明度都相同，但我们的眼睛并不相同。请注意，其中某些颜色看起来比其他颜色更浅或更饱和。例如，蓝色显得特别暗，而黄色和绿色尤其亮。
这里是色彩空间，其试图色彩的人类感知建模。感知上统一的颜色空间会根据与人类视觉相关的因素对颜色进行建模，并执行复杂的颜色转换以确保这些尺寸反映人类视觉的工作方式。
当我们在感知上均匀的颜色空间中对具有相同亮度和饱和度的颜色进行采样时，可以观察到明显的差异。这些颜色看起来融合在一起，每种颜色看起来都像其他颜色一样浅和饱和。这是工作中的感知一致性。
令人惊讶的是，很少有工具可以支持感知上统一的颜色模型，而没有一个工具可以帮助我们设计调色板。因此，我们建立了自己的。
可视化颜色
我们构建了一个Web界面，以使我们能够使用感知上统一的颜色模型来可视化和操纵我们的颜色系统。当我们迭代颜色时，该工具为我们提供了立即的反馈循环-我们可以看到每次更改的效果。
上面说明的色彩空间称为CIELAB，也可以称为Lab。实验室中的L代表亮度，但与HSL中的亮度不同，它的设计是感知上统一的。通过将色标转换为Lab色彩空间，我们可以根据它们的感知对比度调整颜色并在视觉上比较结果。
下图显示了在颜色工具中可视化的先前调色板的亮度和对比度值。您会看到我们每种颜色的感知亮度都遵循不同的曲线，在同一点上，黄色和绿色比蓝色和紫色要浅得多。
通过在感知上一致的色彩空间中操纵我们的颜色，我们能够生成一组在所有色相上具有一致对比度的颜色，并保留当前颜色的尽可能多的预期色相和饱和度。在建议的颜色中，黄色与蓝色具有相同的对比度范围，但它们看起来仍然像我们的颜色。
在下图中，您可以看到每种颜色的感知亮度遵循相同的曲线，这意味着每种颜色（左侧的标签）在给定级别（顶部的数字标签）具有相同的对比度值。
我们的新工具还向我们展示了可能的方法。视觉上统一的色彩模型的可视化使我们能够看到视觉感知的限制。图表中的阴影区域代表所谓的虚构颜色，这些颜色实际上是不可复制或不可感知的。事实证明，“真正的深黄色”实际上不是东西。
大多数用于混合颜色的工具允许您在每个参数的整个范围内设置值，而只是剪切颜色或返回实际上不代表您设置的参数的最接近的合适颜色。当我们进行更改时，实时可视化可用的色彩空间使我们可以更快地进行迭代，因为我们可以告诉我们可能发生哪些更改，哪些更改使我们更接近我们的目标：“明亮”，差异化的颜色符合适当的对比度准则。
在某些时候，找到一组可以协同工作的颜色就像穿针一样。在此，阴影区域显示了实际找到值组合的空间有多有限，这些值组合允许所有色调的亮度大致相等。
结果
经过对实际组件和界面的大量迭代和测试之后，我们得出了实现我们目标的调色板：我们的颜色可预见地通过了辅助功能准则，保持其鲜明，鲜艳的色调，并在各个色调之间保持一致的视觉重量。
我们新的文本和图标默认颜色现在通过了WCAG 2.0准则中定义的可访问性对比阈值。
除了在白色背景上传递对比度准则之外，每种颜色在显示为任何色相中最亮的颜色值时也会通过。由于我们通常使用这些浅色的背景来偏移或突出显示部分，因此确保文本在整个产品中具有足够的对比度非常简单且可预测。
由于新颜色是根据对比度统一组织的，因此我们还内置了简单明了的准则，用于在不太常见的情况下选择合适的对比度对。如果两种颜色至少相隔五个级别，并且图标和较大文本至少相隔四个级别，则保证它们对于小文本具有足够的对比度。
借助系统中内置的对比度指南，可以很容易地对不同组件中的颜色对比度进行调整，从而获得可预测的结果。
例如，我们重新设计了徽章组件，以使用颜色背景来清楚地区分每种颜色。以尽可能最轻的值，颜色很难区分。通过将背景和文本颜色上移一个级别，我们能够在所有徽标颜色之间保持文本对比度，而无需分别微调每种颜色组合。
结论
我们了解到，设计可访问的色彩系统并不一定意味着在黑暗中摸索。我们只需要改变对颜色的看法即可：
使用感知统一的颜色模型
在设计可访问的颜色系统时，使用感知统一的颜色模型（例如CIELAB）可以帮助我们理解每种颜色在我们眼中的外观，而不是在计算机上的外观。这使我们能够验证直觉，并使用数字来比较所有颜色的明暗度。
可访问性并不意味着充满活力
WCAG可访问性标准有意仅关注前景和背景颜色之间的对比度，而不是外观的生动程度。了解每种颜色的鲜艳程度可以帮助区分彼此的色相。
颜色很难推理，工具可以提供帮助
在感知上统一的颜色模型的陷阱之一是，不可能存在颜色 -没有“非常鲜艳的深黄色”或“充满活力的淡宝蓝色”之类的东西。构建我们自己的工具可以帮助我们准确地查看可能的颜色，并允许我们在调色板上快速进行迭代，直到我们制作出易于访问，充满活力且仍感觉像条纹的调色板为止。
其他资源
要了解有关颜色的更多信息，我们建议以下资源：
- 符文·马德森（Rune Madsen）的《编程设计系统》中的“感知均匀的色彩空间”
- 杰米·王（Jamie Wong）的“颜色：从十六进制代码到眼球”
- Bartosz Ciechanowski的“色彩空间”
若有收获，就点个赞吧
0 人点赞
