🎨 WCAG Contrast Check

Enter foreground and background colours to compute the WCAG 2.1 contrast ratio and see whether text passes the AA and AAA levels.

📐 計算公式 / 原理

CR = (L₁ + 0.05) / (L₂ + 0.05)，L = 0.2126R + 0.7152G + 0.0722B（sRGB 歸一化併線性化後）

依據 WCAG 2.1：先將 sRGB 各通道歸一化並按 gamma 線性化，再加權求相對亮度 L，兩色亮度各加 0.05 後取比值。CR ≥ 4.5 為 AA（正文）、≥ 7 為 AAA；大字號閾值分別為 3 與 4.5。

前景色（文字色）

背景色

大號文字示例 (24px Bold)

中等文字示例 (18px Regular)

小號文字示例 (14px Regular) — The quick brown fox jumps over the lazy dog.

📚 深度解析：對比度檢查（WCAG標準）

校驗 #FFF 與 #767676 對比度

輸入：前景 #767676、背景 #FFFFFF。處理：按 WCAG 相對亮度算對比度。輸出：對比度約 4.54:1，達 AA 普通文本。

AA 和 AAA 怎麼選？: 普通文本 AA 需 ≥4.5:1、AAA ≥7:1；大文本閾值更低。結果以瀏覽器即時計算為準，純前端本地處理、資料不上傳；生成的樣式與程式碼僅作快速產出參考，正式專案請以設計系統、規範與瀏覽器實測為準。
生成的程式碼/圖片能直接用嗎？: 可直接複製使用，建議粘到專案後在瀏覽器實測微調；本工具只生成不託管。
會儲存或上傳我的內容嗎？: 結果以瀏覽器即時計算為準，純前端本地處理、資料不上傳；生成的樣式與程式碼僅作快速產出參考，正式專案請以設計系統、規範與瀏覽器實測為準。

⚠️ 使用說明與注意事項