設計師適用的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。
• Favicon產生器 — 從單一來源生成所有瀏覽器尺寸。
• 社群媒體尺寸調整 — 每個平台的精確尺寸。
• 批次處理 — 一次對最多200張圖片套用任何工具。

瀏覽完整工具目錄。