跳至內容

對比度計算器

檢查文字顏色與背景顏色之間的 WCAG 對比度，查看符合哪些無障礙等級，並取得符合門檻的建議顏色。

修改日期

#
#

對比度結果

對比度

-

輸入兩種顏色。

大字範例

一般大小的內文範例，這類文字最常受到對比度不足的影響。

AA，一般文字 (4.5:1)
-
AA，大字 (3:1)
-
AAA，一般文字 (7:1)
-
AAA，大字 (4.5:1)
-

符合 AA 的建議文字顏色

下列顏色與目前背景的對比度至少為 4.5:1。選取一種，試著將它設為文字顏色。

運作方式

對比度是前景色與背景色的亮度差異，依據 WCAG 指南以 (L1 + 0.05) 除以 (L2 + 0.05) 計算，其中 L1 是較亮顏色的相對亮度，L2 是較暗顏色的相對亮度。WCAG AA 要求一般文字達到 4.5:1，大字則為 3:1。

  1. 輸入或選取兩種顏色

    輸入十六進位值或使用顏色選擇器。

  2. 查看對比度與等級

    每個 WCAG 等級都會顯示該對比度是否通過。

  3. 試用建議顏色

    選取下方的色票，即可讓目前背景立即符合 AA 標準。

WCAG 對比度公式

比值 = (L1 + 0.05) ÷ (L2 + 0.05)

相對亮度 L 取自線性化的 sRGB：每個色彩通道都會使用 sRGB 傳遞函數，從經過伽瑪校正的 0-255 值轉換為線性光，再依 0.2126R + 0.7152G + 0.0722B 加權，以符合人眼的明視效率。可能的最大對比度為 21:1，也就是純白背景上的純黑色。

4.5:1 規則適用對象

WCAG 的 4.5:1 對比度要求專門適用於文字與文字圖像。裝飾圖片、標誌，以及沒有文字替代內容的純視覺圖示不受此限。按鈕、表單輸入框邊框和焦點指示等非文字 UI 元件，依據 WCAG 1.4.11 只需達到 3:1；這個門檻較低，因為細小的文字筆畫需要比簡單形狀更高的對比度才能保持清晰易讀。

深色主題看起來清楚，對比度仍可能不合格

WCAG 演算法使用線性化 sRGB 亮度，與感知亮度並非線性關係。深色主題常在近黑色背景上搭配中灰色文字，即使看起來清楚，對比度仍可能低於 4.5:1。例如，#1A1A24 背景上的 #999999 約為 3.6:1，未達 AA 標準；將文字調亮至約 #ABABAB 或更亮即可達標。

常見問題

WCAG AA 對內文要求的對比度是多少？

WCAG 2.1 AA 級要求，一般字重且小於 18px 的文字，或粗體且小於 14px 的文字，對比度至少為 4.5:1；大字（一般字重 18px 以上，或粗體 14px 以上）則需達到 3:1。AAA 級要求一般文字為 7:1，大字為 4.5:1。可能的最大對比度為 21:1，也就是純白 (#FFFFFF) 背景上的純黑 (#000000)。

WCAG 對比度如何計算？

公式為 (L1 + 0.05) 除以 (L2 + 0.05)，其中 L1 是較亮顏色的相對亮度，L2 是較暗顏色的相對亮度。相對亮度取自線性化的 sRGB 值：每個色彩通道都會使用 sRGB 傳遞函數，從經過伽瑪校正的 0-255 值轉換為線性光，再依 0.2126R + 0.7152G + 0.0722B 加權，以符合人眼的明視效率。

所有 UI 元件都需要 4.5:1 的對比度嗎？

不需要。WCAG 的 4.5:1 對比度要求專門適用於文字與文字圖像。裝飾圖片、標誌，以及沒有文字替代內容的純視覺圖示不受此限。按鈕、表單輸入框、焦點指示等非文字 UI 元件，依據 WCAG 1.4.11 只需達到 3:1。4.5:1 的較高門檻是因為文字的可讀性取決於細小的筆畫。

為什麼我的深色模式設計看起來清楚，卻不符合 WCAG？

WCAG 演算法使用線性化 sRGB 亮度，與感知亮度並非線性關係。深色主題常在近黑色背景上搭配中灰色文字，感覺對比度足夠，亮度比卻低於 4.5:1。例如，#1A1A24 背景上的 #999999 約為 3.6:1，未達 AA 標準。在相同背景上將文字調亮至約 #ABABAB 或更亮即可達標。

表單輸入框中的佔位文字也適用顏色對比度要求嗎？

是。依據 WCAG 1.4.3，傳達有意義內容的佔位文字必須達到 4.5:1。許多設計會使用低不透明度的佔位文字，例如 40% 灰，因而未達此門檻。成功準則 1.4.3 並未一概豁免佔位文字；例外僅適用於非作用中的 UI 元件或純裝飾，不適用於說明提示文字。