開發人員工具提示：找出並修正低對比文字

Sofia Emelianova
Sofia Emelianova
GitHub

低對比文字是網路上最大的無障礙功能問題。2022 年 2 月，前百萬名熱門首頁中有 83.9% 受到這個問題影響。詳情請參閱 2022 年 WebAIM Million 報告。

Chrome 開發人員工具可快速找出所有對比問題，而且只要按一下按鈕即可修正。

觀看影片，瞭解如何：

  • 在檢查器模式的工具提示中查看對比度，以及顏色挑選器的建議比率值。

    工具提示會提供對比度，其中包含顏色挑選器，可用於測量替代顏色的比例。可使用 AA 和 AAA 評分進行評分。

  • 在顏色挑選器中，選取建議顏色，或在對比度線條下方挑選所需顏色，以符合 WebAIM 指南。

    顏色挑選器的色調預覽畫面提供建議的對比度線條。

  • 你可以在「CSS 總覽」和 (預先發布版)「問題」面板中查看所有對比問題。

    「CSS 總覽」面板和「問題」分頁中列出的對比問題。

  • 只要模擬視覺障礙，就能瞭解網頁在所有使用者眼中的模樣。

    在「算繪」分頁中選取「模糊」效果，並在可視區域中模擬。

如需更多實作學習體驗，請參閱「打造更易讀的網站」教學課程。

詳情請參閱：