兩種顏色之間的 WCAG 對比度計算公式為 (L1 + 0.05) / (L2 + 0.05),其中 L1 是較淺顏色的相對亮度,L2 是較深顏色的相對亮度,產生的數值永遠介於 1:1 與 21:1 之間。在 Windows 上,確認文字與背景組合能通過無障礙門檻的最快方式,就是使用瀏覽器型的 WCAG 對比度檢查工具——無需安裝、不需系統管理員權限,也不需要額外設定。由於它在本機的 Microsoft Edge、Google Chrome 或 Mozilla Firefox 中執行,你可以把它放在與 Figma、PowerPoint、Visual Studio Code 或任何已在桌面上執行的設計工具並排的分頁中持續開啟。Color Contrast Checker 接受前景顏色與背景顏色的十六進位值,並即時回傳精確的 WCAG 2.x 對比度,以及每個重要等級的通過與未通過徽章:AA 標準文字、AA 大字、AAA 標準文字、AAA 大字,以及適用於圖示、表單欄位和圖形化 UI 元件的獨立 3:1 非文字規則。調整任一顏色,徽章就會即時更新,因此你可以調校出仍符合可用性基準的品牌配色。

color contrast checker on windows
Windows 版 Color Contrast Checker:在瀏覽器中執行

為何 Windows 使用者青睞瀏覽器型的對比度檢查工具

Windows 機器幾乎出現在所有無障礙工作中:在 Dell 與 Lenovo 工作站上工作的企業設計團隊、在搭載校色寬色域顯示器的電競 PC 上工作的自由開發者、在 Surface 裝置上製作 PowerPoint 簡報的行銷人員,以及受 Section 508 規範約束的政府承包商。共通點是,幾乎所有人都已預先安裝 Edge,而 Chrome 或 Firefox 也只需點一下即可取得。瀏覽器型的檢查工具消除了可安裝工具為此工作流程帶來的三個摩擦點:設定時不需要系統管理員權限、不會佔用系統列位置(即使機器背景處理程序已很多),也不會因作業系統更新而落後,因為根本沒有東西需要更新。一切都在網頁中執行,因此不論你是在 13 吋的 Surface Laptop Go 還是連接到桌上型主機的 32 吋校色顯示器上開啟,行為都完全一致。

Color Contrast Checker 的設計正是圍繞著這種簡潔性。輸入十六進位值或點選色彩選擇器,工具就會回傳對比度,無需往返伺服器。這對機密工作也很重要:品牌配色、內部產品模型和客戶色彩系統都可以在不離開本機的情況下進行測試,避免讓專屬的視覺識別流入第三方基礎架構。

在 Edge、Chrome 或 Firefox 中執行 Color Contrast Checker

在 Windows 上,你只需要瀏覽器就可以開始依官方 WCAG 公式檢查對比度。

  1. 在你的 Windows PC 上開啟 Microsoft Edge、Google Chrome 或 Mozilla Firefox。
  2. 前往 Color Contrast Checker,並在工作時讓該分頁保持開啟。
  3. 使用色彩選擇器設定前景(文字)顏色,或直接將十六進位值(如 #111111)輸入欄位。
  4. 以相同方式設定背景顏色,例如 #ffffff
  5. 在結果面板中讀取對比度,以及 AA 與 AAA 的通過或未通過徽章。
  6. 調整任一顏色,直到你所需等級(內文用 AA、舒適閱讀用 AAA)的徽章轉為綠色。

結果面板會一次顯示所有門檻,因此你不必為每個符合性等級重複測試。如果你在比較兩個候選配色,只要在兩個欄位中交換十六進位值即可——對比度是對稱的,工具會自動反映這點。

WCAG 門檻一覽

你要瞄準的數字直接來自《Web Content Accessibility Guidelines》,適用於任何平台,包括 Windows。下表彙整了 Color Contrast Checker 所評估的門檻,依據 WCAG 2.1 — Contrast (Minimum)

使用情境AA 等級AAA 等級
標準文字(18pt 標準字以下或 14pt 粗體以下)≥ 4.5 : 1≥ 7 : 1
大字(18pt 標準字或 14pt 粗體以上)≥ 3 : 1≥ 4.5 : 1
UI 元件、圖示、圖形物件≥ 3 : 1

若想深入了解這些門檻如何對應到特定元素(例如按鈕、聚焦框和佔位文字),請參閱 Color Contrast Checker 圖表指南

對比度的實際計算方式

對比度是顏色組合的一個屬性,而不是由你把哪個標示為文字來決定。計算過程如下:

  1. 取每個顏色的紅、綠、藍色通道值,範圍為 0 到 255 的整數。
  2. 將每個通道值除以 255 進行正規化。
  3. 套用 sRGB 線性化:當數值大於 0.03928 時,將 ((c + 0.055) / 1.055) 取 2.4 次方;當數值小於或等於 0.03928 時,將 c 除以 12.92。
  4. 使用 WCAG 權重將線性通道組合成相對亮度:L = 0.2126 × R + 0.7152 × G + 0.0722 × B。
  5. 計算 (L1 + 0.05) / (L2 + 0.05),其中 L1 是較淺亮度,L2 是較深亮度。

使用 #767676#ffffff 的計算範例:

  • 通道值 118 / 255 ≈ 0.4627。
  • sRGB 線性化:((0.4627 + 0.055) / 1.055)^2.4 ≈ 0.181。
  • 由於三個通道值相等,L ≈ 0.2126 × 0.181 + 0.7152 × 0.181 + 0.0722 × 0.181 ≈ 0.181。
  • 白色亮度 ≈ 1.0,因此對比度 = (1.0 + 0.05) / (0.181 + 0.05) = 1.05 / 0.231 ≈ 4.54 : 1

因此 #767676 配白色以大約 4.54:1 通過標準文字的 AA,但未通過 AAA——這正是多數設計師在肉眼判斷「柔和灰配白」組合時常見的模式。如需完整的推導過程,請參閱 Color Contrast Checker 詳解:WCAG 公式

Windows 上對比度悄悄失敗的特定情境

在 Windows 工作環境中,有幾個反覆出現的失敗模式值得在上線前檢查。

  • 投影機上的 PowerPoint。 在校色過的筆電螢幕上通過的品牌色,在會議室的日光燈或 LED 投影機下常常會褪色。請以實際投影尺寸將配色丟入 Color Contrast Checker 檢查,並在簡報放到光線明亮的會議室電視上後重新測試一次。
  • Edge 瀏覽器工具列與深色主題。 當 Windows 設為深色模式時,預設的 Edge「深色」主題在某些對話框中可能會讓中灰文字落在接近黑色的背景上。請在任何自訂配色上同時對淺色與深色介面進行測試。
  • Surface 手寫筆與觸控表單。 為 Surface 裝置觸控輸入設計的表單,其邊框需要 3:1、標籤需要 4.5:1,因為使用者常在尷尬光線下單手輸入。請同時依文字規則與 UI 元件規則進行驗證。
  • 自訂主題的程式碼編輯器。 Visual Studio Code 與 Windows Terminal 中的深色主題對作者本人看起來沒問題,但標準粗細的關鍵字對比度可能低於 7:1。對程式碼而言,AAA 是更舒適的目標,因為語法標記通常較小且較細。
  • 高對比模式互動。 Windows 高對比模式會自行重新上色,但無法保留所有自訂主題。任何僅仰賴顏色來傳達狀態的設計——紅色錯誤、綠色成功——在強制色彩模式下仍需要標籤或圖示才能確保安全。

在 Windows 上取得易讀配色的實用技巧

對比度只取決於兩種顏色,與哪個是文字、哪個是背景無關,因此對比度是對稱的。較大且粗體的文字可以以較低的對比度通過,因為較粗的筆畫更容易閱讀,這也是大字 AAA 門檻降至 4.5:1 而非 7:1 的原因。通過 AA 是下限而非上限——在版面允許的情況下以 AAA 為目標,能為最廣泛的受眾提供舒適閱讀體驗,包括年長者、低視力讀者,以及在 Windows 筆電上常見的陽光戶外使用情境。

請針對字母可能落上的最淺與最深點進行測試,特別是漸層、主視覺圖片和半透明疊加層。Color Contrast Checker 接受兩種平面顏色;對於分層背景,請在你的設計工具中取樣最差的情況,並將那些精確的十六進位值輸入。維護一個含已驗證配對的設計 token 檔案,並在任何新品牌色進入系統前重新檢查。請記住,對比度衡量的是亮度而非色相:兩種看起來明顯不同的顏色——例如紅配綠——若亮度值接近,仍可能未通過。請將顏色與標籤、圖示或底線搭配使用,而非僅依賴色相。將此工具儲存為釘選的分頁或瀏覽器捷徑,當新顏色進入專案時就能一鍵取用。