前景顏色
背景顏色
預覽
一般文字 — 敏捷的棕色狐狸跳過懶惰的狗。
大型文字（24px 一般）
大型文字（18.67px 粗體）
UI 元件
—
對比度
| 等級 | 一般文字 | 大字體 | UI 元件 |
|---|---|---|---|
| AA | — | — | — |
| AAA | — | — | 不適用 |
WCAG 2.1 — AA 要求一般文字 ≥ 4.5:1，大字體與 UI 元件 ≥ 3:1。
AAA 要求一般文字 ≥ 7:1，大字體 ≥ 4.5:1。
大字體 = 18pt（24px）常規字重或 14pt 粗體（18.67px）。
什麼是對比度檢查器？
檢查色彩對比度是否符合 WCAG AA 與 AAA 無障礙規範。立即驗證一般文字、大型文字及 UI 元件的前景與背景顏色組合。
如何使用對比度檢查器
- 輸入或選擇前景文字顏色。
- 輸入或選擇其背後的背景顏色。
- 即時檢視對比度及 WCAG 通過或未通過結果。
- 調整任一顏色，直到組合符合你的無障礙目標。
了解色彩對比 ▾
範例
輸入
檢查白色背景上的中灰色文字：
輸出
結果：大型文字通過 AA（≥ 3:1），但一般文字未通過 AA（需 4.5:1）。請將灰色稍微調深，以通過所有 AA 等級。
常見使用情境
- 發布 UI 更新前，請檢查按鈕與連結的對比度
- 在品牌系統與樣式指南中驗證文字顏色
- 檢視行銷圖像的可讀性
- 快速測試淺底深色與深底淺色的組合
常見問題
AA 與 AAA 對比等級有什麼差異？
WCAG AA 要求一般文字對比度達 4.5:1、大型文字達 3:1——這是標準法定要求。AAA 要求一般文字達 7:1、大型文字達 4.5:1，為重度低視力使用者提供更佳無障礙體驗。
這會檢查非文字對比度（圖示、邊框）嗎？
會——WCAG 1.4.11（非文字對比度）要求 UI 元件與圖形元素達 3:1。表格中的 AA UI Components 結果涵蓋此要求。
我的顏色通過 AA 但未通過 AAA——我需要修正嗎？
並非所有內容都必須符合 AAA。WCAG AA 是大多數司法管轄區的標準法定要求。情況允許時可朝 AAA 邁進，但符合 AA 即可滿足法定合規要求。
什麼算大型文字？
WCAG 將大型文字定義為：一般字重 18pt（24px）以上，或粗體 14pt（約 18.67px）以上。大型文字的對比度要求較低（AA 為 3:1），因為本來就較容易閱讀。