讓網站更易於閱讀

索菲亞艾梅利安諾瓦
Sofia Emelianova
GitHub

低對比文字會讓所有使用者更容易閱讀你的網站，對視障使用者而言更為方便。開發人員工具可以自動找出對比度偏低的問題，並提供更好的顏色建議，協助你修正問題。

開發人員工具的用途如下：

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

探索低對比文字

如何找出低對比文字：

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

  2. 請從下列三個面板之一，取得所有對比問題的清單：

CSS 總覽面板中的對比問題

概覽：

  1. 開啟 CSS 總覽。
  2. 擷取總覽畫面。
  3. 開啟「顏色」部分，捲動至「對比問題」，然後點選您遇到的問題 (如果有的話)。

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

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

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

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

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

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

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

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

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

Lighthouse 報表中的對比問題

執行報表的方式如下：

  1. 在開發人員工具中，依序開啟 更多分頁，「更多分頁」 >「Lighthouse」。
  2. 使用下列設定產生 Lighthouse 報表：
    • 模式：導覽 (預設)
    • 類別：無障礙設計
    • 裝置：電腦 提供導覽、無障礙功能和桌面設定的 Lighthouse 報告。
  3. 按一下「Analyze page load」，然後等待 Lighthouse 產生報表。
  4. 向下捲動至「對比」部分，然後在元素清單中按一下效果元素的連結。 Lighthouse 報告的「對比度」部分會列出有對比問題的元素清單。
  5. 按照「修正低對比文字」一節的說明修正問題。

修正低對比文字

如何修正低對比度問題：

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

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

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

    請注意，工具提示中的對比度值旁邊出現 警告。 警告標誌。對比度是指前景 (文字顏色) 與背景顏色之間的亮度差異。

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

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

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

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

    套用的顏色符合規範。

  5. 或者，如要手動選擇顏色，可以在陰影預覽畫面中拖曳圓圈。如要保持在 AA 或 AAA 等級，請分別在頂端或底部行下方選擇顏色。

    只要在底部線條下方選擇色幕，即可保持在 AAAA 等級。

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

儲存變更

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

後續步驟

瞭解詳情：