如果你从来没有仔细的查看过颜色选择器,很正常,因为它确实毫不起眼:只有一些可以让我们选择的颜色。但仔细查看你会发现:DevTools
的开发团队在这个小玩意里面放了多到你想象不到信息。
介绍颜色选择器的一部分:
Material
调色板CSS
中使用的颜色打开一个文本的调色选择器(是 color
属性, 而不是 background-color
) 你会看到 “Contrast ratio(对比度)”
部分。它显示了 文本的颜色 与 开发者工具认为这段文本应该有的背景颜色 之间的对比度。如果这个数值很高,那么你的文本相对于背景来说,更显而易见,但如果这个值接近 1
,那么文本的颜色几乎不能从背景色中区分。
3
,另外,你可以通过点击上文提到的 AA
, AAA
或者 🚫
符号来阅读更多关于accessibility rules
中颜色的说明。
如果你继续探索 对比度
的部分,还可以看到更多的信息,甚至可以选择一个不同的颜色作为背景颜色进行对比,对应的 color spectrum(色谱)
部分现在会显示一个对比的边界线:如果你的背景颜色比这条线上面的颜色更深,代表兼容 AA
,如果背景颜色比这条线上面的更亮,你需要在这条线的下面选择一个颜色。