讓網站更易於閱讀

Sofia Emelianova

對比度低的文字會讓所有使用者難以閱讀網站內容，對視力障礙者來說更是如此。開發人員工具可自動找出對比度過低的問題，並建議更合適的顏色，協助您修正問題。

使用開發人員工具執行下列操作：

• 探索對比問題。使用「CSS 總覽」面板、(預覽版)「問題」分頁或 Lighthouse 報告，取得所有問題的清單。
• 修正對比問題。在檢查器模式中，透過工具提示查看問題，然後選取顏色挑選器建議的顏色，修正對比度。
• 模擬視覺障礙人士看到的內容。 從使用者的角度瀏覽網站。

瞭解低對比文字

如要找出對比度不足的文字，請按照下列步驟操作：

1. 在網頁上開啟開發人員工具。

2. 使用下列任一面板，列出所有對比問題：

   • CSS 總覽
   • (預覽版) 問題
   • 燈塔

如要進行實驗，請開啟我們的 CodePen。

CSS 總覽面板中的對比問題

如要查看概覽：

1. 開啟 CSS 總覽。
2. 擷取總覽。
3. 開啟「顏色」部分，前往「對比問題」，然後按一下問題 (如有)。

4. 在「對比問題」表格中，將游標懸停在元素上，然後按一下旁邊的連結。

   

5. 請按照「修正低對比文字」一節中的說明修正問題。

(預覽版)「問題」分頁中的對比問題

如要取得問題清單，請按照下列步驟操作：

1. 在「問題」分頁中啟用對比問題報表：
   1. 依序開啟「設定」 >「實驗功能」。
   2. 在篩選列中搜尋 contrast issue。
   3. 選取「透過『問題』面板啟用自動對比問題回報功能」。
   4. 按一下頂端提示中的「重新載入開發人員工具」。
2. 開啟「問題」分頁。

3. 展開開發人員工具找到的對比問題，然後展開元素表格，並按一下元素旁邊的連結。

   

4. 請按照「修正低對比文字」一節中的說明修正問題。

Lighthouse 報表中的對比問題

執行報表的方式如下：

1. 在開發人員工具中，依序開啟「更多分頁」 >「Lighthouse」。

2. 使用下列設定產生 Lighthouse 報表：

   • 模式：導覽 (預設)
   • 類別：無障礙
   • 裝置：電腦

   

3. 按一下「分析載入網頁」，然後等待 Lighthouse 產生報表。

4. 前往「對比度」部分。在元素清單中，按一下受影響元素的連結。

   

5. 請按照「修正低對比文字」一節中的說明修正問題。

修正低對比文字

如要修正低對比問題，請按照下列步驟操作：

1. 找出對比度問題，然後點選「CSS 總覽」面板、「問題」分頁或 Lighthouse 報表中受影響元素的連結。DevTools 會將您帶往「元素」面板，並選取對應的元素。

   

   舉例來說，在無法存取的 CodePen 試用版中，第一個受影響的元素是 h1.line1。

2. 按一下開發人員工具右上角的「檢查」，然後將滑鼠游標懸停在檢視區塊中的元素上。開發人員工具會顯示這個元素的工具提示。

   

   請注意，工具提示中對比度值旁邊的 警告符號。對比度比率是用來測量前景 (文字顏色) 和背景顏色之間的亮度差異。

3. 開啟元素文字顏色宣告旁的顏色挑選器，然後在顏色挑選器中展開「對比度」部分。

   

   顏色挑選器會顯示對比度不符合 WebAIM 規範的 AA 或 AAA 級別。

4. 按一下 AAA 級別旁的「使用建議顏色」 按鈕。「顏色挑選器」會套用符合對比度規範的文字顏色。

   

5. 如要手動挑選顏色，請拖曳色調預覽畫面中的圓圈。如要維持在 AA 或 AAA 級別，請分別選取頂端或底線下方的顏色。

   

6. 同樣地，請修正您在「CSS 總覽」面板、「問題」分頁或 Lighthouse 報表中發現的所有對比問題。

儲存變更

如要儲存您在開發人員工具中所做的變更，請按照下列步驟操作：

• 一次複製所有 CSS 變更內容，然後貼到程式碼中
• 設定工作區，讓開發人員工具直接將檔案儲存到來源。

後續步驟

瞭解詳情：

• 瞭解一般無障礙功能
• 顏色和對比無障礙功能