艾萨克·牛顿|B端设计 | 设计师必须了解的色彩系统搭建( 五 ) 色调|饱和度|设计|颜色|Color|色

文章图片
3.5 中性色（ Neutral color/Grayscale）
界面中的黑色、白色、灰色的梯度。
中性色的应用场景：
中性色主要被大量的应用在界面的文字部分，此外背景、边框、分割线等场景中也非常常见。
中性色板的创建方式如下：

文章图片

第一步：利用#000000或者便黑色的颜色在#FFFFFF背景上建立透明度梯度
第二步：吸色（这一步可以省略），我们发现了UI设计中常见的颜色：#333333、 #666666、#999999、 # CCCCCC
第三步：叠加蓝色或主色透明度的2-10% ，再吸色。叠加蓝色会使我们的文字阅读更舒适，主色最好为冷色系的情况再叠加。

3.6 前景色（Foreground Color）/ “On” Colors的概念我们先明确一个颜色的“位置”概念，前景色（Foreground color）、背景色（Background Color）和遮罩（Overlay），任何设UI计场景无非就是这三个色的叠加或反复叠加创造出的效果。
前景色一般是文字、icon、分割线、描边的颜色，遮罩一般在前景色和背景色之间，背景色在最底部。常见场景如下图所示：

文章图片
需要注意的是，在没有states或者我们定好了背景颜色梯度的情况， overlay是没有的；当依赖overlay制作梯度，梯度最低的情况， overlay透明度也是0 ，所以视觉上是没有的。
接下来，我们来看一下Material Design的例子，如下图：

文章图片
我们注意到， Material Design颜色中出现了“on xx“的颜色，其实on xx color （之后简称为“on Color”）颜色就是我们之前提到的前景色的的前景色。 on单词后对应的Primary/Secondary/Surface等就是对应的背景色。
从上图我们看出，在primary color/Error color为背景色的情况，前景色为白色；在secondary/background/surface为背景色的情况，前景色为黑色。当然，前景色还可能是主色、辅助色、警示色等等。
前景色的梯度方式除了用色板，还可以直接使用透明的梯度，比如下图：

文章图片
以透明度控制前景色颜色层级的好处是，前景色可以和背景色更好的融合，带来更好的阅读和视觉体验。我们也可以用这样的方法制作出自己的前景色透明度梯度，甚至功能色也可以加入其中，如下图所示：

文章图片
3.7 可读性标准（Legibility standards）
所有文本都应清晰易读并符合(WCAG 2.0)无障碍阅读标准， WCAG 2.0 中将颜色对比等级分为 3 种， A级、AA级、AAA级，等级越高意味着颜色的对比度越高，呈现出来的视觉压力越大。

A级：对比度 3：1 ，是普通观察者可接受的最低对比；
AA级：对比度 4.5：1 ，是普通视力损失的人可接受的最低对比度；
AAA级：对比度 7：1 ，是严重视力损失的人可接受的最低对比度。

WCAG的网站：https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
网站可读性必须达到AA级别，也就是内容文本至少4.5:1 ，标题文本至少达到3:1
可读性可以在https://color.review/轻松查看，如下图：