色彩對比檢查器
檢查文字與背景色之間的 WCAG 對比率——查看一般文字、大型文字和 UI 元件的 AA/AAA 通過／失敗評級，附即時預覽和無障礙色彩建議。
文字顏色
色調
背景顏色
色調
對比率
--:1
一般文字
18px 以下的內文文字（或 14px 以下的粗體文字）
AA
AAA
大型文字
18px 以上的一般字型，或 14px 以上的粗體字型
AA
AAA
UI 元件
圖示、邊框、表單控制項與圖形
AA
AAA
即時預覽
快狐跳過懶犬
對比度充足時，大型文字閱讀起來舒適自如。
這是一段一般內文文字的範例段落。良好的色彩對比讓所有人都能輕鬆閱讀您的內容，包括視力較弱或有色覺障礙的使用者。 範例連結.
小字體和說明文字最難閱讀——需要最高的對比度。
範例按鈕
範例按鈕
建議
此組合已符合一般文字的 WCAG AA 標準。做得好！
通過 AA（4.5:1）的最近可無障礙存取文字顏色：
:1
此文字顏色在此背景下沒有任何變體能達到 AA——請改換背景顏色。
所有計算均使用 WCAG 2.x 相對亮度公式即時在您的瀏覽器中完成——無需上傳、無需註冊、完全免費。
關於 色彩對比檢查器
色彩對比檢查工具會測量文字色與背景色之間的 WCAG 對比度,再依照 AA 與 AAA 無障礙等級,針對一般文字、大型文字與 UI 元件進行評級。當你調整任一顏色時,對比度與每項通過/失敗結果都會即時更新。
真實預覽面板會以你選擇的配色呈現標題、內文、小字說明、按鈕與連結,讓你能以實際內容而非抽象色塊來判斷可讀性。當配色未通過時,工具會建議最接近的可通過 AA 標準(4.5:1)的文字色,一鍵即可套用。
計算方式遵循 WCAG 2.x 相對亮度公式,完全在你的瀏覽器中執行──沒有任何上傳,檢查也完全免費。你也可以複製一份簡潔的文字報告,列出對比度與評級結果,方便貼到無障礙審查或合併請求中。
如何使用 色彩對比檢查器
- 使用選色器或輸入數值,設定文字色與背景色。
- 查看對比度以及一般文字、大型文字與 UI 元件的 AA/AAA 結果。
- 檢視即時預覽,查看你的配色下真實的標題、段落、按鈕與連結。
- 若配色未通過,套用建議的可用文字色,或交換兩種顏色。
- 點擊「複製報告」以分享對比度與合規結果。
常見問題
WCAG AA 要求一般文字達到 4.5:1,大型文字與圖示、表單邊框等 UI 元件達到 3:1。更嚴格的 AAA 等級則要求一般文字達到 7:1,大型文字達到 4.5:1。
一般字重 18px 以上,或粗體 14px 以上的文字。由於大字形較容易辨識,WCAG 在 AA 等級允許它們採用較低的 3:1 對比度。
是的。每次檢查都使用 WCAG 相對亮度公式在你的瀏覽器中即時計算,不需要註冊、沒有使用次數限制,也完全免費。
使用內建的建議功能:工具會找出你文字色中最接近、且能在目前背景下通過 AA 標準的變化版本,並讓你直接套用。若文字色的任何變化版本都無法通過,則改為調整背景色。
這涵蓋了最常見的無障礙缺失之一──色彩對比標準,但並非全部。你仍應檢查焦點狀態、資訊是否不依賴色彩傳達、字型大小,以及調色盤在色盲模擬下的表現。
不會。兩種顏色、對比度與建議都在你的瀏覽器中本機計算完成──使用過程中頁面不會發出任何伺服器請求。
熱門搜尋
顏色對比度檢查
wcag 對比度
無障礙對比度檢查
文字對比度檢查
aa aaa 對比度測試
線上檢查顏色對比度
需要協助？
使用此工具時遇到問題？請告訴我們的團隊。