跳至內容
Toolmize

Color Contrast Checker

什麼是色彩對比度檢查器？

此工具可計算前景（文字）和背景顏色之間的 Contrast Ratio（對比度），並檢查該組合是否符合 WCAG 2.0 的 AA 與 AAA 無障礙等級指南。它還提供色盲模擬、未達標配色的修正建議，並支援多種格式的程式碼匯出。

如何檢查色彩對比度

選擇顏色

  • Color A（前景／文字）和 Color B（背景）各自都有 16 進位（hex）輸入框與顏色選擇器。
  • 每個選擇器下方的 Shade Scale 讓您可以微調亮度。點擊任何色階即可立即套用。
  • Color Wheel 可以視覺化地調整 Color A 的色相。其互補色會顯示在下方——點擊即可將其套用為 Color B。
  • Swap 可將 Color A 與 Color B 互換。

結果代表什麼意義

結果顯示內容
Contrast Ratio計算出的比率（1:1 – 21:1）。數字越高越好。
A11y Score滿分為 100 分的無障礙分數（基於對比度）。
WCAG AA / AAA在各等級下，對 Normal Text（一般文字）和 Large Text（大文字）的通過或失敗判定。
Preview包含您的配色的標題、內文、按鈕、徽章、輸入框和卡片的即時預覽。
Fix Suggestion當對比度未達 AA 等級時，可點擊的建議卡片會顯示最接近且達標的色階及其對比度。點擊即可套用。

WCAG 標準門檻

等級Normal TextLarge Text
AA至少 4.5:1至少 3:1
AAA至少 7:1至少 4.5:1
  • Normal text: 低於 18pt（或低於 14pt 粗體）
  • Large text: 18pt 及以上（或 14pt 粗體及以上）

額外功能

  • Undo / Redo – 回到上一步或重做您的顏色變更。
  • Share Result – 複製一組嵌入了當前顏色的網址。任何人開啟都能看到相同的配色。
  • Pin – 最多儲存 8 組配色以供並排比較。點擊已釘選的配色即可重新載入。
  • Brand Colors – 提供 8 個真實品牌（如 Spotify、Slack、GitHub 等）的調色盤及其對比度。點擊任意品牌即可載入。
  • A11y Check – 模擬 4 種色盲類型（Protanopia, Deuteranopia, Tritanopia, Achromatopsia）並顯示各類型的實際對比度。
  • Code Output – 產生可直接貼上的 CSS、Tailwind 4、Tailwind 3、Flutter 及 React 程式碼。為可收合區塊，預設開啟。
  • Randomize / Clear All – 隨機產生符合無障礙標準的配色，或重設為預設值。

良好範例

範例 1：白底灰字 – 常見錯誤

白底配上淺灰色文字看起來很有質感，但無法通過無障礙測試。

  • Color A: #999999，Color B: #ffffff
  • Contrast Ratio: 2.85:1 – AA 未通過
  • Fix Suggestion 會建議使用色階 600（#595959），對比度為 4.9:1 – AA 通過。點擊即可套用。

範例 2：驗證品牌調色盤

在 Brand Colors 區塊點擊 Spotify。

  • Color A: #191414（黑色），Color B: #1DB954（綠色）
  • Contrast Ratio: 4.9:1 – AA 通過，AAA 未通過
  • 釘選（Pin）這組配色，然後試試看 LinkedIn（在 #0A66C2 上的 #ffffff，4.7:1）並進行比較。

範例 3：設計深色模式

為深海軍藍背景尋找清晰可讀的文字顏色。

  • Color A: #e0e0e0，Color B: #1a1a2e
  • Contrast Ratio: 12.4:1 – AA 和 AAA 通過
  • 開啟 A11y Check 確認 4 種色盲類型也全部通過。

範例 4：開發者工作流程 – 程式碼匯出

找到一組好的配色後，展開 Code Output 並選擇您的框架：

  • CSS: 自訂屬性 --fg 和 --bg
  • Tailwind 4: 任意色彩值（arbitrary values）
  • React: 行內樣式物件

直接將程式碼片段複製到您的專案中。

關鍵提示

  • 從 Brand Colors 開始。 如果您要檢查現有品牌，請從預設清單中點選，而不要手動輸入 hex 值。
  • 善用 Fix Suggestion。 當對比度未達標時，不要用猜的——點擊建議卡片，自動跳至最接近的達標色階。
  • 釘選（Pin）配色來比較。 在幾種顏色選項間猶豫時，把每個都釘選起來。您可以重新載入它們並進行並排比較。
  • 也要檢查色盲模擬。 通過 WCAG 的配色，對色盲使用者來說仍可能難以辨識。請開啟 A11y Check 區塊來進行確認。
  • 分享您的決定。 使用 Share Result 將包含準確配色的網址傳送給設計師或審閱者。

計算公式

WCAG 2.0 使用相對亮度（relative luminance）來定義 Contrast Ratio：

CR=L1+0.05L2+0.05CR = \frac{L_1 + 0.05}{L_2 + 0.05}

變數意義
CRCRContrast Ratio
L1L_1較亮顏色的相對亮度
L2L_2較暗顏色的相對亮度

相對亮度是由線性化後的 sRGB 值計算而來：L=0.2126R+0.7152G+0.0722BL = 0.2126R + 0.7152G + 0.0722B

常見問題

我應該追求 AA 還是 AAA？

AA 是多數國家/地區法定的最低標準。AAA 能提供更好的閱讀體驗，但要在所有設計元素上達成非常困難。實務上的作法：內文追求 AA，而像警告或錯誤訊息等關鍵資訊則追求 AAA。

通過 WCAG 就保證色盲使用者能順利閱讀嗎？

WCAG 的對比度檢查的是亮度，而不是色相差異。一組配色可能通過 WCAG 標準，但對色盲者來說看起來卻一模一樣。請使用 A11y Check 區塊進行確認，並記得始終在顏色之外補充圖示或文字標籤。

此工具支援哪些程式碼格式？

CSS 自訂屬性、Tailwind CSS v3 和 v4（任意色彩值）、Flutter Color() 物件，以及 React 行內樣式。請在 Code Output 區塊的切換按鈕中選擇格式。

我可以儲存並分享我的配色嗎？

可以。Pin 最多可將 8 組配色儲存在本機以供比較。Share Result 會複製一組嵌入顏色的網址——任何人開啟它都會看到完全相同的配色。

常見問題

這個工具是免費的嗎？

是的，Toolmize 上的所有工具都是完全免費的。免註冊，沒有隱藏費用 — 打開即可使用。

我的資料安全嗎？

所有計算都直接在您的瀏覽器中進行。沒有任何資料會傳送到伺服器，因此您的資訊 100% 保密。