對比度檢查器

貼上前景和背景顏色（或從螢幕截圖中選取）；取得對比度以及符合哪些 WCAG 等級。WCAG 2.1 AA 是多數司法管轄區的法律無障礙基準；AAA 則是針對關鍵內容建議的更高標準。

門檻值

• WCAG AA，一般文字：最低 4.5:1。
• WCAG AA，大文字（18pt 以上或 14pt 以上粗體）：最低 3:1。
• WCAG AAA，一般文字：最低 7:1。
• WCAG AAA，大文字：最低 4.5:1。
• 非文字 UI 元件（按鈕、表單邊框）：最低 3:1（WCAG 2.1+）。

為什麼對比度很重要

低對比文字對視力較弱的使用者（約佔人口 4%）、在強烈陽光下的使用者、使用廉價螢幕的使用者，以及老化眼睛（每個人都會面臨）來說難以閱讀。許多設計系統預設使用灰階配色，因為在設計師校準的 5K 螢幕上看起來優雅，但在其他地方卻難以辨識。

未達 WCAG AA 標準在美國（ADA Title III）、歐盟（EAA）及許多其他司法管轄區也可能構成法律風險。便宜的保險：在發布前，將每組文字/背景組合透過檢查工具測試。

我們報告的內容

1. 對比度：以數字呈現（例如 4.71:1）。
2. 通過/未通過：針對各 WCAG 等級與文字大小。
3. 建議修正：最接近且能通過的深色前景或淺色背景。
4. 即時預覽：以該顏色組合顯示範例文字。

搭配色盲模擬器使用

對比度與色盲是不同的無障礙軸線。在相同 UI 上執行 Color Blindness Simulator，以確認對 CVD 使用者也能正常運作。