色彩對比度檢查器 (WCAG 2.1)
檢查文字與背景顏色是否符合 WCAG 對比度標準。
支援自動建議合格顏色並可下載證明圖片。
🔤 文字顏色
🎨 背景顏色
這是一般文字 (16px) 的預覽效果
這是粗體文字 (16px 粗體) 的預覽效果
這是大型文字 (24px) 的預覽效果
這是大型粗體文字 (18px 粗體) 的預覽效果
對比度
12.63 : 1
AA 一般文字
≥ 4.5:1
AA 大型文字
≥ 3:1
AAA 一般文字
≥ 7:1
AAA 大型文字
≥ 4.5:1
💡 建議的合格顏色（符合 AA 標準）：
調整文字顏色：
調整背景顏色：
🏆 WCAG AA 標準符合證明
* 點擊「分享至 𝕏」也會同時自動下載證明圖片。
📋 CSS 程式碼
關於本工具
這是一個免費的線上工具，能即時檢查您的網站或應用程式配色是否符合 WCAG 2.1 對比度標準。過低的對比度會讓視力不佳的使用者難以閱讀文字。
當您的配色未能通過標準時，工具會自動建議最接近且能通過標準的顏色，幫助您在不大幅改變設計的情況下提升無障礙體驗。
一旦您的配色通過了 AA 標準，您還可以下載一份正式的 WCAG AA 標準符合證明圖片來與團隊或客戶分享。
使用方法
輸入顏色
點擊色彩挑選器，或直接為文字與背景輸入 HEX 色碼 / RGB 數值。
檢查結果
對比度數據與 WCAG AA/AAA 通過狀態會即時更新，並提供預覽效果。
下載證明
如果您通過了 AA 標準門檻，即可下載或分享官方證書圖片。
詞彙表
- 對比度 (Contrast Ratio)
- 表示前景與背景顏色之間亮度差異的數值。範圍從 1:1（完全相同）到 21:1（白底黑字）。
- WCAG (網頁內容無障礙指南)
- 由 W3C 制定的國際標準，定義如何讓網頁內容更具無障礙性。世界各國的政府常依此標準制定相關規範。
- AA 標準
- 對比度的中階目標。一般文字至少需要 4.5:1，大型文字 (18pt 以上) 則需 3:1。這是大多數企業網站的法定基本門檻。
- AAA 標準
- 最嚴格的 WCAG 標準，針對特殊的無障礙需求。一般文字需 7:1，大型文字需 4.5:1。這會大幅限制設計上的顏色選擇。
- 相對亮度 (Relative Luminance)
- 色彩空間中任何一點的相對明暗程度。它利用考量人類視覺感知的數學 Gamma 計算，將顏色評分在 0 到 1 之間。
- 無障礙性 (Accessibility, a11y)
- 為身心障礙人士（包含視力障礙、認知限制以及年老退化等）打造易於使用的環境的實踐方式。
常見問題
- Q.網頁文字建議的對比度是多少？
- 根據 WCAG AA 標準，一般文字至少需要 4.5:1 的對比度。較大的文字（通常是 18pt 或 14pt 粗體）則只需 3:1。
- Q.這個工具能模擬色盲嗎？
- 不，此版本專門以數學公式來驗證對比度。請搭配使用專門的色盲模擬軟體來進行全面的無障礙測試。
- Q.這個演算法是如何計算對比度的？
- 它完全採用 WCAG 建議的公式，透過計算兩種顏色的相對亮度 (Relative Luminance)，並使用 (L1 + 0.05) / (L2 + 0.05) 的比例來進行比較。
- Q.我應該以符合 AA 還是 AAA 標準為目標？
- 對大多數商業網站而言，AA 級別是全球業界標準與常見的法規要求。AAA 級別非常嚴格，通常只要求於特定的政府機關或專為身心障礙人士設計的平台。
- Q.我的品牌顏色資料會傳送到雲端伺服器嗎？
- 絕對不會。所有的色彩分析與證明圖片生成，都完全在您裝置的瀏覽器記憶體中本地進行，確保企業機密與隱私安全。
- Q.除了 HEX 色碼，我還能用其他格式輸入顏色嗎？
- 可以的，除了 HEX 格式（如 #ffffff）外，您也可以使用色彩挑選器視覺化選擇顏色，或直接輸入 RGB 數值。
- Q.生成的證明圖片有法律約束力嗎？
- 它是基於 W3C 公式對您的配色組合的可靠數學證明，但無法取代由第三方專家進行的全面無障礙性稽核。
使用場景
網頁設計驗證
在設計階段驗證對比度，確保登陸頁面與企業網站符合 WCAG 規範。
行動 App UI 審查
檢查按鈕文字和標籤，確保視力不佳的使用者也能輕鬆閱讀。
無障礙法規遵循
稽核網站的對比度問題，以符合 ADA、EN 301 549 或全球的 WCAG 要求。
簡報與文件
驗證投影片和文件中的文字顏色，確保所有觀眾都能清楚看見內容。
發送反饋/請求
發送反饋
請告訴我們您的想法，以幫助我們改進工具。
這不是工具的輸入欄位
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.