WCAG色彩對比為設計師而設

若您的文字未能達到 WCAG AA 對比標準，約有 2.85 億視覺障礙人士將無法閱讀。此外，您在歐盟及美國的法律風險亦日益升高。好消息是：規則非常簡單。

4.5:1 規則

正文字體必須與其背景具有至少 4.5:1 的對比比率，方可通過 WCAG AA。大號文字（24px 或以上普通字體，或 18px 或以上粗體字）則有較低標準，為 3:1。

對於 AAA 合規：正文字體需達 7:1，大號文字則為 4.5:1。

對比比率的計算方法

WCAG 使用相對亮度 — 將每種顏色轉換為亮度值（0 = 黑色，1 = 白色），使用特定公式計算，然後計算 (L1 + 0.05) / (L2 + 0.05)，其中 L1 為較淺的顏色。

您無需手動計算 — 請使用我們免費的 對比檢查器，只需輸入任何兩種顏色即可查看比率。

常見失敗案例

• 淺灰色文字在白色背景上 — #999 在 #fff 上 = 2.85（失敗）。#767676 在 #fff 上 = 4.54（通過）。
• 白色文字在黃色背景上 — 几乎總是失敗。請使用深色文字搭配黃色背景。
• 正文中彩色連結 — 多數藍色連結在白色背景上可通過，但在淺灰色背景上則失敗。請測試實際的周圍背景。
• 看起來很棒的品牌顏色 — 它們經常失敗。請添加淺白色背景或加深文字顏色。

選擇可訪問的顏色組合

三種可靠的模式：

1. 深色在淺色上 — #1f2937 在 #fff 上 = 14:1（完美）。
2. 白色在深色上 — #fff 在 #1f2937 上 = 14:1（完美）。
3. 深色在強調色上 — #1f2937 在 #fbbf24 上 = 9:1（適合按鈕）。

超越文字

WCAG 2.1 同時要求非文字元素（按鈕、焦點環、表單邊框）的對比比率為 3:1。 檢查器 可同時處理這兩種情況。

不會與您的小工具爭奪視覺空間的壁紙

如果您是設計師，需在時鐘小工具和通知後方設置壁紙，請選擇在小工具區域對比比率低於 5:1 的壁紙。我們的 高斯模糊工具 可以柔化任何壁紙上繁忙區域，以提升小工具的可讀性。

試用我們的免費工具

這些指南大多與您可立即使用的實用工具搭配 —— 首次使用無需註冊：

• 圖像縮放器 —— 精確像素縮放與放大。
• 轉換為 WebP —— 檔案大小比 JPG 小 30-50%。
• 背景移除器 —— 一鍵裁剪，透明 PNG。
• 圖標生成器 —— 從單一來源生成所有瀏覽器尺寸。
• 社交媒體縮放器 —— 每個平台的精確尺寸。
• 批量處理 —— 可一次應用任何工具至最多 200 張圖片。

瀏覽 完整工具目錄。