色彩對比檢查工具
檢查文字色與背景色的 WCAG 對比度，提供即時預覽與 AA / AAA 通過結果。
選擇顏色
對比度結果
對比度
14.68:1
- AA 一般文字 (4.5:1)✓ 符合
- AA 大字 (3:1)✓ 符合
- AAA 一般文字 (7:1)✓ 符合
- AAA 大字 (4.5:1)✓ 符合
預覽標題
範例文字會顯示所選的前景與背景顏色。
什麼是色彩對比？
色彩對比是文字與背景在亮度上的差異。WCAG 訂定了最低對比，確保低視力用戶仍能閱讀文字。
AA 要求一般文字 4.5:1、大型文字 3:1；AAA 則提高到 7:1 與 4.5:1。
如何檢查色彩對比
- 輸入或選擇文字顏色。
- 輸入或選擇背景顏色。
- 查看即時對比度與 AA / AAA 檢查清單。
- 調整任一顏色直到通過。
對比範例
黑底白字
#000000 配 #ffffff
21:1 — AAA
常見內文
#1f2937 配 #ffffff
14.7:1 — AAA
較弱的組合
#999999 配 #ffffff
2.85:1 — 一般文字不合格
瀏覽器檢查工具 vs 其他做法
| 比較項目 | UrsaKit 對比檢查 | 瀏覽器開發者工具 | 手動計算 |
|---|---|---|---|
| 即時色票 | 支援 | 有限 | 無 |
| AA / AAA 清單 | 支援 | 部分 | 無 |
| 資料是否離開裝置 | 否，在瀏覽器內完成 | 否 | 否 |
常見問題
常見問題
對比檢查工具免費嗎？
免費，且不需要註冊、沒有限制。
內文需要多少對比？
WCAG AA 要求一般文字至少 4.5:1；18pt 或 14pt 粗體的大型文字只需 3:1。
什麼算大型文字？
依 WCAG 定義，18pt（24px）一般字重或 14pt（18.66px）粗體。
通過 AAA 就代表無障礙嗎？
對比只是其中一項，無障礙還包含語意、焦點狀態、鍵盤操作與動態效果。
支援哪些顏色格式？
三位與六位十六進位色碼，可省略開頭的 #。