WCAG 色彩對比檢查器
輸入文字和背景顏色，即時取得對比度分析與 WCAG 2.x 合規建議。
支援 HEX 顏色輸入，提供 AA / AAA 合規檢測、即時預覽與顏色改善建議。
預覽效果
普通文字 — 這是一段普通大小的樣本文字（16px）
大型文字 — 大標題樣本（24px）
粗體大文字 — 副標題樣本（18.67px bold）
對比度比值
—
:1
—
1:1
3:1
4.5:1
7:1
21:1
WCAG 2.x 合規性
| 合規等級 | 普通文字 | 大型文字 |
|---|---|---|
|
WCAG AA
普通 4.5:1 ／ 大型 3:1
|
— | — |
|
WCAG AAA
普通 7:1 ／ 大型 4.5:1
|
— | — |
普通文字：< 18pt 或 < 14pt 粗體（約 24px 或 18.67px bold）
大型文字：≥ 18pt 或 ≥ 14pt 粗體（約 24px 或 18.67px bold）
顏色改善建議
設計小提示
對比不足會讓低視力使用者難以閱讀，也影響螢幕在強光下的可讀性。建議正文對比度不低於 4.5:1。
大型文字（≥ 18pt 或粗體 ≥ 14pt）門檻較低（3:1），因為較大字體本身就更易辨認。
WCAG AAA 是最嚴格的規範，建議在重要說明文字與正文段落上努力達到 7:1 以上。
- 在「文字顏色」輸入框貼上文字色碼（HEX 格式，例如 #333333）。
- 在「背景顏色」輸入框貼上背景色碼（例如 #FFFFFF）。
- 對比度比值與 WCAG 2.x AA／AAA 合規性結果即時顯示在表格中。
- 查看「顏色改善建議」區塊，取得可達到各合規等級的替代色碼，點擊即可套用。
提示：網頁正文文字的對比度建議不低於 4.5:1（WCAG AA）；關鍵內容建議達到 7:1（WCAG AAA）。
何時會用到？
- 設計網站、簡報、後台介面或 App 畫面時，想快速確認文字與背景是否夠清楚。
- 品牌配色、按鈕色或提示訊息色已經定好，但不確定是否符合無障礙標準時。
- 準備交付設計稿或前端切版前，想先檢查重要文字是否容易閱讀時。
為什麼常聽到 4.5:1 和 7:1？
4.5:1 是一般文字常見的 WCAG AA 門檻，7:1 則是更嚴格的 AAA 目標。這兩個數值代表前景與背景亮度差距是否足夠，數字越高，通常越容易閱讀。
大字和小字的標準為什麼不同？
因為字體越大、越粗，本來就比較容易辨識，所以大型文字只要達到較低的對比門檻也可能合格。但如果內容重要，維持更高對比仍然比較穩妥。
通過 AA 就一定夠用了嗎？
大多數正式網站或產品介面先達到 AA 已經很實用，但如果頁面資訊密集、使用情境複雜，或服務對象包含更多低視力使用者，追求 AAA 會更保險。
這個工具提供的建議色可以直接拿去用嗎？
可以把它當成快速修正方向。建議你仍要回到真實介面檢查整體視覺風格、品牌一致性，以及 hover、disabled、dark mode 等不同狀態是否也都清楚可讀。
只看數值就能保證可讀性嗎？
不能完全保證。對比度是重要基準，但字體粗細、字級、行距、背景紋理與螢幕環境都會影響閱讀感受，所以最好搭配實際畫面一起檢查。