作者：Wuling这周在工作中遇到了相似色主题的问题。查资料的时候看到这个视频，觉得很清楚很有趣，就想分享给大家。有趣的主题。视频链接：CSSconfEU2018|Dag-IngeAas和IdaAalen：使用JS和CSS自定义属性生成颜色1。CSS变量精读CSS变量和CSS变量（自定义属性）目前几乎所有的主流浏览器都支持，但是估计还有一些读者对这个功能还不是很熟悉，下面简单罗列一下使用方法：:root{--bg-color:棕色;//定义颜色变量}.btn{//直接使用颜色预定义颜色变量background-color:var(--bg-color);}ContrastofWebContentAccessibilityGuidelinesContrastofWebContentAccessibilityGuidelines参考《Web Content Accessibility Guidelines (WCAG)》发表由W3C组织制定，其中涵盖了使Web内容更易于访问的各种建议，它发布了网页颜色对比度的规范。在Chrome中编辑颜色时，打开颜色选择器也会看到当前颜色的对比度值（对比度）。网页颜色的对比度值在1:1到21:1之间，文字和图片文字的对比度最小值是4.5:1，低于这个值的对比度是不符合标准的。我们来看看列出的几种颜色的对比。对比度越高，越容易阅读。较低的对比度可能会使一些有视觉障碍或色觉缺陷的用户无法阅读。演讲中的色彩解决方案演讲首先谈到了挪威的一项法律。不符合WebContentAccessibilityGuidelines的站点在挪威是非法的，因此挪威Web开发人员非常重视站点的内容可访问性。首先我们讲了css变量的使用方式，它支持各种颜色主题的切换。使用js设置颜色变量，支持主题颜色切换。但随之而来的一个问题是，如果用户可以随意切换colortheme背景颜色，如何保证部分按钮文字的可读性？如果用户选择了接近按钮颜色的背景色，我们该怎么办？然后这篇演讲给出了根据亮度来判断按钮文字颜色是黑色还是白色的解决方案。根据明度来判断是黑色还是白色。具体代码如下。一般原则是将颜色转换为灰度颜色。有一个著名的心理学公式：Gray=R*0.299+G*0.587+B*0.114，然后根据颜色灰度来决定是用黑色主题还是白色主题。if(red*0.299+green*0.587+blue*0.114)>186use#000000elseuse#ffffff可读性的问题解决了，但是接下来还有一个问题，如果用户选择的颜色很浅，并且底色对比度小于4.5，如何处理。找一种对比度更强的颜色，增强可读性。演讲中给出的解决方案是不断加深用户当前选择的颜色，循环得到对比度最高的相同颜色。代码如下：获得较深的颜色后，通过给按钮添加外边框来优化整体的可读性。文末还介绍了如何通过给一个主题色得到第二个和第三个主题色，将颜色放到HSL色轮上，将hue的值旋转60度得到新的第二个主题色.不过演讲者并没有解释为什么要这样做，只是说自己是凭经验做的，觉得可以得到一个合适的主题调色板。推导纯css方案演讲中提供的变色方案基本都是基于JS计算。后来有人在css-tricks扔了一篇文章说基于css完全可以实现这个功能。其实颜色的原理都是一致的，但是我觉得这个实现比较神奇，但是功能可以完全满足。比如本文中根据亮度判断按钮文字是黑色还是白色的代码如下：:root{--light:80;/*文本颜色变化的阈值*/--threshold:60;}.btn{/*将被解析为黑色或白色*/--switch:calc((var(--light)-var(--threshold))*-100%);color:hsl(0,0%,var(--switch));}视觉图表中颜色的应用在视觉图表中，颜色的应用要比Web谨慎得多。我们在做web开发的时候，不妨看一下可视化图表中颜色应用的一些规范。在视觉图表中，选择的颜色不能太随意。每一次颜色的变化都是图表信息的变化，为图表增加了新的数据。图表的每种颜色也是要表达的信息。列出一些图表中的颜色使用指南，例如：不建议使用多种颜色来表示相同的数据在多折线图中，不要使用不同的颜色或色轮相对两侧的颜色。过多的颜色对比会分散读者对数据的注意力。一般来说，应避免色彩的主观表现，避免使用具有特殊含义的色彩。例如，使用红色和绿色来表示销售额的变化。当然，对于视觉图表来说，仅仅遵循一些颜色使用指南是不可能得到一个优雅呈现的视觉图表的。同样重要的是要注意图表呈现的最重要的视觉元素，减少用户从视觉信息的角度，减少用户的视觉疲劳。3.相关链接CSS前背景自动配色技术介绍：https://www.zhangxinxu.com/wordpress/2018/11/css-background-color-font-auto-match/纯css方案：https://css-tricks.com/switch-font-color-for-different-backgrounds-with-css/获取颜色的demo：https://confrere.com/a11y/test/颜色色轮推荐文章：https：//blog.graphiq.com/finding-the-right-color-palettes-for-data-visualizations-fcd4e707a283讨论地址为：精读《使用 css 变量生成颜色主题》·Issue#203·dt-fe/weekly如果想参与讨论请点这里，每周都有新主题，周末或周一发布。前端精读——帮你过滤靠谱的内容。关注前端精读微信公众号
