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張圖片。

瀏覽完整工具目錄。