一個完全在您的瀏覽器中執行的顏色對比檢查工具，在線上使用是安全的，因為運算發生在您的裝置上，不會上傳任何顏色值或設計檔案，也不會將您工作階段的任何資訊儲存在遠端伺服器上。這個工具唯一需要的輸入只有兩個顏色值——一個前景（文字）顏色和一個背景顏色——通常以十六進位代碼的形式輸入，例如 #111111 和 #ffffff。它不需要上傳檔案、不需要拖入任何程式碼、不需要分析圖片，也不需要建立帳號。對比比率和通過／未通過的標記會在本地運算後，於同一個分頁中顯示給您。因為網頁內容可及性指引（WCAG）將對比公式定義為一個公開標準，所以任何人只要使用相同的公式和相同的顏色，都能重現這個結果，這代表一個有信譽的線上工具不可能悄悄給您錯誤的答案並加以保密。您真正應該關心的安全問題是誰會看到您的輸入，而一個在用戶端執行的檢查工具透過不傳送任何資料來回答這個問題。
對線上色彩工具而言，「安全」的真正含義
當設計師、開發者和可及性稽核員詢問色彩對比檢查工具在線上使用是否安全時，他們通常並不擔心其中的運算。WCAG 2.x 的對比公式是公開的、有完整文件記載的，並且在無數的程式庫和教科書中被重現。他們想知道的是，他們輸入的值是否能保持隱私、是否有任何內容被記錄下來，以及這個頁面是否會悄悄將他們的品牌色票或未公開產品的顏色回傳到某處。
一個安全的線上對比檢查工具具備三項值得檢查的特質：
- 無上傳步驟。您永遠不應該需要拖入 Figma 檔案、圖片、樣式表或螢幕擷圖。這個工具只需要兩個顏色值，最多就是六個字元的十六進位代碼。
- 無需帳號或付費。要求登入、提供電子郵件或信用卡的免費工具，有理由會儲存關於您的某些資訊。一個真正以安全為優先的對比工具，除了前景顏色和背景顏色之外，不會要求任何其他資訊。
- 本地運算。當對比比率是在您的瀏覽器中使用 JavaScript 計算，而不是透過伺服器往返時，您的輸入永遠不會離開這個頁面。您可以透過開啟瀏覽器的網路分頁，在您變更顏色時觀察請求記錄保持空白來驗證這一點。
這三項特質共同消除了雲端工具常見的資料處理疑慮。它們也解釋了為何一個基於瀏覽器的對比檢查工具，可以放心地用於內部品牌色票、機密的客戶工作，以及仍處於保密階段的顏色組合。
為何基於瀏覽器的檢查工具只會看到您的兩個顏色
對比比率是兩個顏色的一項數學性質。給定相同的輸入對，每個正確實作的 WCAG 2.x 對比檢查工具都會回傳相同的數字，因為公式是固定的。每個顏色的相對亮度是從其 sRGB 色道中推導出來的，每個色道都經過線性化處理，然後使用權重 0.2126（紅色）、0.7152（綠色）和 0.0722（藍色）將色道組合成單一的亮度值。比率為 (L1 + 0.05) / (L2 + 0.05)，其中 L1 是較亮顏色的亮度，L2 是較暗顏色的亮度。比率永遠介於完全相同顏色的 1:1 和純黑配純白的 21:1 之間。
因為整個計算僅取決於兩個簡短的字串，所以沒有什麼值得上傳的內容。一個在用戶端執行的檢查工具完全不需要後端——為桌面可及性應用程式提供動力的 JavaScript 可以在任何現代瀏覽器分頁中執行。這就是為什麼使用色彩對比檢查工具來測試品牌顏色、設計標記或實驗性色票，其風險等同於開啟一個計算機：您的瀏覽器分頁負責處理數字，而網路的其餘部分則保持靜默。
一個實用的健全性檢查是：在瀏覽器的開發人員工具開啟狀態下載入頁面，切換到網路面板，然後變更前景顏色。如果面板沒有記錄任何新的請求，您就獲得了一項經驗性的確認：這個工具確實是在本地運算。如果有請求發出，您可以檢查它，準確地看到傳送了什麼內容。
如何安全地使用色彩對比檢查工具檢查對比
色彩對比檢查工具是一個在您的瀏覽器中執行的免費 WCAG 對比檢查工具。您輸入前景顏色和背景顏色，它會立即回傳對比比率，以及每個重要的 WCAG 門檻的通過／未通過標記。
- 設定前景（文字）顏色，可使用色彩選擇器，或直接輸入十六進位值，例如 #111111。這是您打算使用的文字顏色。
- 以相同方式設定背景顏色，例如 #ffffff。這是文字將置於其上的表面。
- 讀取對比比率和 AA／AAA 標記，涵蓋一般文字、大型文字和使用者介面元件。調整任一顏色，直到符合您為該元素設定所需的等級。
因為每個步驟都在您的瀏覽器中進行，所以您工作時不會有任何顏色值離開您的電腦。您可以測試數十種變化、將比率複製到共用文件中，或針對實際的設計稿進行反覆調整，而這些值都不會被記錄在伺服器上。
WCAG 比率涵蓋與不涵蓋的範圍
對比比率是少數完全機械化的可及性檢查之一：輸入兩個顏色，就會得到一個您可以據以行動的數字。WCAG 將該數字整理成特定的門檻，而一個好的對比檢查工具會一次回報所有這些門檻。
| 符合性等級 | 一般文字 | 大型文字 | 使用者介面元件與圖形 |
|---|---|---|---|
| AA（最低） | 4.5:1 或更高 | 3:1 或更高 | 3:1 或更高 |
| AAA（強化） | 7:1 或更高 | 4.5:1 或更高 | 3:1 或更高 |
WCAG 中所定義的大型文字至少為 18pt（24px）的一般字重，或至少 14pt（約 18.66px）的粗體，因為較粗的筆畫在較低對比下較易閱讀。如果某個顏色組合在一般文字上未通過，但在大型文字上通過，您仍然可以將其用於標題——但對於內文、按鈕和表單標籤，請使用對比更強的組合。
對比也是兩個顏色的對稱性質。交換前景和背景會得到相同的比率，因為公式永遠是以較亮顏色的亮度除以較暗顏色的亮度。這種對稱性正是為何這個計算可以在完全不了解您設計的情況下完成——這個工具不需要知道哪個顏色是「文字」、哪個是「背景」，就能給您一個可用的數字。
值得了解的是這個比率無法測量什麼。它純粹是亮度對比檢查，而非色相檢查，因此色相差異極大但亮度相近的兩個顏色——例如紅底綠字——仍然可能未通過。這也是為何 WCAG 警告不應僅依賴顏色來傳達意義；請將顏色與文字標籤、圖示或底線搭配使用。漸層、半透明疊加層，以及置於照片上的文字也不適用於簡單的雙色模型，因為實際的背景會在元素各處產生變化。請對文字可能落於其上的最亮和最暗點進行測試，並特別留意佔位符文字、停用狀態以及纖細的裝飾字體——這些都是常見的失敗點。
黑底白字的完整運算範例
一個運算範例可以展示公式的完整行為。以純黑文字 (#000000) 置於純白背景 (#ffffff) 上為例。#000000 的每個色道線性化後為 0，#ffffff 的每個色道線性化後為 1。因此 #000000 的相對亮度為 0，而 #ffffff 的相對亮度為 1。代入 (L1 + 0.05) / (L2 + 0.05) 得到 (1 + 0.05) / (0 + 0.05) = 1.05 / 0.05 = 21。這是比例尺的上限，這就是為何黑底白字是典型的參考配對，能以極大的餘裕通過每個 WCAG 門檻。
何時該留意您貼上的內容
一個在用戶端執行的對比檢查工具在本質上是安全的，因為頁面本身並不會外洩您的輸入，但有幾個習慣也能讓更廣泛的工作流程保持安全：
- 在您信任的裝置上使用此工具。您輸入的十六進位值會存於頁面的輸入欄位中以及瀏覽器的自動完成記錄中，就像您輸入的任何其他內容一樣。
- 注意共用或公用電腦。在資訊站或借用的筆記型電腦上，請使用私密視窗，或在使用完畢後清除表單，就像處理任何網路表單一樣。
- 將您信任的確切網址加入書籤。WCAG 公式是公開的，所以市面上存在許多合法的工具；請將您已驗證過的那一個加入書籤，以免不小心進入仿冒頁面。
- 將比率而非工具視為真理來源。即使是最安全的檢查工具本質上也只是一台計算機；其背後的可及性標準位於 W3C 的 WCAG 2.1 對比指引，您隨時可以將臨界的結果與已發布的門檻進行交叉比對。
關於解讀數字和避免常見陷阱的更廣泛指引，實用的色彩對比檢查工具提示與常見錯誤指南將逐步說明真實的失敗模式及其修正方法，讓您在可及性上投入的時間能產生最大的影響。
如果您正在權衡各種選項，網頁安全色彩的提示與常見錯誤對此有詳細說明。