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 則模擬人眼感知、極性和字級。兩者在橘、紅、藍這類高飽和的中間色調上差異最大。