跳至主要內容
Lizely

色彩對比檢查器

即時檢查任意文字色彩與背景色彩組合是否符合 WCAG AA 與 AAA 對比規則。

隱私權：你的檔案不會離開裝置，所有處理均在瀏覽器本機完成。

使用方式

  1. 1.使用色彩選擇器設定前景（文字）色彩，或輸入 #111111 之類的十六進位色碼。
  2. 2.以相同方式設定背景色彩，例如 #ffffff。
  3. 3.查看對比值與 AA／AAA 通過標記，調整任一色彩，直到符合所需等級。

關於色彩對比檢查器

色彩對比檢查器會使用 WCAG 2.x 官方對比公式，測量文字在背景上的可讀性。選取前景（文字）色彩與背景色彩後，工具會立即回傳對比值，並清楚顯示每項重要無障礙門檻是否通過。

計算方式完全遵循《網頁內容無障礙指南》。每個色彩通道會先從 sRGB 轉換為線性光，再以紅色 0.2126、綠色 0.7152、藍色 0.0722 的權重合成相對亮度。對比值接著依 (L1 + 0.05) / (L2 + 0.05) 計算，其中 L1 是較亮色彩的亮度，L2 是較暗色彩的亮度。結果必定位於 1:1（相同色彩）到 21:1（純黑搭配純白）之間。

這些數值對應明確的符合性等級。WCAG AA 級要求一般文字至少 4.5:1，大型文字至少 3:1（約 18pt，或 14pt 粗體）；AAA 級則提高為一般文字 7:1、大型文字 4.5:1。非文字對比另有一項規則：介面元件、圖示與圖形物件（例如表單欄位邊框和焦點指示器）至少需要 3:1。工具會同時回報所有結果，讓你清楚知道這組色彩符合哪些標準。

對比不是單純的美觀問題。大約每十二名男性就有一人、每兩百名女性就有一人具備某種色覺辨識障礙，另有數百萬人因低視力、白內障，或在強烈陽光下使用顯示效果不佳的螢幕而閱讀困難。足夠的亮度對比，能讓內文、按鈕和錯誤訊息對所有人維持可讀性。在許多地區，這也是法律要求：美國《身心障礙者法案》（ADA）經常適用於網站，Section 508 要求聯邦機關遵守無障礙規範，歐洲標準 EN 301 549 也直接引用 WCAG 作為公共部門網站的依據。

幾項實用提醒：對比只取決於兩種色彩，與哪一種是文字、哪一種是背景無關，因此交換前景與背景不會改變比值。大型粗體文字因筆畫較厚、較容易閱讀，可以使用較低的對比值。通過 AA 只是最低門檻而非最佳上限；條件允許時以 AAA 為目標，能為更多使用者提供舒適閱讀體驗。

也要了解對比值涵蓋與未涵蓋的範圍。它測量的是亮度對比而非色相，因此兩種色相差異很大、亮度卻相近的色彩（例如紅配綠），即使部分使用者覺得容易區分，仍可能不合格。這也是不應只靠色彩傳達意義的原因；請搭配文字標籤、圖示或底線。漸層、半透明覆蓋層，以及放在圖片上的文字較為複雜，因為有效背景會隨元素位置改變，所以要分別測試字元可能落在的最亮與最暗位置。預留位置文字、停用狀態和筆畫纖細的裝飾字型都是常見失敗點，值得再次檢查。所有計算都在瀏覽器本機執行，你可以私密測試品牌色盤與設計 Token，不會上傳任何內容。

方法與來源

依照 WCAG 2.x 計算對比值：先以 sRGB 線性化求得相對亮度，再使用 (L1+0.05)/(L2+0.05)；一般文字 AA≥4.5:1，AAA≥7:1。

常見問題

需要多少對比值才能通過 WCAG？
AA 級的一般文字至少需要 4.5:1，大型文字至少需要 3:1（約 18pt，或 14pt 粗體）。AAA 級的一般文字需要 7:1，大型文字需要 4.5:1；介面元件與圖形至少需要 3:1。
什麼算是大型文字？
WCAG 將大型文字定義為一般字重至少 18pt（24px），或粗體至少 14pt（約 18.66px）。大型文字的字形較大、筆畫較厚，因此允許較低的對比值。
兩種色彩的順序會影響結果嗎？
不會。WCAG 對比公式一律以較亮色彩的亮度除以較暗色彩的亮度，因此交換前景與背景會得到完全相同的結果。對比是色彩組合本身的屬性，與哪一種色彩作為文字無關。

相關工具

色彩工具 使用指南

查看全部