Android 上的色彩對比檢查器完全在手機的網路瀏覽器中運作,使用標準的 WCAG 2.x 公式:每個通道從 sRGB 轉換為線性光,再以權重 0.2126(紅)、0.7152(綠)和 0.0722(藍)組合成相對亮度,然後對比率計算為 (L1 + 0.05) / (L2 + 0.05),其中 L1 是較淺顏色的亮度,L2 是較深顏色的亮度。根據 WCAG 2.1(W3C),比率始終落在相同顏色的 1:1 到純黑配純白的 21:1 之間。這些數字直接對應 AA 和 AAA 符合性門檻:正常文字為 4.5:1 和 7:1,大字為 3:1 和 4.5:1,非文字 UI 元件為 3:1。由於整個計算都在瀏覽器中本地執行,Android 使用者可以在手機上測試品牌色票、設計權杖和臨時強調色,無需安裝任何東西,也無需透過網路傳送資料。同一比率也涵蓋了 WCAG 的 UI 元件和圖形物件規則,因此單一檢查即可同時涵蓋文字和互動元素。

為什麼對比在 Android 上很重要
Android 手機的使用情境比任何其他運算平台都要多。它們會在大太陽下被拿出來、透過有色的螢幕保護貼瞄一眼,或由在移動公車上離臉幾吋的人閱讀。在辦公室照明下的桌上型螢幕上看起來沒問題的細小 UI 差異,到了正午的亮面 OLED 面板上可能完全消失。這使得穩定的亮度對比在此類裝置上不再是修飾項目,而是基本的可讀性需求。
WCAG 對比正是為這些情況而存在。根據 W3C 的 WCAG 2.1 規範,正常文字 4.5:1 和大字 3:1 的比率是讓內文和按鈕在各種實際螢幕、眩光和視力條件下保持清晰可辨的最低標準。AAA 進一步提高了要求 — 7:1 和 4.5:1 — 為低視力、白內障或老花眼的使用者提供舒適的閱讀體驗。許多 Android 使用者在不知不覺中屬於其中一類;大約每十二個男性和每兩百個女性中就有一人患有某種形式的色覺缺陷,還有數百萬人在陽光下透過廉價螢幕閱讀,或視力較差。
除了可讀性之外,足夠的對比在許多地區也是法律基準。在美國,《美國身心障礙者法案》(ADA)經常適用於以無障礙為訴求的網站和應用程式,第 508 條要求美國聯邦機構遵守,而歐洲標準 EN 301 549 則直接引用 WCAG 作為公共部門網站的依據。在 Android 上的色彩對比檢查器讓您可以輕鬆驗證您設計或審查的任何 UI 在發布前都能通過這些標準。
三步驟檢查一組配色
在您的 Android 瀏覽器中開啟色彩對比檢查器 — 該工具在您的瀏覽器中本地執行。由於該工具是基於網頁的,它繼承您已在使用的任何瀏覽器,無需從 Play 商店安裝任何東西,也無需維護單獨的 APK。
- 使用選色器或輸入類似 #111111 的十六進位值來設定前景(文字)顏色。
- 以相同方式設定背景顏色,例如 #ffffff,或貼上您應用程式中實際使用的介面權杖。
- 讀取對比率以及正常文字、大字和 UI 元件的 AA/AAA 通過或未通過徽章,然後調整任一顏色直到達到您需要的等級。
整個流程在手機上每組配色只需幾秒鐘,可使用十六進位代碼和選色器 — 哪種方式在觸控螢幕上更快就採用哪種。
WCAG 對比門檻一覽
WCAG 2.x 在所有情境中使用相同的四個門檻,並且相同的數學運算驅動著每一個。一個有用的參考:
| 使用情境 | AA | AAA |
|---|---|---|
| 正常文字 | 4.5:1 | 7:1 |
| 大字(≥18pt 標準,或 ≥14pt 粗體) | 3:1 | 4.5:1 |
| UI 元件、圖示、焦點框 | 3:1 | — |
「大字」規則涵蓋標準字重下 18pt(24px)或以上的任何文字,或粗體時 14pt(約 18.66px)及以上。UI 元件包括表單欄位邊框、自訂核取方塊外框、按鈕邊緣、焦點指示器,以及任何傳達意義的圖示。通過 AA 是標準的法律和無障礙基準;AAA 是在您的設計系統允許時值得追求的更高標準。
一個演算範例,使用該工具套用的相同公式:以 #555555 配 #ffffff。步驟一,將每個通道標準化為 0–1:85/255 ≈ 0.3333,每個通道皆同。步驟二,使用 WCAG sRGB 轉換函數進行線性化(0.3333 高於 0.04045 門檻,因此使用曲線分支):((0.3333 + 0.055) / 1.055)^2.4 ≈ 每個通道 0.0908。步驟三,計算相對亮度 Y = 0.2126·R + 0.7152·G + 0.0722·B。由於三個通道相等,係數總和為 1.0000,因此 Y = 1.0 × 0.0908 = 0.0908。白色背景的 Y = 1.0。步驟四,對比率 = (1.0 + 0.05) / (0.0908 + 0.05) = 1.05 / 0.1408 ≈ 7.46:1。這在 Android 上瀏覽器分頁中、無需上傳的情況下,達到了正常文字的 AAA 門檻 7:1。
對比率的測量範圍與限制
對比率是亮度測量,而不是色相測量。色相差異很大但亮度相似的兩種顏色 — 例如鮮紅配深綠 — 仍然可能無法通過,即使在大多數觀察者眼中看起來截然不同。這也是為什麼在 WCAG 中不建議僅依靠顏色來傳達意義;將顏色與文字標籤、圖示或底線搭配使用,讓訊息在灰階、低品質螢幕或直射陽光下依然能夠傳達。
漸層、半透明疊加層和置於圖片上的文字是更棘手的情況。有效背景顏色在元素上會發生變化,因此單一比率可能隱藏實際的失敗點。安全的做法是針對字母實際可能落於其上的最亮和最暗像素進行測試。佔位符文字、停用狀態和非常細的裝飾性字型是常見的失敗點,值得在手機上仔細檢查,因為螢幕反射會使有效對比低於原始數字所示。
有幾個特性容易被誤解。對比率是對稱的 — 哪個顏色是前景、哪個是背景無關緊要,因為公式是將較淺亮度除以較深亮度。較大、粗體的文字允許較低的比率,因為較粗的筆畫更容易閱讀。通過 AA 是最低標準,而不是上限;在可行的情況下以 AAA 為目標,可為最廣泛的受眾提供舒適的閱讀體驗。
Android 工作流程的實用技巧
有幾個習慣可讓 Android 上的行動對比檢查器更實用。
使用選色器或輸入十六進位值來設定前景和背景顏色。
在橫向和縱向模式、以及淺色和深色系統主題下進行測試。許多 Android 應用程式在作業系統主題切換時會以不同方式呈現相同的色票,因此在淺色模式下通過的配色在深色模式下可能悄悄失敗。如果您的應用程式支援高對比無障礙切換,也請對該介面執行相同的檢查。
注意網址列。在 Android 瀏覽器上,網址列會改變版面高度並裁切可見的畫布。色彩對比檢查器存在於瀏覽器中,因此它會繼承瀏覽器所顯示的一切 — 如果您的瀏覽器提供全螢幕模式,請點擊進入全螢幕模式,並驗證選色器讀取的是即時畫布,而非快取的渲染。
如果您在 Android 上的主要瀏覽器是 Chrome,則該工具使用相同的 WCAG 數學運算,而以 Chrome 為重點的對比檢查器工作流程教學涵蓋了該流程的桌面端,適合在手機和筆電之間切換的設計師。
保持您的色票本地化。一切都在瀏覽器分頁中執行 — 無上傳、無帳號、品牌顏色不會留下裝置記錄。這使得該工具非常適合在個人手機上處理機密的客戶色票,或在可用性測試過程中即時審查螢幕截圖。
關於數學本身,官方規範位於 W3C 的WCAG 2.1 — 對比(最低標準)頁面,該頁面是該工具所用比率、門檻和亮度公式的來源。當比率令您意外時,請隨時在該處交叉核對。
相關閱讀:Android 上的色差計算器:無需應用程式。