低對比文字會讓所有使用者更容易閱讀你的網站,對視障使用者而言更為方便。開發人員工具可以自動找出對比度偏低的問題,並提供更好的顏色建議,協助你修正問題。
開發人員工具的用途如下:
- 找出對比問題。使用「CSS 總覽」面板、(預先發布版)「問題」分頁或「Lighthouse」報表,即可查看所有問題的清單。
- 修正對比問題。在檢查器模式中查看工具提示的問題,然後選取「顏色挑選器」建議的顏色,即可修正對比度。
- 模擬視覺障礙。請考量使用者在網站上看到的畫面。
探索低對比文字
如何找出低對比文字:
CSS 總覽面板中的對比問題
概覽:
- 開啟 CSS 總覽。
- 擷取總覽畫面。
- 開啟「顏色」部分,捲動至「對比問題」,然後點選您遇到的問題 (如果有的話)。
在「對比問題」表格中,將遊標懸停在元素上,然後按一下旁邊的連結。
按照「修正低對比文字」一節的說明修正問題。
(預先發布版)「問題」分頁中的對比問題
如要取得問題清單,請按照下列步驟操作:
- 在「Issues」分頁中啟用對比問題回報功能:
- 依序開啟「設定」 >「實驗功能」。
- 在篩選列中搜尋
contrast issue
。 - 勾選「透過問題面板啟用自動對比問題回報功能」。
- 按一下頂端提示中的「重新載入開發人員工具」。
- 開啟「問題」分頁。
展開開發人員工具找到的問題,然後展開元素表格,然後按一下元素旁邊的連結。
按照「修正低對比文字」一節的說明修正問題。
Lighthouse 報表中的對比問題
執行報表的方式如下:
- 在開發人員工具中,依序開啟 「更多分頁」 >「Lighthouse」。
- 使用下列設定產生 Lighthouse 報表:
- 模式:導覽 (預設)
- 類別:無障礙設計
- 裝置:電腦
- 按一下「Analyze page load」,然後等待 Lighthouse 產生報表。
- 向下捲動至「對比」部分,然後在元素清單中按一下效果元素的連結。
- 按照「修正低對比文字」一節的說明修正問題。
修正低對比文字
如何修正低對比度問題:
- 找出對比問題,然後在 CSS 總覽面板、「問題」分頁或 Lighthouse 報表上點選受影響元素的連結。開發人員工具會將您導向「Elements」面板,然後選取對應的元素。
舉例來說,在這個示範頁面中,第一個受影響的元素為
h1.line1
。 按一下開發人員工具右上角的 「檢查」,然後將滑鼠遊標懸停在可視區域中的元素上。開發人員工具會顯示這項元素的工具提示。
請注意,工具提示中的對比度值旁邊出現 警告標誌。對比度是指前景 (文字顏色) 與背景顏色之間的亮度差異。
在元素文字的顏色宣告旁邊開啟「顏色挑選器」,然後在「顏色挑選器」中展開「對比度」部分。
顏色挑選器會顯示對比度,不符合 WebAIM 規範的 AA 或 AAA 等級。
按一下 AAA 等級旁邊的 「使用建議顏色」按鈕。「顏色挑選器」會套用符合對比度規範的文字顏色。
或者,如要手動選擇顏色,可以在陰影預覽畫面中拖曳圓圈。如要保持在 AA 或 AAA 等級,請分別在頂端或底部行下方選擇顏色。
同樣地,修正您在 CSS 總覽面板、問題分頁或 Lighthouse 報表中發現的所有對比問題。
儲存變更
如要儲存您在開發人員工具中所做的變更,請按照下列步驟操作:
- 一次複製所有 CSS 變更,然後貼到程式碼中
- 建議您設定工作區,讓開發人員工具直接將檔案儲存至來源。
後續步驟
瞭解詳情: