跳到取色器

APCA 與 WCAG 2:該相信哪一種對比檢查

WCAG 2 對比度是法規要求的標準。APCA 是較新的模型,更能預測文字是否易讀,特別是在深色主題和高飽和色上。兩者都檢查,文字就能既合規又真正好讀。

閱讀時間約 1 分鐘

WCAG 2 對比度怎麼算

WCAG 2 比較文字和背景的相對亮度:(L1 + 0.05) / (L2 + 0.05),結果介於 1:1 到 21:1。AA 等級要求一般文字 4.5:1、大字 3:1,大字指至少 24 px 的一般字重或 18.66 px 的粗體。AAA 等級則要求 7:1 和 4.5:1。

這條公式是對稱的:文字和背景對調,得到的數字一樣。它也把所有亮度差異一視同仁,但人眼並不是這樣看的。

APCA 怎麼運作

APCA(Accessible Perceptual Contrast Algorithm,由 Andrew Somers 提出)會算出亮度對比值 Lc,範圍約從 -108 到 106。正負號代表極性:淺底深字為正,深底淺字為負。它模擬眼睛如何適應較亮的顏色,以及字級和字重如何影響易讀性。

常見的 APCA 建議:內文最好達到 Lc 90,內文最低 Lc 75,其他需要閱讀的內容文字 Lc 60,大字或粗體標題 Lc 45,任何文字至少 Lc 30,分隔線等非文字元素 Lc 15。

兩者結論相反的情況

以 #ff5733 這種亮橘色為例。WCAG 2 認為黑字明顯勝出:約 6.7:1,白字只有 3.2:1,所以白字不符合 AA。APCA 的結論正好相反:白字約 Lc 63,黑字只有約 Lc 47。多數人也覺得這種橘色上的白字比較好讀,這正是 APCA 想解決的情況。

深色主題也有同樣的問題。WCAG 2 高估了深色之間的對比,所以接近黑色的背景上放中灰色文字,可能通過 AA,讀起來卻很吃力。

應該用哪一種

無障礙法規和採購規範,包括美國的 ADA、Section 508 和歐盟的 EN 301 549,引用的都是 WCAG 2.1 或 2.2。APCA 屬於尚未定案的 WCAG 3 草案。所以要合規,就先通過 WCAG 2 AA;再用 APCA 在都合格的選項之間做選擇,並微調深色主題。

PickShade 會並列顯示兩種數值,也能建議最接近且符合你所選目標的顏色。

常見問題

WCAG AA 需要多少對比度?

一般文字 4.5:1,大字 3:1,大字指至少 24 px,或 18.66 px 的粗體。介面元件和有意義的圖形,與相鄰顏色之間需要 3:1。

APCA 是 WCAG 3 的一部分嗎?

APCA 是 WCAG 3 工作草案中的對比計算方法。草案還不是正式標準,內容可能變動,所以法律上的依據仍是 WCAG 2。

APCA 數值是負的代表什麼?

代表深色背景上的淺色文字。拿絕對值和門檻比較即可:Lc -75 和 Lc 75 一樣易讀。

為什麼 WCAG 和 APCA 建議的文字顏色不同?

WCAG 2 用的是簡單的亮度比,會高估深色;APCA 則模擬人眼感知、極性和字級。兩者在橘、紅、藍這類高飽和的中間色調上差異最大。

在 PickShade 中試試看

相關指南