色彩對比檢查工具

計算前景與背景色的 WCAG 對比度，並顯示 AA／AAA 通過狀態。

前景色（文字）

背景色

範例文字 The quick brown fox

18.88:1對比度比值 (WCAG 公式)

一般文字 AA（≥ 4.5:1）Pass

一般文字 AAA（≥ 7:1）Pass

大型文字 AA（≥ 3:1）Pass

大型文字 AAA（≥ 4.5:1）Pass

本工具僅回報 WCAG 對比度公式的計算結果與四個門檻的通過／不通過狀態，並不代表「本頁面符合 WCAG」；實際合規性仍須就字體大小、粗細與整體設計逐一檢視。

相似CSS 與設計

將程式碼轉成美觀的分享圖片，支援多種主題

視覺化設計線性、放射、圓錐漸層，即時複製 CSS 程式碼

即時預覽玻璃擬態效果，一鍵複製 CSS 程式碼

還沒有留言，搶先留下你的想法！

色彩對比檢測工具依 WCAG 公式計算前景色與背景色的對比度，並標示 AA／AAA 等級在一般與大字體下的通過狀況。

通過 AA 就代表我的網頁符合 WCAG 無障礙規範了嗎？

不一定。本工具只回報對比度公式的計算結果與四個門檻的通過狀態，實際是否符合 WCAG 還牽涉字級大小、字重與頁面整體設計等因素。

為什麼通過／不通過不是只用顏色顯示？

只靠顏色（例如綠點／紅點）對色盲使用者不友善，因此每個門檻都同時顯示圖示與文字（Pass／Fail）。

背景色是半透明的要怎麼算？

半透明背景需要再提供一個不透明的「畫布背景」顏色，工具會用核心既有的合成邏輯算出合成後的不透明顏色再計算對比度。