讓網站更易於閱讀

Sofia Emelianova
Sofia Emelianova
GitHub

對比度偏低的文字，會使得所有使用者難以閱讀您的網站，更適合視覺障礙的使用者。開發人員工具可自動找出對比度不足的問題，並提供品質更佳的顏色，協助你進行修正。

開發人員工具的用途：

  • 找出對比問題。請使用「CSS 總覽」面板、(預先發布版)「問題」分頁或 Lighthouse 報表，取得所有問題的清單。
  • 修正對比問題。在檢查器模式中查看工具提示的問題，然後選取顏色挑選器建議的顏色來修正對比度。
  • 模擬視覺障礙。測試網站向使用者顯示的方式，

探索低對比文字

如何查看低對比文字：

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

  2. 請透過以下三個面板之一取得所有對比問題清單：

CSS 總覽面板中的對比問題

若要大致瞭解情況，請按照下列步驟操作：

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

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

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

  5. 按照「修正對比度不足的文字」一節的說明修正問題。

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

如何取得問題清單：

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

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

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

  4. 按照「修正對比度不足的文字」一節的說明修正問題。

Lighthouse 報告中的對比問題

執行報表的方式如下：

  1. 在開發人員工具中，依序開啟 更多分頁。「更多分頁」 >「Lighthouse」。
  2. 使用以下設定產生 Lighthouse 報表：
    • 模式：導航 (預設)
    • 類別：無障礙設定
    • 裝置：電腦 包含導覽、無障礙和桌面設定的 Lighthouse 報告。
  3. 按一下「分析網頁載入作業」，然後等待 Lighthouse 產生報表。
  4. 向下捲動至「對比」部分，然後在元素清單中按一下影響元素的連結。 Lighthouse 報告的「對比」部分，列出有對比問題的元素。
  5. 按照「修正對比度不足的文字」一節的說明修正問題。

修正對比度偏低的文字

如何修正對比度不足的問題：

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

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

    工具提示的對比值旁邊會顯示警告標誌。

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

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

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

    顏色挑選工具指出對比度不符合 WebAIM 規範的 AA 或 AAA 等級。

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

    套用的顏色符合規範。

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

    挑選底線下方的色條，維持在 AAA 等級。

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

儲存變更

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

後續步驟

瞭解詳情：