digtools
contrast checker,

色彩對比度檢查器 (WCAG 2.1)

檢查文字與背景顏色是否符合 WCAG 對比度標準。支援自動建議合格顏色並可下載證明圖片。

WCAG 2.1 AA/AAA
完全符合國際標準
🎯
自動建議顏色
提案最接近的合格色
🏆
下載證明
儲存通過證明的圖片

🔤 文字顏色

🎨 背景顏色

這是一般文字 (16px) 的預覽效果

這是粗體文字 (16px 粗體) 的預覽效果

這是大型文字 (24px) 的預覽效果

這是大型粗體文字 (18px 粗體) 的預覽效果

對比度

12.63 : 1

AA 通過
AA
4.5
AAA
7.0

AA 一般文字

≥ 4.5:1

AA 大型文字

≥ 3:1

AAA 一般文字

≥ 7:1

AAA 大型文字

≥ 4.5:1

📋 CSS 程式碼

 
about,

關於本工具

這是一個免費的線上工具,能即時檢查您的網站或應用程式配色是否符合 WCAG 2.1 對比度標準。過低的對比度會讓視力不佳的使用者難以閱讀文字。

當您的配色未能通過標準時,工具會自動建議最接近且能通過標準的顏色,幫助您在不大幅改變設計的情況下提升無障礙體驗。

一旦您的配色通過了 AA 標準,您還可以下載一份正式的 WCAG AA 標準符合證明圖片來與團隊或客戶分享。

how to,

使用方法

STEP 1

輸入顏色

點擊色彩挑選器,或直接為文字與背景輸入 HEX 色碼 / RGB 數值。

STEP 2

檢查結果

對比度數據與 WCAG AA/AAA 通過狀態會即時更新,並提供預覽效果。

STEP 3

下載證明

如果您通過了 AA 標準門檻,即可下載或分享官方證書圖片。

glossary,

詞彙表

對比度 (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)
為身心障礙人士(包含視力障礙、認知限制以及年老退化等)打造易於使用的環境的實踐方式。
faq,

常見問題

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 公式對您的配色組合的可靠數學證明,但無法取代由第三方專家進行的全面無障礙性稽核。
use cases,

使用場景

🎨

網頁設計驗證

在設計階段驗證對比度,確保登陸頁面與企業網站符合 WCAG 規範。

📱

行動 App UI 審查

檢查按鈕文字和標籤,確保視力不佳的使用者也能輕鬆閱讀。

🏢

無障礙法規遵循

稽核網站的對比度問題,以符合 ADA、EN 301 549 或全球的 WCAG 要求。

📄

簡報與文件

驗證投影片和文件中的文字顏色,確保所有觀眾都能清楚看見內容。

Send Feedback

Please let us know your thoughts to help us improve the tool.

免責聲明

本網站提供的所有工具均可免費使用,但請用戶自行承擔使用風險。本網站對各種工具的計算結果、轉換結果及生成數據的準確性、完整性和安全性不作任何保證。因使用本工具而產生的任何損害或糾紛,運營者概不負責,敬請見諒。此外,檔案處理與計算等操作原則上均在您的瀏覽器內完成,您輸入的數據不會傳送或保存在本網站的伺服器上。