對比度檢測
依 WCAG 標準計算前景與背景的對比率，並給出 AA / AAA 可讀性評級。
⇄
大號字標題 Sample Heading
內文範例：The quick brown fox jumps over the lazy dog. 中文排版可讀性測試。
—
對比率
使用說明
📖 工具介紹
對比度檢測是一款面向無障礙設計與前端開發的線上可讀性校驗工具，嚴格依 W3C 網頁內容無障礙指引 WCAG 2.1 的相對亮度公式，計算任意前景色與背景色組合之間的對比率，並據此判定是否達到 AA 與 AAA 兩個等級。很多配色看著協調，但文字一放到淺灰背景上就發虛，根源就是對比率不足。本工具先把 sRGB 各通道做伽馬線性化，再依 L=0.2126R+0.7152G+0.0722B 加權得到相對亮度，最後用 (L1+0.05)/(L2+0.05) 算出對比率。頁面中段是一塊即時預覽區，用您選定的顏色直接渲染標題與內文，所見即所得；下方大字顯示對比率數值，再往下是四張評級卡片，分別對應普通文字 AA/AAA 與大號字 AA/AAA，達標顯示綠色通過、未達標顯示紅色未過。中間的 ⇄ 按鈕可一鍵交換前景與背景，方便快速試色。結果可一鍵複製，全程離線執行。
✨ 功能特點
- 標準公式：採用 WCAG 相對亮度與對比率公式，結果與權威工具一致
- 四檔評級：普通文字 AA/AAA、大號字 AA/AAA 一次給出，一目瞭然
- 即時預覽：標題與內文依真實配色渲染，所見即所得
- 一鍵交換：⇄ 按鈕快速互換前景背景，提高試色效率
- 對比率直讀：大字顯示 X.XX : 1，達標線標註在每張卡片上
- 結果複製：一行文字記錄前景、背景與對比率，便於貼進設計說明
📝 使用方式
- 用取色器或輸入 HEX 設定前景色（文字色）
- 用取色器或輸入 HEX 設定背景色
- 檢視中段預覽區，感受真實配色下的文字效果
- 閱讀對比率數值與四張評級卡片，判斷是否達標
- 需要記錄時點「複製結果」，或點 ⇄ 交換兩色繼續測試
⚠️ 注意事項
- 評級門檻：普通文字 AA≥4.5、AAA≥7；大號字 AA≥3、AAA≥4.5
- 大號字定義：通常指 18pt 以上或 14pt 以上粗體文字，具體以規範為準
- HEX 格式：僅接受 #RRGGBB，非法輸入會提示而不計算
- 計算精度：對比率保留兩位小數，評級依門檻嚴格判定
- 本機運算：所有亮度與對比率計算皆在瀏覽器完成，不上傳任何資料