🎨 Contrast Ratio Checker

Verify the WCAG contrast ratio between text and background in real time to keep copy readable for designers and developers.

📐 計算公式 / 原理

CR = (Llight + 0.05) / (Ldark + 0.05)，L = Σ(wᵢ·Cᵢ)，w = [0.2126, 0.7152, 0.0722]

依據 WCAG 2.1 計算前景色與背景色的對比度比值：相對亮度按 sRGB gamma 校正後加權求得；用於保證正文、按鈕與圖示在網頁上的可讀性。

前景色（文字）

背景色

🎨 常用配色

21.00 : 1

無障礙評級

1:1 3:1 4.5:1 7:1 21:1

✅

AA 正常文字

≥ 4.5 : 1

通過

✅

AA 大文字

≥ 3 : 1

通過

✅

AAA 正常文字

≥ 7 : 1

通過

✅

AAA 大文字

≥ 4.5 : 1

通過

這是一段正常大小的示例文字，用於展示當前前景色在背景色上的可讀性效果。The quick brown fox jumps over the lazy dog.

大文字示例 24px Bold

小號輔助文字 12px — 小字在低對比度下更容易難以辨認，需要更高的對比度來保證可讀性。

📚 深度解析：對比度檢查器

💡 常見使用場景

複核正文可讀性。

核查圖示與底色。

無障礙走查。

灰字白底核查

輸入：前景 #6B7280、背景 #FFFFFF。處理：算對比度。輸出：約 4.5:1，普通文本 AA 臨界通過。

❓ 常見問題（FAQ）

臨界 4.5 安全嗎？

剛好達標；低視力使用者仍吃力，建議略高於閾值。結果以瀏覽器即時計算為準，純前端本地處理、資料不上傳；生成的樣式與程式碼僅作快速產出參考，正式專案請以設計系統、規範與瀏覽器實測為準。

兩種色對比度不夠會提示嗎？

會按 WCAG 算出對比度值與等級，未達標會標紅提醒，便於及時換色或調深。

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

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

🎨 Contrast Ratio Checker

🎨 常用配色

📌 WCAG 對比度標準

🎯 使用場景

📚 深度解析：對比度檢查器

💡 常見使用場景

❓ 常見問題（FAQ）

對比度檢查器

🎨 Contrast Ratio Checker

🎨 常用配色

🔗 相關工具

📌 WCAG 對比度標準

🎯 使用場景

📚 深度解析：對比度檢查器

💡 常見使用場景

❓ 常見問題（FAQ）