iPhone 上的色彩對比檢查器，基本上就是在 Safari 或 Chrome 中開啟的 WCAG 2.x 對比工具——不需要從 App Store 下載、不需要註冊帳號、也不需要深入 iOS 的設定選單。你輸入前景色（你的文字）和背景色，工具就會立即回傳對比比例，並顯示 WCAG AA、AAA、一般文字、大型文字以及非文字 UI 元素的通過／未通過徽章。所有運算都在你的瀏覽器本機執行，因此你測試的色彩永遠不會離開你的手機。對設計師、開發人員、內容作者和審閱者來說，這是在行動中驗證可及性最快速的方式，無論你正在檢查品牌色票、推播通知模擬圖、應用程式內畫面，或是在行動版 Safari 中預覽的網頁。由於運算完全遵循 W3C 規範，你得到的數字會和桌面工具或付費 iPhone 應用程式所回報的一致——卻不需要犧牲儲存空間、授予權限，或支付一次性的購買費用。
為何基於瀏覽器的對比檢查器在 iPhone 上運作良好
現代 iOS 在 Safari 中提供了功能完善的瀏覽器，而 WCAG 對比運算相當簡短，足以用 JavaScript 執行而不會拖慢任何東西。這表示 色彩對比檢查器 在手機分頁中的表現與在筆電上相同：你挑選或輸入兩個顏色，頁面會計算比例，徽章則會告訴你每組顏色通過哪些可及性門檻。
有幾個實際的原因讓瀏覽器方案成為手機上的預設選擇。首先，不需要安裝任何東西，因此你能避開 App Store 審核延遲、儲存空間成本，以及第三方工具帶來的 iOS 版本相容性問題。其次，工具在本機執行——沒有網路往返、沒有遙測、沒有上傳——因此機密的品牌色票、內部設計權杖和未公開的產品 UI 都能以私密方式進行檢查。第三，你能避開專用對比工具中常見的應用程式內購買和訂閱提示。第四，同一個工具可在任何具備瀏覽器的裝置上運作，這也是為什麼對於在 iPhone 與 Android 之間切換的使用者來說，工作流程基本上完全相同；如果你也使用 Android，請參閱 在 Android 上使用色彩對比檢查器：在瀏覽器中執行 以了解對應的設定方式。
話雖如此，App Store 上仍有專用的對比應用程式，有些人偏好它們，因為它們提供了像是透過相機取色、照片疊加或儲存色票之類的功能。這些額外功能可能有用，但對於核心問題——這個文字／背景組合是否通過 WCAG AA 或 AAA——瀏覽器工具能以零設定給你相同的答案，而且你可以將它加入主畫面書籤，一鍵即可取用。
如何在 iPhone 的 Safari 中檢查對比
頁面開啟後，整個工作流程可在不到一分鐘內完成。
- 在 iPhone 上開啟 Safari，並前往色彩對比檢查器。
- 設定前景色——也就是文字顏色——點選前景色塊以開啟顏色選擇器，或直接在輸入欄位中輸入十六進位值，例如 #111111。
- 以同樣方式設定背景色，例如純白色背景可使用 #ffffff。
- 在結果面板中讀取對比比例，以及 AA 和 AAA 在一般文字、大型文字和非文字 UI 元素上的通過／未通過徽章。
- 調整任一顏色，直到你需要的所有徽章都顯示通過，接著點選 iOS 的分享按鈕並選擇「加入主畫面」，以便日後一鍵取用進行檢查。
對於持續性的工作，將頁面加入書籤或釘選到主畫面是最接近原生應用程式的做法——圖示會直接以 Safari 開啟該工具，且在任何近幾年發行的 iPhone 上，頁面載入時間都遠少於一秒。
對比比例的計算方式
WCAG 2.x 對比比例是一小段運算，它將兩個 sRGB 顏色轉換為單一的可讀性數字。每個顏色通道會先被轉換為線性光值，讓運算能貼近人類眼睛實際感知的情況——舉例來說，明亮的綠色在相同數值下比暗淡的藍色貢獻更多。官方的權重為 紅 0.2126、綠 0.7152、藍 0.0722，三者共同構成每個顏色的相對亮度。
當兩個顏色都擁有亮度值後，比例會以 (L1 + 0.05) / (L2 + 0.05) 計算，其中 L1 是兩者中較亮的顏色，L2 是較暗的顏色。+0.05 這個項目是為了避免在將純黑色與自身比較時發生除以零的情況。運算結果永遠落在 1:1（兩個相同的顏色）和 21:1（純黑配純白）之間。
計算範例：純黑 #000000 配純白 #ffffff。
- 黑色在 sRGB 中的紅、綠、藍通道皆為 0。每個通道線性化後為 0，因此其相對亮度 L_black = 0.2126 × 0 + 0.7152 × 0 + 0.0722 × 0 = 0。
- 白色在 sRGB 中的紅、綠、藍通道皆為 255，線性化後每個通道為 1。其相對亮度 L_white = 0.2126 × 1 + 0.7152 × 1 + 0.0722 × 1 = 1。
- 將 L1 = 1 和 L2 = 0 代入公式：比例 = (1 + 0.05) / (0 + 0.05) = 1.05 / 0.05 = 21。
因此白底黑字永遠會回報最大的 21:1 比例，並一次通過所有 WCAG 門檻。在工具中測試你自己的顏色組合，看看其他搭配的比較結果。
WCAG 對比門檻一覽
根據 WCAG 2.1 — 對比（最低標準），W3C 定義了五個具體的門檻，用以判斷一組顏色是否符合各個等級。這些門檻無論你是在瀏覽器、iPhone 應用程式或桌面工具中測試都適用，因為每個正確的檢查器都實作了相同的公式。
| 使用情境 | AA 級 | AAA 級 |
|---|---|---|
| 一般文字 | 至少 4.5:1 | 至少 7:1 |
| 大型文字 | 至少 3:1 | 至少 4.5:1 |
| UI 元件與圖形物件 | 至少 3:1（非文字規則） | 至少 3:1（非文字規則） |
WCAG 中的「大型文字」定義為一般字重下至少 18 點（約 24 CSS 像素），或粗體時至少 14 點（約 18.66 CSS 像素）。較粗、較大的字母每個字形承載的墨量更多，因此眼睛能在較低對比下閱讀——這正是門檻從一般文字的 4.5:1 降至大型文字 3:1 的原因。
實用技巧與值得注意的邊界情況
一旦你使用過檢查器幾次後，會浮現一些反覆出現的模式。
對比是對稱的。比例僅取決於兩個顏色，與哪個是前景、哪個是背景無關。測試白字黑底和黑字白底，無論哪種方式你都會得到相同的 21:1。這也表示一組失敗的搭配不會因為翻轉顏色就突然通過——你必須改變其中一個顏色。
粗體與大型文字享有優惠。如果你正在設計一個 20 像素一般字重的標題，你必須遵守 4.5:1 的 AA 門檻；改為 19 像素粗體後，你只需要 3:1。許多品牌標題因此能輕鬆通過 AA。
比例衡量的是亮度，而非色相。明亮的紅色配明亮的綠色仍可能失敗，因為兩者的亮度相近，即使色相差異對許多觀看者來說顯而易見。這正是 W3C 警告不要僅以顏色傳達意義的原因之一——應搭配文字標籤、圖示或底線。
漸層、圖片與疊加效果較為棘手。漸層背景上的文字沒有單一的對比值，因為有效背景會在每個字母間變化。請以文字可能落於的最低和最高亮度點進行測試；如果其中之一未通過，該區域中的該組合可能無法閱讀。相同的注意事項也適用於半透明疊加層和照片上的文字。
留意容易失敗的地方。表單欄位中的佔位文字、停用的按鈕狀態，以及極細的裝飾性字體，都經常無法通過 AA。在測試主要內文的同時，也將這些項目透過檢查器逐一檢查——它們通常是真實使用者在強烈陽光下以手機閱讀時最先注意到的部分。
由於整個運算都在 Safari 中本機執行，你無需網路連線即可在手機上快速迭代，這讓你在單一設計階段中檢查數十組顏色組合成為可能。輸入、讀取比例、微調一個十六進位數字、重複——全部都在同一個分頁中完成。