企业做网站设计可会见的色彩系统

颜色比拟度是可会见性的重要方面，精采的比拟度使有视觉障碍的人更容易利用产物，并有助于在不完美的条件下，如低光情况或旧屏幕。思量到这一点，飞数科技最近更新了用户界面中的颜色，使其更易于会见。文本和图标的颜色，此刻靠得住地有清晰的比拟，整个条形仪表板和所有其他产物与我们的内部接口库构建。

 

实现与颜色的正确比拟是具有挑战性的，出格是因为颜色长短常主观的，对产物的美学有很大的影响。我们想建立一个颜色系统，用手工挑选的，布满活力的颜色，同时满意可会见性和比拟度的尺度。

 

当我们评估外部东西以提高产物的颜色比拟度和可读性时，我们留意到办理这个问题的两种常见要领：

 

1、手工挑选颜色，并与尺度颜色举办比拟。我们的履历汇报我们，这种要领使得选择颜色过于依赖于重复试验。从一组根基颜色生成较亮和较暗的颜色。

 

2、不幸的是，简朴的变暗或变亮大概会导致惨淡或柔和的颜色，这些颜色很难区分，并且往往看起来不太好。

 

利用我们发明的现有东西，很难建立一个颜色系统，使我们可以或许在确保可会见性的同时挑选出好的颜色。我们抉择建立一个新的东西，它利用感知颜色模子来提供关于可会见性的及时反馈。这使我们可以或许快速建立一个满意我们需求的配色方案，并为我们提供一些可以在将来举办迭代的内容。

 

配景

 

我们在产物界面中利用的颜色基于我们的品牌调色板，在我们的产物中利用这些颜色使我们可以或许将Stripe的品牌特征带入我们的界面。

 

 

不幸的是，很难满意（并保持）这些颜色的比拟度准则，网页易读性指引发起小文本的最低比拟度为4.5，大文本的最低比拟度为3.0。当我们查抄我们产物的颜色利用环境时，我们发明用于小文本（玄色除外）的默认文本颜色都没有到达比拟度阈值。

 

 

选择容易领略的颜色组合要求每个设计师或工程师领略指导目的，并在每种环境下选择具有足够比拟度的颜色对。对付特定的颜色组合，选择是有限的，可会见的颜色组合只是看起来不太好。

 

当我们第一次在我们的产物中寻找提高文本比拟度的要领时，我们最初摸索了将文本的默认颜色在我们的比例上再深一步，如下面的左栏所示。

 

 

不幸的是，我们的一些颜色仍然没有足够的比拟度下最暗的阴影。一旦我们在现有的标准（右栏）上得到了一个具有足够比拟度的色度，我们就失去了很多颜色的亮度和活力。这些颜色通过了白色配景的准则，但它们是深色和浑浊的，很难区分它们的色调。

 

不需要深入挖掘，就可以很容易地接管折衷方案，即您需要在可会见的颜色和看起来不错的颜色之间举办选择。为了两者兼得，我们需要从新开始从头设计我们的颜色系统。

 

我们想设计一种新的颜色系统，它将提供三个开箱即用的主要长处：

 

1、可预测的可会见性：颜色有足够的比拟度，以通过可会见性指南。

 

2、清晰，布满活力的色调：用户可以很容易地域分差异的颜色。

 

3、一致的视觉重量：在每一层，，没有一种颜色优先于另一种颜色。

 

色彩空间的一个小插曲

 

为了表明我们是如何做到这一点的，我们需要对颜色有点书白痴气。

 

我们习惯于在屏幕上利用RGB颜色空间中的颜色。颜色是按照屏幕上赤色、绿色和蓝色光的殽杂水平来指定的。

 

 

不幸的是，固然用这种方法来描写颜色对电脑来说很自然，但对用户来说却不自然。给定一个RGB颜色值，需要改变什么才气使它更亮？更富厚多彩的？添加更多的黄色？

 

我们更直观地认为颜色是由三个属性构成的：

 

它是什么颜色的？

 

色度：它有多鲜艳？

 

亮度：有多亮？

 

 

支持以这种方法指定颜色的风行颜色空间是HSL，它在设计东西和风行的颜色操纵代码库中获得了很好的支持。只有一个问题：HSL计较亮度的要领有缺陷。大大都色彩空间没有思量到的是，差异的色调在本质上被人眼感知为差异水平的明度——在数学上明度沟通的程度上，黄色比蓝色更亮。

 

下图是一组在显示颜色空间中具有沟通亮度和饱和度的颜色，固然色彩空间声称饱和度和亮度都是一样的，但我们的眼睛差异意。请留意，个中一些颜色看起来比其他颜色更淡或更饱和。譬喻，蓝色显得出格暗，而黄色和绿色显得出格亮。

 

 

有些色彩空间试图模仿人类对色彩的感知。感知上一致的颜色空间基于与人类视觉更相关的因素对颜色举办建模，并执行巨大的颜色转换以确保这些维度反应了人类视觉的事情方法。

 

 

当我们在一个感知上匀称的颜色空间中选取亮度和饱和度沟通的颜色样本时，我们可以调查到明明的差别。这些颜色殽杂在一起，每一种颜色都和其他颜色一样轻，一样饱和。这就是事情中的感知一致性。

 

令人惊奇的是，很少有东西支持感知上一致的颜色模子，并且没有一个东西可以辅佐我们设计调色板。所以我们成立了本身的公司。

 

可视化的颜色

 

我们构建了一个web界面，答允我们利用感知一致的颜色模子来可视化和操纵我们的颜色系统。当我们对颜色举办迭代时，这个东西给了我们一个即时的反馈轮回——我们可以看到每个变革的结果。

 

 

上图所示的颜色空间被亲切地称为CIELAB或Lab，Lab中的L代表亮度，但与HSL中的亮度差异，它的设计是感知上一致的。通过将我们的颜色比例转换成尝试室的颜色空间，我们可以按照它们的感知比拟度调解我们的颜色，并在视觉上较量功效。

 

下图显示了颜色东西中显示的先前调色板的亮度和比拟度值。你可以看到，我们每一种颜色的感知亮度都遵循一条差异的曲线，黄色和绿色比蓝色和紫色在同一点上淡得多。

 

 

通过在感知上一致的颜色空间中节制我们的颜色，我们可以或许发生一组颜色，在所有色调中具有一致的比拟度，并尽大概多地保存当前颜色的预期色和谐饱和度。在提议的颜色中，黄色和蓝色有沟通的比拟度范畴，但它们看起来仍然像我们的颜色。

 

在下面的图表中，您可以看到每种颜色的感知亮度遵循沟通的曲线，这意味着每种颜色（左侧的标签）在给定的级别上具有沟通的比拟度值（顶部的数字标签）。

 

 

 

我们的新东西也向我们展示了什么是大概的，视觉化一个感知一致的颜色模子可以让我们看到视觉感知的约束。图表中的阴影部门代表了所谓的想象中的颜色，它们实际上是不行复制或不行感知的。本来“真正的深黄色”并不是一个对象。

 

大大都殽杂颜色的东西答允你配置值在每个参数的全系列，就夹的颜色或返回最近的符合的颜色并不代表参数配置。可视化及时可用颜色空间作为我们答允我们改变迭代快得多，因为我们可以汇报什么改变是大概的，什么改变我们更靠近我们的方针：“豁亮”，区分颜色切符合当的比拟的指导目的。

 

在某些环境下，找到一组配合事情的颜色就像穿针一样。在这里，阴影区域显示了如何有限的空间，实际上是找到一个组合的代价观，答允大抵沟通的亮度为所有色调。

 

 

功效

 

在利用真实的组件和界面举办了大量的迭代和测试之后，我们获得了一个调色板，它实现了我们的方针：我们的颜色可预测地通过了可会见性指导目的，保持了它们清晰、布满活力的色调，并保持了跨色调的一致的视觉权重。

 

文本和图标的新默认颜色此刻通过了WCAG 2.0指南中界说的可会见性比拟度阈值。

 

 

 

除了在白色配景上通报比拟度准则外，每种颜色在显示在任何色调中最亮的颜色值之上时也会通报。由于我们凡是利用这些浅色配景来抵消或突出显示部门，这使得确保文本在我们的产物中有足够的比拟度变得简朴和可预测。

 

由于新颜色是按照比拟度统一组织的，所以我们还提供了简朴的内置指南，以便在不太常见的环境下选择符合的比拟度对。任何两种颜色都担保对小文本有足够的比拟度，假如它们之间至少有五层的间隔，而图标和大文本之间至少有四层的间隔。

 

通过系统内置的比拟度指南，可以很容易地对差异组件的颜色比拟度举办调解，从而得到可预测的功效。

 

 

譬喻，我们从头设计了我们的Badge组件，利用颜色配景来明晰区分每种颜色。在大概的最轻的值，颜色太难区分互相。通过将配景和文本颜色向上移动一层，我们可以或许保持所有标志颜色之间的文本比拟度，而不需要别离微调每个颜色组合。

 

总结

 

我们认识到，设计易于领略的色彩系统并不料味着在黑黑暗探索。我们只是需要改变对颜色的观点：

 

利用感知上一致的颜色模子

 

在设计可会见的颜色系统时，利用感知一致的颜色模子（如CIELAB）辅佐我们相识每种颜色在眼睛中是如何泛起的，而不是在计较机中是如何泛起的。这使我们可以或许验证我们的直觉，并利用数字来较量我们所有颜色的亮度和色彩。

 

可会见并不料味着布满活力

 

WCAG可会见性尺度有意只存眷前景和配景颜色之间的比拟，而不是它们看起来有多亮。相识每一种颜色的光鲜水平有助于区分差异的色调。

 

颜色很难讲原理，东西可以资助

 

感知上一致的颜色模子的缺陷之一是不行能存在颜色——不存在“很是彩色的暗黄色”或“布满活力的淡皇家蓝色”之类的颜色。构建我们本身的东西辅佐我们精确地查察哪些颜色是大概的，并答允我们快速地迭代我们的调色板，直到我们生成一个可会见的、布满活力的、仍然感受像条纹的调色板。