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

蘇菲亞.艾梅里安諾瓦 (Sofia Emelianova)
Sofia Emelianova
GitHub

低對比文字是網頁最主要的無障礙功能問題。2022 年 2 月，有 83.9% 的熱門首頁出現這個問題。詳情請查看 2022 年 WebAIM Million 報告。

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

請觀看這部影片，瞭解如何：

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

    工具提示提供對比度，並利用顏色挑選器測量替代顏色的比例。提供 AA 及 AAA 評分評估功能。

  • 你可以使用「顏色挑選器」中的建議顏色，或在對比度線下方挑選顏色，以符合 WebAIM 規範。

    顏色挑選器的陰影預覽畫面會顯示建議的對比度。

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

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

  • 模擬視覺障礙，瞭解您網頁針對所有使用者呈現的效果。

    在「轉譯」分頁中選取的模糊處理視覺在可視區域中模擬。

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

詳情請參閱：