118.精读《使用 css 变量生成颜色主题》

本周工作中遇到类似颜色主题的问题，在查资料的时候，看到这个视频，觉得讲得很清楚，而且趣味性丰富，所以想拿出来讲讲这个很有意思的主题。

视频链接：CSSconf EU 2018 | Dag-Inge Aas & Ida Aalen: Generating Colors with JS and CSS Custom Properties

（微信限制原因，没办法加超链接，可以复制链接地址到浏览器观看视频）

1. 精读

CSS 变量

CSS 变量及 CSS Variables(Custom Properties)，目前几乎都已经被主流浏览器所支持，但是估计还有一部分读者不熟悉这个功能，简单列举一下使用方法：

:root {
   
  --bg-color: brown; // 定义颜色变量
}
.btn {
   
  // 直接使用颜色预定义的颜色变量
  background-color: var(--bg-color);
}

Web 内容无障碍指南的对比度

Web 内容无障碍指南的对比度指的是 W3C 组织发布的 《Web Content Accessibility Guidelines (WCAG)》，这个指南中涵盖了让 Web 内容更易于访问的各种建议，其中针对网页的颜色对比度发布了规范。

在 Chrome 中对于颜色编辑的时候，打开颜色选择器也会看到当前颜色的对比度值&#