色彩對比度檢查器 (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 要求。
簡報與文件
驗證投影片和文件中的文字顏色,確保所有觀眾都能清楚看見內容。
Send Feedback
Please let us know your thoughts to help us improve the tool.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.