【譯】你不知道的 Chrome 除錯工具技巧 第八天：Color picker（顏色選擇器）

dendoink發表於2018-12-12
Chrome除錯

特別宣告

本文是作者 Tomek Sułkowski 釋出在 medium 上的一個系列。據作者透露一共有 24 篇，一直更新到 12 月 24 日
版權歸原作者所有。

前兩篇的翻譯連結我已經給到了作者本人，雖然他不理解中文，但是他還是很開心哈哈,截圖在最後

譯者在翻譯前已經和作者溝通得到了翻譯整個系列的授權。
為了不影響大家閱讀，授權的記錄在這裡

正文

在馬上就要迎來假期的這 24 天裡，我將會發布一系列短篇的文章，關於如何將開發工具使用得更加有意思，昨天我們把玩了一下非同步 console ，今天我們來看下顏色選擇器：

23. Color picker 介紹

假如你從沒有細看過顏色選擇器，確實它看起來毫不起眼：只有一些可供我們選擇的顏色。但仔細看，Wow，我的小夥伴們都驚呆了：DevTools 的開發團隊在這個小玩意裡面原來放了這麼多有用的資訊！

【譯】你不知道的 Chrome 除錯工具技巧 第八天：Color picker（顏色選擇器）

24. 只選擇你正在用的顏色

下面是顏色選擇器的一部分，包括你可以自定義的調色盤。你可以：

  • 切換到一個有色調變化的 Material 調色盤
  • 自定義，可以新增和刪除顏色
  • 從 CSS Variables 中選擇一個你當前頁面使用的樣式表中存在的顏色。
  • 或者所有你在頁面的 CSS 中使用的顏色

【譯】你不知道的 Chrome 除錯工具技巧 第八天：Color picker（顏色選擇器）

25.直觀的選擇你的顏色

當開啟一個文字的調色選擇器(這個 color css 屬性 但不是 background-color) 你會看到 “Contrast ratio(對比度)” 部分。它顯示了文字和它（開發者工具）認為這段文字應該有的背景顏色之間的對比度。如果這個數值很高，你的文字相對於背景來說更容易被看見，如果這個值接近 1 , 那麼文字的顏色幾乎不能從背景中區分出來。

  • 在數字邊上的 “?” 意味著不好（譯者注:對比度太低）

  • 一個 “✅” 意味著這個顏色遵從 Web Content Accessibility Guidelines (WCAG) 2.0 的 AA 宣告，這意味著對比度至少為 3

  • 你同樣可以擁有 “✅ ✅” ，那意味著滿足了 AAA 宣告。

【譯】你不知道的 Chrome 除錯工具技巧 第八天：Color picker（顏色選擇器）

通過點選那個符號（譯者注：上文提到的 AA AAA 或者?符號）來閱讀更多關於accessibility rules 中顏色的說明。

如果想繼續探索 對比度 的部分，你會看到額外的資訊，並可以選擇一個不同的顏色作為背景顏色來進行對比，當然 color spectrum(色譜) 部分現在會顯示一個對比的邊界：如果你的背景顏色比這條線上面的顏色更深，相容 AA ，如果背景顏色比這條線上面的更亮，你需要在這條線的下面選擇一個顏色。

今天的分享就到這裡~

慣例： 如果你從這裡學到了一些新東西

→ 你可以點個贊再走嘛~
→ 關注我：Twitter：Tomek Sułkowski

其他系列

其他此係列的文章，馬上就會翻譯出來，到時會貼出對應的連結在此處。

寫在最後

如果你對我的翻譯表示肯定，也可以關注我一波哦~ 順便我的開源專案，求一波 star→ 看這裡, 美麗的部落格系統

關於這次翻譯，作者的回覆

【譯】你不知道的 Chrome 除錯工具技巧 第八天：Color picker（顏色選擇器）

相關文章