元素面板篇 - 颜色选择器

# 前言

如果你从来没有仔细的查看过颜色选择器，很正常，因为它确实毫不起眼：只有一些可以让我们选择的颜色。但仔细查看你会发现：DevTools 的开发团队在这个小玩意里面放了多到你想象不到信息。

 

# 1. 只选择你正在用的颜色

介绍颜色选择器的一部分：

• 切换到一个有色调变化的 Material 调色板
• 自定义，可以添加和删除颜色
• 从 CSS Variables  中选择一个你当前页面使用的样式表中存在的颜色。
• 或者所有你在页面的 CSS 中使用的颜色

 

# 2. 直观的选择你的颜色

打开一个文本的调色选择器(是 color 属性， 而不是 background-color) 你会看到 “Contrast ratio(对比度)” 部分。它显示了 文本的颜色 与 开发者工具认为这段文本应该有的背景颜色 之间的对比度。如果这个数值很高，那么你的文本相对于背景来说，更显而易见，但如果这个值接近 1 ，那么文本的颜色几乎不能从背景色中区分。

• 在数字边上的 “🚫” 意味着对比度太低了。
• 一个 “✅” 意味着这个颜色遵从 Web Content Accessibility Guidelines (WCAG) 2.0  的 AA 声明，这意味着对比值至少为 3，
• “✅ ✅” 意味着满足了 AAA 声明。

 

另外，你可以通过点击上文提到的 AA ， AAA 或者 🚫 符号来阅读更多关于accessibility rules  中颜色的说明。

如果你继续探索 对比度 的部分，还可以看到更多的信息，甚至可以选择一个不同的颜色作为背景颜色进行对比，对应的 color spectrum(色谱) 部分现在会显示一个对比的边界线：如果你的背景颜色比这条线上面的颜色更深，代表兼容 AA ，如果背景颜色比这条线上面的更亮，你需要在这条线的下面选择一个颜色。