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

Sofia Emelianova
Sofia Emelianova
GitHub

低對比文字是網路上最常見的無障礙問題。在 2022 年 2 月，前 100 萬個首頁中有 83.9% 有這個問題。如需瞭解詳情，請參閱 WebAIM Million 2022 報告。

您可以透過 Chrome 開發人員工具一覽所有對比問題，並透過按一下按鈕來修正。

觀看影片瞭解如何：

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

    對比度可透過工具提示顯示，並使用顏色挑選器測量替代色彩的對比度。可使用 AA 和 AAA 等級評估比率。

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

    在「顏色挑選器」的色調預覽畫面中，您可以看到建議的對比度線條。

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

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

  • 模擬視覺障礙人士看到的內容，瞭解所有使用者看到的網頁內容。

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

如要進一步瞭解實作內容，請參閱「讓網站更易閱讀」教學課程。

如需更多資訊，請參閱：