什麼是高對比模式？
測試您的網頁內容在不同高對比度設定下的顯示效果。貼上 HTML 或 URL 截圖，預覽符合 WCAG 標準的對比度模式，包括 Windows 高對比度、反色以及自訂對比度主題。
可以選預設主題(Windows 高對比、反相、黃底黑字),也能自訂前景與背景顏色。對比度即時顯示,並告知這組配色在 WCAG 各等級(AA、AAA、正文、大字)是否通過。預覽的 HTML 可連同行內樣式一併匯出。
使用方法
- 步驟一 — 將 HTML 或純文字貼入編輯區域。
- 步驟二 — 從預設中選擇對比度模式：Windows 高對比度（黑/白）、反色、黑底黃字或自訂顏色。
- 步驟三 — 查看即時預覽以檢查可讀性，使用對比度比率檢測器驗證文字元素是否符合 WCAG AA/AAA 標準。
何時使用
- 行銷頁面上線前,先跑一輪 WCAG AA 對比度檢查。
- 檢查焦點指示與純圖示按鈕在 Windows 高對比下是否仍可見。
- 挑一個能與品牌背景達到 4.5:1 對比度的正文顏色。
結果
一位開發者將導覽列 HTML 貼入後，切換至 Windows 高對比度模式，發現純圖示按鈕在黑色背景下完全不可見，於是為其加入了可見的文字標籤。
常見問題
- WCAG AA 需要多少對比度?
- 正文 4.5:1,大字(18pt 一般或 14pt 粗體以上)3:1。AAA 提高為 7:1 與 4.5:1。檢測器會標示每組搭配通過或未通過的等級。
- 為什麼圖示按鈕在 Windows 高對比下會消失?
- Windows 會以系統色彩取代原本顏色,並忽略背景圖片。用 background-image 或只填色的 SVG 做的圖示會直接看不見。請改用內嵌 SVG 並把 stroke 設為 currentColor,或加上可見的文字標籤。
- 黃底黑字真的算無障礙主題嗎?
- 是。它是最早的 Windows 高對比主題之一,至今仍是許多弱視使用者的首選——因為黃色即使在黃斑部病變者眼中也很容易辨識。部分使用者覺得比純白底黑字更舒服。
- 通過 WCAG AA 是否就代表頁面無障礙?
- 對比度只是 WCAG 的一部分。還需要鍵盤可操作、語意化 HTML、alt 文字、表單標籤、焦點指示,以及對「減少動態效果」的尊重。本工具只負責檢查顏色這項。
- 為什麼我們的品牌橘色在白底上會未通過?
- 高飽和的中間色(橘、黃、萊姆綠)在白底上通常低於 3:1,因為亮度過高。正文請把橘色加深,或只用在背景、大標上,只要達到 3:1 就足夠。