讓網站更易於閱讀

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

找出低對比文字

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

  1. 在網頁上開啟開發人員工具。在本教學課程中，您可以使用這個示範頁面。

  2. 使用下列任一面板，取得所有對比問題的清單：

CSS 總覽面板中的對比問題

如要瞭解概況，請按照下列步驟操作：

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

  4. 在「對比度問題」表格中，將滑鼠游標懸停在元素上，然後點選旁邊的連結。

    CSS 總覽中的對比問題清單。

  5. 請按照「修正低對比文字」一節中所述，修正相關問題。

(預先發布版)「問題」分頁中的對比問題

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

  1. 在「問題」分頁中啟用對比問題回報功能：
    1. 依序開啟「設定」 >「實驗功能」。
    2. 在篩選列中搜尋 contrast issue。
    3. 勾選「透過『Issues』面板啟用自動對比度問題回報功能」。 啟用對比問題回報功能。
    4. 按一下頂端提示中的「Reload DevTools」。
  2. 開啟「問題」分頁。

  3. 展開 DevTools 找到的對比度問題，然後展開元素表格，並按一下元素旁邊的連結。

    「Issues」分頁中，含有對比問題的元素表格。

  4. 請按照「修正低對比文字」一節中所述，修正相關問題。

Lighthouse 報表中的對比問題

執行報表的方式如下：

  1. 在開發人員工具中，依序開啟 更多分頁。「更多分頁」 >「Lighthouse」。
  2. 使用下列設定產生 Lighthouse 報表：
    • 模式：導覽 (預設)
    • 類別：無障礙
    • 裝置：電腦 Lighthouse 報表，包含導覽、無障礙和電腦設定。
  3. 按一下「分析網頁載入時間」，然後等待 Lighthouse 產生報表。
  4. 向下捲動至「Contrast」部分，然後在元素清單中點選連結，前往受影響的元素。 Lighthouse 報表的「對比」部分，列出有對比問題的元素。
  5. 請按照「修正低對比文字」一節中所述，修正相關問題。

修正對比度偏低的文字

如何修正低對比問題：

  1. 找出對比度問題，然後點選 CSS 總覽面板、問題分頁或 Lighthouse 報表中的受影響元素連結。開發人員工具會帶您前往「Elements」面板，並選取相應的元素。在「元素」面板中選取有對比度問題的元素。 舉例來說，在這個示範頁面中，第一個受影響的元素是 h1.line1。

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

    工具提示會在對比值旁顯示警告符號。

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

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

    顏色挑選器的「對比度」部分。

    色彩挑選器會指出對比度未達 WebAIM 規範的 AA 或 AAA 級別。

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

    套用的顏色符合規範。

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

    選擇低於底線的色彩濃淡度，以維持 AAA 等級。

  6. 同樣地，請使用CSS 總覽面板、問題分頁或Lighthouse 報表，修正所有對比度問題。

儲存變更

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

後續步驟

瞭解詳情：