無障礙設計工具
色彩對比度檢查器
免費線上色彩對比度檢查器，無需帳號、不用安裝，完全在瀏覽器中運行。
檢查 WCAG 色彩對比度
預覽文本
大號文本
1.0
對比度比值
-
相對亮度
WCAG AA 標準
普通文本 (4.5:1)
❌ 不符合
大號文本 (3:1)
❌ 不符合
UI 元件 (3:1)
❌ 不符合
WCAG AAA 標準
普通文本 (7:1)
❌ 不符合
大號文本 (4.5:1)
❌ 不符合
相對亮度計算公式
公式: L = 0.2126 * R + 0.7152 * G + 0.0722 * B
(其中 R, G, B 已根據 sRGB 進行伽馬校正)
對比度比值 = (L1 + 0.05) / (L2 + 0.05)
(其中 L1 為較亮顏色的相對亮度，L2 為較暗顏色)
什麼是色彩對比度？
色彩對比度（Contrast Ratio）是測量兩種顏色明度差異的標準。它用於確保網站和應用程式對視力低下或色盲使用者的可讀性。
Web Content Accessibility Guidelines（WCAG）由 W3C 制定，定義了不同內容類型所需的最低對比度要求。符合 WCAG 標準的網站對所有使用者都更易於閱讀。
如何使用色彩對比度檢查器？
- 選擇前景色和背景色 — 使用顏色選擇器或輸入十六進制代碼（如 #FF0000）
- 查看即時預覽 — 在實時預覽框中看到文本在該顏色組合下的外觀
- 檢查對比度比值 — 瞭解您的顏色組合達到的對比度數值
- 驗證 WCAG 合規性 — 檢查您的顏色是否符合 AA 或 AAA 無障礙標準
- 獲取建議 — 如果失敗，工具會建議相近的無障礙顏色組合
- 交換顏色 — 快速點擊「交換顏色」按鈕以測試反向組合
WCAG 對比度標準詳解
WCAG AA 是應滿足的最低可訪問性標準：
- 普通文本：最小 4.5:1
- 大號文本（18pt 或以上，或 14pt 加粗）：最小 3:1
- UI 元件和圖形：最小 3:1
WCAG AAA 提供更高的無障礙性：
- 普通文本：最小 7:1
- 大號文本：最小 4.5:1
常見問題
🎨 為什麼色彩對比度很重要？
約 253 百萬人患有視力障礙。適當的色彩對比度確保網站對所有人都可讀，包括患有色盲症、低視力或老年人。這是網頁無障礙性 (A11y) 的核心部分。
📊 WCAG AA 和 AAA 有什麼區別？
WCAG AA 是國際標準中最常見的無障礙級別，適合大多數網站。WCAG AAA 提供更高的標準，適合涉及關鍵內容的網站，如醫療或教育平台。AAA 要求更高的對比度比值。
🔢 什麼是相對亮度？
相對亮度（Relative Luminance）是根據 sRGB 色彩空間計算的顏色亮度值，範圍從 0（最暗）到 1（最亮）。它用於計算兩種顏色之間的對比度比值。
💾 我可以將檢查結果保存為圖像嗎？
目前此工具不支持直接導出，但您可以截圖保存結果。或者，您可以記下十六進制代碼和對比度比值以供後續使用。
🌈 如果我的顏色失敗 WCAG 標準怎麼辦？
工具會建議相近的無障礙顏色組合。您也可以嘗試加深深色或淡化淺色，以增加對比度。許多線上調色板工具也可以幫助找到相容的顏色方案。
📱 這個工具可以在手機上使用嗎？
是的！色彩對比度檢查器完全支持響應式設計，可在桌面、平板和手機上運行。無需應用程式，直接在瀏覽器中使用。