元素面板篇 - 顏色選擇器

# 前言

如果你從來沒有仔細的查看過顏色選擇器，很正常，因爲它確實毫不起眼：只有一些可以讓我們選擇的顏色。但仔細查看你會發現：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 ，如果背景顏色比這條線上面的更亮，你需要在這條線的下面選擇一個顏色。