對比度檢查（WCAG標準） 使用指南

<p><strong>輸入：</strong>前景 #767676、背景 #FFFFFF。</p><p><strong>處理：</strong>按 WCAG 相對亮度算對比度。</p><p><strong>輸出：</st…

核心功能

• 按 WCAG 2.1 計算前景色與背景色的對比度比率
• 同時判定 AA / AAA 在正常文字與大號文字下的四檔合規結果
• 支援取色器與手輸 HEX，並可一鍵交換前景與背景
• 純本地計算，不上傳任何輸入

適用場景

• 核查兩色對比度是否達 WCAG。
• 校驗輸入數值是否在合理範圍。
• 做提交前的快速自檢。

使用步驟

1. 輸入前景色（文字色）與背景色，可用取色器或直接填 HEX
2. 讀取對比度比值（如 14.68:1）
3. 核對 AA（正文 ≥4.5:1）與 AAA（正文 ≥7:1）是否通過
4. 若未達標，調整明度後重新取值直到通過
5. 如需反色方案，點選交換按鈕再核一次

實用技巧

• 大號文字（≥18px 或 ≥14px 粗體）閾值放寬到 3:1（AA）與 4.5:1（AAA），不要一律按 4.5 卡
• 對比度只算相對亮度，相同的比值不代表觀感一致，紅色與藍色的可讀性差異仍需實測
• 半透明文字需先與底色合成實色再計算，直接拿 RGBA 值算會偏高
• 裝飾性文字、停用態與 Logo 不受 WCAG 對比度要求約束

常見問題

AA 和 AAA 怎麼選？

普通文本 AA 需 ≥4.5:1、AAA ≥7:1；大文本閾值更低。結果以瀏覽器即時計算為準，純前端本地處理、資料不上傳；生成的樣式與程式碼僅作快速產出參考，正式專案請以設計系統、規範與瀏覽器實測為準。

生成的程式碼/圖片能直接用嗎？

可直接複製使用，建議粘到專案後在瀏覽器實測微調；本工具只生成不託管。

會儲存或上傳我的內容嗎？

結果以瀏覽器即時計算為準，純前端本地處理、資料不上傳；生成的樣式與程式碼僅作快速產出參考，正式專案請以設計系統、規範與瀏覽器實測為準。