任何兩種顏色之間的 WCAG 對比度是這樣計算的：(L1 + 0.05) / (L2 + 0.05)，其中 L1 是較淺顏色的相對亮度，L2 是較深顏色的相對亮度，計算結果永遠介於相同顏色的 1:1 與純黑對純白的 21:1 之間。Mac 使用者不需要安裝軟體就能測試顏色組合，因為 Color Contrast Checker 完全在 macOS 上的任何現代瀏器中執行，包括 Safari、Chrome、Firefox、Arc 和 Brave，並且在本機處理數值，因此品牌色票永遠不會離開這台電腦。這很重要，因為對比度不足正是讓真實使用者無法閱讀網頁的原因，而 macOS 上大多數的設計工具在專案後期之前都不會標示出失敗的組合。使用瀏覽器型的檢查工具，設計師和開發人員可以在幾秒鐘內驗證文字與背景的組合，同時一次看到所有 WCAG 門檻：AA 標準文字為 4.5:1、AA 大字與非文字 UI 為 3:1、AAA 標準文字為 7:1。單一一個畫面就能讓你即時調整品牌顏色，直到每個元素都通過你需要的標準。
為何瀏覽器型的對比度檢查工具適合 macOS
macOS 內建螢幕選色器，以及一長串第三方設計應用程式，但其中大多數只把對比度檢查當作附帶功能。Apple 自己的開發者工具中的「對比度」工具是個明顯的例外，App Store 中少數付費的 macOS 應用程式也提供類似功能。不過，對大多數設計師來說，最輕鬆的路徑就是使用一款與他們已經用來執行 Figma、Sketch、Photoshop 或任何在分頁中運作的設計工具的瀏覽器住在一起的檢查工具。瀏覽器型的檢查工具在 Apple silicon 和 Intel Mac 上都能使用、不需要管理者密碼、並且會在 WCAG 公式變更的那一刻自動更新。它們也能避開許多原生 macOS 工具會觸發的 Gatekeeper 提示，這代表初階設計師可以在鎖定嚴格的公務機器上使用它們，而不需要提交 IT 工單。
macOS 上的 Safari 完全支援標準的 HTML 顏色輸入，因此原生 macOS 選色器可以從工具中的任何顏色色塊開啟。Chrome、Firefox 和 Arc 也提供相同的行為。由於計算是在網頁本身的 JavaScript 中執行，結果會立即顯示，而且任何顏色數值都不會被上傳到任何地方，這在客戶尚未簽核品牌色票時特別有用。
如果你是這個主題的新手，Color Contrast Checker 新手入門指南以更緩慢、更視覺化的方式涵蓋相同的內容。
如何在 Mac 上使用 Color Contrast Checker
底下的三步驟流程可以在 Safari、Chrome、Firefox、Arc、Brave 或任何其他現代的 macOS 瀏覽器中使用。它使用公開的 Color Contrast Checker 頁面，而且只需要輸入兩個十六進位數值的時間。
- 設定前景（文字）顏色。點擊前景色塊以開啟 macOS 選色器，或直接將十六進位數值輸入到欄位中（例如，接近黑色的本文文字使用 #111111）。你也可以貼上從 Sketch、Figma 或你的設計 token 檔案複製的值。
- 用相同方式設定背景顏色。開啟背景色塊或輸入十六進位數值，例如白色使用 #ffffff、柔和的中性色使用 #f7f7f7，或任何品牌表面色。
- 讀取對比度數值與通過／未通過徽章。工具會顯示數值比例（例如 4.7:1），以及 AA 標準文字、AA 大字、AAA 標準文字、AAA 大字，以及 UI 元件的 3:1 非文字對比規則的個別通過或未通過徽章。調整任一顏色，每個徽章都會即時更新，直到該組合通過你需要的門檻。
macOS 在這三個步驟之上另外增加了兩個實用的捷徑。內建的「數位色度計」（Digital Color Meter）應用程式位於應用程式 → 工具程式中，可以讓你用放大鏡取樣螢幕上的任何像素、鎖定前景值，然後將它複製為通用的 RGB 元組，並在瞬間轉換為十六進位。你也可以將任何原生 macOS 顏色面板中的色直接拖曳到瀏覽器中的十六進位輸入欄位。
理解 WCAG 對比度門檻
WCAG 2.x 將無障礙對比度分成兩個符合性等級，外加一條針對互動元件的獨立規則。依文字是標準大小、較大或非文字的不同，每個等級有不同的最低比例。
| 符合性等級 | 標準文字 | 大字（≥18pt 或 ≥14pt 粗體） | 非文字 UI 與圖形 |
|---|---|---|---|
| AA（最低符合性） | 4.5:1 | 3:1 | 3:1 |
| AAA（強化） | 7:1 | 4.5:1 | 未定義 |
「大字」的寬容規定存在，是因為較粗、較大的字形在較低的亮度差異下仍較容易辨識。AA 是大多數監管機構引用的底線：美國 ADA、聯邦機構適用的 Section 508，以及歐盟的 EN 301 549 全部都回頭參照 WCAG 2.x。AAA 較嚴格，對於內容密集網站的本文來說是正確的目標，即便沒有法律強制要求。
這些數字背後是每個檢查工具都使用的相同公式。相對亮度的計算方式是：使用標準 gamma 曲線將每個 sRGB 通道轉換為線性光，然後對通道加權：紅色 0.2126、綠色 0.7152、藍色 0.0722。對比度是較淺亮度加 0.05，除以較深亮度加 0.05。
最簡單的計算範例是純黑配純白。白色的相對亮度為 1；黑色的相對亮度為 0。代入後：(1 + 0.05) / (0 + 0.05) = 1.05 / 0.05 = 21。這就是所有其他組合都低於其下的 21:1 上限。
對比度數值能與不能衡量什麼
WCAG 比例衡量一件事：亮度對比。它並不衡量色相、飽和度或色距離，這就是為什麼鮮紅配鮮綠仍然可能未通過，即使這兩種顏色在大多數觀看者眼中看起來非常不同。以色相為基礎的區分對有色覺缺陷的使用者很重要，但它們不屬於這個比例的一部分，需要另外檢查。
對比度也是對稱的。由於公式是用較淺亮度除以較深亮度，交換前景和背景會得到完全相同的數字。這在某些情況下很實用：如果你只知道表面顏色，想知道它能承載的最深文字顏色，你可以把它貼到任一個欄位並讀取結果。
有幾個真實世界的案例需要在標題比例之外更仔細檢視：
- 漸層與半透明覆蓋層。有效背景會在元素上各處改變。在字母可能落腳的最淺和最深點都取樣，並檢查兩者。
- 圖片上的文字。放在照片上的說明文字在每個像素上都有不同的背景。當照片本身對品牌至關重要時，請使用實心色塊或暗罩。
- 佔位文字與停用狀態。這些是常見的失敗點，因為設計師通常會降低不透明度而非挑選新顏色。不透明度會改變有效顏色，而有效顏色仍然必須通過比例。
- 細體或裝飾性字體。12pt 細體細線字比同樣一句話以厚實的標題字型設定需要更高的對比度。
對於上述的極端情況，工具給出的答案只是一個起點。W3C 自己的 WCAG 2.1 contrast-minimum 指引詳細描述了公式和門檻，在任何色彩系統簽核之前值得讀一次。
Mac 專屬的工作流程訣竅，加快對比度測試
幾個習慣能讓對比度檢查工具感覺像是 macOS 內建工具，而不是另一個瀏器分頁。
第一，把工具釘選在 Safari 的釘選分頁或一個名為「Accessibility」的 Chrome 分頁群組中。這個頁面很小並且會留在記憶體中，所以當你在 Figma 或 Sketch 中工作時，用單一鍵盤快捷鍵就能切換過去。
第二，建立一個包含品牌十六進位數值的小型文字檔，依序貼到前景和背景欄位中。由於計算在本機執行，你可以逐一檢視設計系統中的每個 token，而不用擔心未公開的色票會洩漏給第三方伺服器。
第三，善用 macOS 顏色面板。在許多應用程式中使用 Shift+Cmd+C 開啟任何原生選色器，然後把色塊直接拖入瀏覽器的輸入欄位。搭配工具的通過／未通過徽章，這會把品牌稽核變成單純的複製貼上動作。
最後，記住 AA 是底線，不是上限。對於行銷頁面、文件和儀表板上的長篇閱讀內容，將本文推向 AAA（標準文字 7:1）對於低視能、白內障、老花眼或在明亮陽光下使用廉價螢幕的人來說閱讀起來會更舒適。許多男性和較少數的女性都有某種形式的色覺缺陷，每天在上述其他條件下閱讀的人還有數百萬之多。花幾分鐘將品牌顏色推向那個上限，是在 macOS 上能取得的最便宜的無障礙成果之一。
想深入了解，請參閱 Mac 上的 Color Difference Calculator：HEX 轉 Delta E 2000。