色彩对比是无障碍的一个重要方面。良好的对比度使有视觉障碍的人更容易使用产品，并有助于在不完善的条件下，如低光环境或旧屏幕。考虑到这一点，我们最近更新了用户界面中的颜色，使其更易于访问。文本和图标颜色现在可靠地在条纹仪表板和所有其他产品与我们的内部接口库建立了清晰的对比。实现与颜色的正确对比是很有挑战性的，特别是因为颜色是非常主观的，对产品的美学有很大的影响。我们想创造一个色彩系统与手工挑选，充满活力的颜色，也符合标准的可及性和对比度。当我们评估外部工具以提高产品的颜色对比度和易读性时，我们注意到两种常见的解决问题的方法：手工挑选颜色并对照标准检查它们的对比度。我们的经验告诉我们，这种方法使颜色的选择过于依赖试错。从一组基色生成较亮和较暗的色调。不幸的是，简单的变暗或变亮会导致颜色变暗或变暗，这很难区分彼此，而且常常看起来不太好。利用我们发现的现有工具，很难创建一个允许我们在确保可访问性的同时选择好颜色的颜色系统。我们决定创建一个新的工具，使用感知颜色模型来提供关于可访问性的实时反馈。这使我们能够快速创建一个满足我们需求的配色方案，并为我们提供了将来可以迭代的内容。背景我们在产品界面中使用的颜色基于我们的品牌调色板。在我们的产品中使用这些颜色可以让我们将Stripe品牌的一些特征引入到我们的界面中。不幸的是，很难满足（并保持）这些颜色的对比度准则。网站可访问性指南建议小文本的最小对比度为4.5，大文本的最小对比度为3.0。当我们审计产品中的颜色使用情况时，我们发现用于小文本的默认文本颜色（黑色除外）都不符合对比度阈值。选择可访问的颜色组合需要每个设计师或工程师理解指导原则，并在每种情况下选择具有足够对比度的颜色对。对于某些颜色的组合，选择是有限的，可访问的颜色组合只是看起来不好。当我们第一次在我们的产品中寻找提高文本对比度的方法时，我们首先探索了将文本的默认颜色在我们的比例上再深一步，如下面左列所示。不幸的是，我们的一些颜色在下一个最暗的阴影处仍然没有足够的对比度。一旦我们在现有的比例尺（右栏）上找到了一个有足够对比度的阴影，我们就失去了许多色彩的亮度和活力。这些颜色在白色的背景上通过了指导方针，但它们又暗又浑浊，很难区分色调。如果不深入挖掘，你很容易接受你需要在拥有易接近的颜色或好看的颜色之间进行选择的权衡。为了两者兼顾，我们需要从头开始重新设计我们的颜色系统。我们想设计一个新的颜色系统，它将提供三个现成的关键好处：可预测的可访问性：颜色有足够的对比度来通过可访问性准则。清晰、充满活力的色调：用户可以很容易地区分颜色。一致的视觉权重：在每个级别上，没有一种颜色比另一种颜色优先。浅论色彩空间我们需要解释一下我们该怎么做。我们习惯于用RGB颜色空间来处理屏幕上的颜色。颜色是根据屏幕上红、绿、蓝三色光的混合程度来指定的。不幸的是，虽然用这种方式描述颜色对计算机来说是很自然的，但对人类来说却并非如此。给定一个RGB颜色值，需要改变什么使它更亮？更丰富多彩？再加些黄色？我们更直观地认为颜色是由三个属性组成的：色调：它是什么颜色的？色度：它有多鲜艳？亮度：它有多亮？支持以这种方式指定颜色的流行颜色空间是HSL。在流行的颜色设计工具和代码库中得到了很好的支持。只有一个问题：HSL计算亮度的方法有缺陷。大多数颜色空间没有考虑到的是，在数学亮度相同的情况下，不同的色调本质上被人眼感知为不同的亮度级别，黄色比蓝色显得更亮。下面的图像是显示颜色空间中具有相同亮度和饱和度的一组颜色。虽然颜色空间声称饱和度和亮度都是一样的，但我们的眼睛却不同意。请注意，这些颜色中有些颜色比其他颜色更浅或更饱和。例如，蓝色显得特别暗，而黄色和绿色则显得特别明亮。有一些颜色空间试图模拟人类对颜色的感知。感知统一的颜色空间基于与人类视觉关系更大的因素对颜色进行建模，并执行复杂的颜色转换，以确保这些维度反映人类视觉的工作方式。当我们在一个统一的颜色空间中选取亮度和饱和度相同的颜色样本时，我们可以观察到显著的差异。这些颜色看起来是混合在一起的，每种颜色看起来都像其他颜色一样明亮和饱和。这是知觉上的一致性。令人惊讶的是，支持统一颜色模型的工具很少，也没有一个能够帮助我们设计调色板。所以我们建立了自己的。可视化颜色我们建立了一个网络界面，使我们能够使用统一的颜色模型来可视化和操纵我们的颜色系统。这个工具给了我们一个即时的反馈循环，当我们迭代我们的颜色时，我们可以看到每一个变化的效果。上面所示的颜色空间被称为CIELAB，或者亲切地称为Lab。Lab中的L代表亮度，但与HSL中的lightness不同，它被设计成在感知上是一致的。通过将我们的色阶转换到实验室颜色空间，我们可以根据颜色的感知对比度来调整颜色，并在视觉上比较结果。下图显示了在颜色工具中显示的我们以前的调色板的亮度和对比度值。你可以看到，我们每种颜色的感知亮度都遵循不同的曲线，在同一点上，黄色和绿色比蓝色和紫色浅得多。我们可以通过控制我们所有颜色的色调和饱和度来控制我们所有的颜色。在建议的颜色中，黄色和蓝色的对比度范围相同，但它们看起来仍然像我们的颜色。在下图中，您可以看到每种颜色的感知亮度遵循相同的曲线，这意味着每种颜色（左边的标签）在给定级别（顶部的数字标签）具有相同的对比度值。我们的新工具也向我们展示了什么是可能的。视觉化一个知觉上统一的颜色模型让我们看到视觉感知的限制。图表中的阴影区域代表所谓的假想颜色，这些颜色实际上是不可复制或可感知的。原来"真的是深黄色"其实不是什么东西。大多数用于混合颜色的工具都允许您在每个参数的整个范围内设置值，只需剪裁颜色或返回不实际表示您设置的参数的最接近的颜色。当我们做出改变时，实时地可视化可用的颜色空间，这使我们能够更快地迭代，因为我们可以判断出哪些变化是可能的，哪些变化使我们更接近我们的目标："明亮的"，符合适当对比度准则的差异化颜色。在某些情况下，找到一组协同工作的颜色就像穿针引线。在这里，阴影区域显示了空间是多么的有限，实际上要找到一个允许所有色调的亮度大致相等的值的组合。结果经过大量的迭代和使用真实组件和界面的测试，我们得到了一个实现我们目标的颜色调色板：我们的颜色可以预测地通过可访问性准则，保持其清晰、充满活力的色调，并在色调之间保持一致的视觉权重。我们的文本和图标的新默认颜色现在通过了wcag2.0指南中定义的可访问性对比度阈值。除了在白色背景上传递对比度准则外，当显示在任何色调中最亮的颜色值上方时，每种颜色也会通过。由于我们通常使用这些浅色背景来抵消或突出显示部分，这使得它变得简单和可预测，以确保文本在我们的产品中有足够的对比度。因为新颜色是基于对比度统一组织的，所以我们还内置了一些简单的指导原则，用于在不太常见的情况下选择合适的对比度对。任何两种颜色都保证有足够的对比度小文本，如果他们至少相隔五级，和至少四级的图标和大文本。通过系统内置的对比度指导原则，可以很容易地对不同组件中的颜色对比度进行调整，从而获得可预测的结果。例如，我们重新设计了徽章组件，以使用颜色背景来清楚区分每种颜色。在最浅的可能值，颜色太难区分彼此。我们可以通过调整背景颜色来保持文本的对比度