使用色彩選擇器測試文字與顏色對比度

低視力人員可能看不到非常明亮或非常暗的區域。所有東西的亮度都差不多，這讓輪廓和邊緣變得難以區分。

對比度是衡量文字前景與背景亮度差異的指標。如果你的文字對比度低，視力低下的人可能會覺得網站像是空白畫面。

在 DevTools 中，查看文字元素對比度的一種方式是使用元素工具中樣式標籤中的色彩選擇器。 Color Picker 幫助你驗證文字是否符合建議的對比度水平。

要用色彩選擇器檢查文字與顏色的對比：

在 DevTools 中，打開 Elements 工具。
在 DOM 樹中，選擇你想檢查的文字元素。
在 Styles 標籤中，找到套用到元素上的 color 屬性，然後點擊 顏色屬性旁邊 的顏色方塊。

《The Color Picker》開場：
檢視色彩選擇器的 對比度 部分：

對比度區塊顯示文字與背景之間的對比度分數，以及一個圖示顯示對比度是否符合建議：
- 紅色劃掉的圓圈表示該元素未達到最低建議值。
- 一個勾選標記表示該元件符合最低建議值。
- 兩個勾選標記表示該元素符合強化建議。
欲了解更多資訊，請點擊「 對比度」 區段展開：

在顏色選擇器頂端的視覺選擇器中，會出現兩條線，橫跨視覺選擇器，並有一個圓形表示當前顏色。如果目前的顏色符合建議，那麼同一側的顏色也符合建議。如果目前的顏色不符合建議，那麼同一側的任何顏色也都不符合建議。
要嘗試不同顏色，請點擊視覺選擇器，或在色彩選擇器底部選擇色片。