手把手教你推导一套色彩体系( 四 ) 精彩片段|韩立|看过|经典

文章插图
6. 辅助色的同色系配色与品牌色一样，使用tint/shade规则推导出全部辅助色不同梯度的色阶。具体过程不再赘述～

文章插图
7. 定义文本色CROV DS的文本色并非纯粹的中性色，我们通过加入一点点品牌色来让文本呈现色彩倾向，以此提升页面的活力及年轻感，同时也可以让界面更加耐看，减缓B端产品长期使用时的视觉疲劳。
具体方法就是，分别在#222、#555、#888、#b3b3b3的一、二、三级中性文本色代表的色块上，覆盖一层10%透明度的品牌色。最后得出了四个层次的文本色。当然，中性文本色你也可以参考antDesign中通过透明度进行定义的方法，不一定需要按照某个具体色值来。

文章插图
四、WCAG无障碍测试我们必须要承认的现实是，设计师所定义出的色彩在mac上看上去是很出彩，但是这并不能代表所有用户。也许在用户中依然有一部分人群，他们的显示器配置低和老旧。而且我们无法判断用户们的使用环境，有可能是在刺眼的阳光下、有可能是在昏暗的环境中。如果色彩不去做可用性测试，在很多的情况下存在体验降低的风险。
而WCAG（Web Content Accessibility Guideline，Web内容无障碍指南）解决的正是这些障碍问题。WCAG中的POUR无障碍原则包括了：易于感知的（Perceivable）、便于操作的（Operable）、稳定理解的（Understandable）、稳定耐用的（Robust）。
而颜色则正是对应了易于感知的这一无障碍原则。网站中的文字和图像应该具备足够高的色彩对比度，使之更易被用户感知识别。
WCAG颜色对比度无障碍的两个标准分别为：【1.4.3条例：最小对比度标准】和【1.4.6条例：加强对比度标准】，分别对应着AA级和AAA级。
AA级的定义为：普通文本的视觉呈现与背景至少要有4.5：1的对比度，大文本与背景至少有3：1的对比度
AAA级的定义为：普通文本的视觉呈现与背景至少要有7：1的对比度，大文本与背景至少有4.5：1的对比度
（这里的大文本即≥18pt常规字重的文本或者≥14pt加粗字重的文本）
这两个条例被大厂们广泛运用到了产品的颜色标准当中。
比如MD规范中的文本移动性规范标准中的数据就是来自WCAG的1.4.3条例标准。

文章插图
同样，阿里巴巴在前不久发布的B-Design中的无障碍色acs指标和WCAG本质上也是一样。

文章插图
五、颜色对比度验证那该如何验证我们的颜色符合这俩标准呢？
easy。这里直接上个网址，https://contrast-ratio.com/#%23373247-on-%23fff
我们分别在背景及文本录入色值，即可得到最终的对比度数据。比如我录入了白色和一级文本色数值，最后的12.28即两者的对比度，嗯，达到了AAA级标准。

文章插图
一样的步骤，分别测试了其他文本色的对比度（产品无暗色模式，所以此处仅验证白色背景下的颜色对比度），分别达到了7.59、4.71和2.38。可以看出除了2.38外，其他文本色的对比度均符合可见度最低标准。
不过WCAG中指出，一些特殊情况下的文本无最低对比度的限制，其中就包含了表单字段的占位符（placeholder）。而2.38对比度对应的文本色主要用于暗提示，因此这种情况就可以无视掉了~
六、最后色彩体系的初步探索到此结束了，不过篇幅原因并没有面面俱到，比如渐变色、实际落地效果等等。另外，一些地方我自己也在摸索阶段，因此很多分析也可能存在不足，文章仅作参考。