對比度檢查

依 WCAG AA 與 AAA 標準檢查文字與背景的對比度

文字顏色

背景顏色

文字不透明度：100%

對比度

4.54:1

所有文字皆通過 AA

APCA 明度對比

Lc 71.6

可用於內容文字，不適合長篇內文

來自 WCAG 3 草案，會區分明暗方向：Lc 為負代表深色背景上的淺色文字。

預覽

大標題

敏捷的棕色狐狸跳過了懶狗

對比不足對內文影響最大：小字級的長段落很快讓眼睛疲勞，在陽光下用手機閱讀時尤其明顯。

敏捷的棕色狐狸跳過了懶狗

小字、圖說與註腳

按鈕按鈕

範例文字

AA · 4.5:1

調整文字已合格

調整背景已合格

AAA · 7:1

調整文字

#595959 · 7.00:1

調整背景僅調整明度無法達到

只調整明度（OKLCH），色相與整體感覺維持不變。

如何使用對比度檢查

檢查文字色與背景色是否符合 WCAG 2 對比度要求（一般文字、大字與介面元件的 AA、AAA），並顯示 WCAG 3 草案的 APCA 明度對比。不合格時會建議最接近的合格顏色。

在「文字顏色」和「背景顏色」輸入 HEX、rgb()、hsl()、oklch() 或顏色名稱，或按色塊開啟取色器。

查看「對比度」數值，以及每一項 AA、AAA 檢查是「通過」還是「未通過」。

在「預覽」查看實際效果，可填入自己的「範例文字」，並用「交換顏色」測試反過來的搭配。

在「最接近的合格顏色」中，針對 AA（4.5:1）或 AAA（7:1）的「調整文字」或「調整背景」建議按「套用」。

改過顏色後，頁面網址會帶上兩種顏色，複製網址就能分享結果。

常見問題

WCAG AA 要求一般文字 4.5:1，大字（24px 以上，或 18.66px 以上粗體）以及圖示、輸入框邊框等介面元件 3:1；AAA 要求 7:1 和 4.5:1。

對比度在門檻附近不會無條件進位，避免差一點不合格的配色看起來像是通過了。

可以。拖動「文字不透明度」滑桿，工具會先把半透明文字和背景混合，再計算對比度。

APCA 出自 WCAG 3 草案，提供的明度對比（Lc）會因哪個顏色是文字而不同，負值代表深色背景上的淺色文字。它仍是草案，法規與稽核通常仍以 WCAG 2 對比度為準。

只在 OKLCH 中調整明度，色相和整體感覺維持不變。如果調亮或調暗都達不到目標，會顯示「僅調整明度無法達到」，可以改試調整另一個顏色。