使用 檢查 工具在預設狀態下檢查文字顏色對比度。 Inspect 工具在網頁上的資訊覆蓋層有一個無障礙區塊，包含對比度資訊。
對於帶有文字的元素， Inspect 工具的資訊覆蓋層會顯示以下內容：
- 文字與背景色的對比度。
- 綠色勾勾圖示代表對比度足夠的元素。
- 黃色警示圖示表示對比度不足的元素。
在某些情況下，將瀏覽器設定為淺色主題或暗色主題會影響對比度。
舉例來說，在無障礙測試的示範網頁上，側邊欄導覽選單的藍色連結對比度足夠，但捐贈狀態區塊的綠色狗狗連結對比度不足。 請使用 檢查 工具檢視這些元素，如下：
請在新視窗或分頁中開啟 無障礙測試示範網頁 。
在網頁任意位置右鍵點擊，然後選擇 檢查。 或者，按 F12。 DevTools 會在網頁旁邊開啟。
點擊 DevTools 左上角的 Inspect (
) 按鈕，讓圖示 (藍色) 被高亮亮出。在渲染的網頁中，將滑鼠移到側邊欄導覽選單的藍色 Cats 連結上。 檢查 工具的 資訊覆蓋層會顯示出來。 在資訊覆蓋層的 無障礙 區塊中，對 比 列出現綠色勾勾，表示此元素在文字顏色與背景色的對比度足夠：
在渲染後的網頁中，在 捐贈狀態 區塊，將滑鼠移到 「狗」 連結上。 檢查工具的資訊覆蓋層在對比列顯示橘色驚嘆號，表示此元素在文字與背景色的對比度不足：
在 DevTools 中檢查文字與顏色對比的不同選項
請使用以下 DevTools 功能來檢查文字顏色對比：
使用 檢查 工具 (作為網頁) 的資訊覆蓋層，檢查單一頁面元素是否有足夠的文字色彩對比度。 Inspect 工具的資訊覆蓋層包含一個可及性區塊，其中包含對比度資訊列。 檢查工具僅顯示當前狀態的文字對比資訊。 此方法已在本文中說明。
當文字與背景色對比不足時， 問題工具會 自動回報整個網頁的色彩對比問題。 此方法在 「驗證文字顏色有足夠的對比度」中有所描述。
模擬一個非預設狀態，例如該
hover狀態。 要做到這點，請在樣式窗格中點擊 ：hov () 按鈕切換元素狀態，該按鈕會顯示力場元素狀態的勾選框區塊。 此功能詳見 「驗證所有元素狀態的可及性」。