無需註冊的免費色彩對比檢查工具是一種基於瀏覽器的工具,可計算任何前景與背景色彩組合的 WCAG 2.x 對比比率,回傳介於 1:1 至 21:1 之間的數值,並顯示 AA 與 AAA 通過或未通過的徽章。精確的比率採用與《網頁內容可及性指引》中相同的公式:每個色彩通道先從 sRGB 轉換為線性光源,再將三個線性通道以加權值組合成相對亮度,紅色為 0.2126、綠色為 0.7152、藍色為 0.0722,接著對比比率以 (L1 + 0.05) / (L2 + 0.05) 計算,其中 L1 為較亮的色彩,L2 為較暗者。由於整個計算過程都在網頁內以 JavaScript 執行,任何時候都不需要建立帳號、進行電子郵件驗證,或下載軟體。設計師可以將品牌十六進制色碼貼入一個欄位,將背景十六進制色碼貼入另一個欄位,即可立即查看該組合是否符合 AA 一般文字 (4.5:1)、AA 大字 (3:1)、AAA 一般文字 (7:1)、AAA 大字 (4.5:1),以及適用於 UI 元件的 3:1 非文字規則,全部顯示在同一個畫面上。
為何基於瀏覽器的對比檢查工具已成為預設選擇
第一代的色彩對比工具是桌面應用程式,需要安裝程式、管理員權限,以及作業系統相容性檢查。基於瀏覽器的工具移除了所有這些麻煩,而無需註冊的檢查工具則進一步消除了另外三層阻力:不需要建立帳號、不需要進行電子郵件驗證、也沒有付費牆阻擋基本的比率計算。這在實務上很重要,因為色彩決策發生在設計師挑選色票的那一刻,而不是在午餐後填寫註冊表單方便的時候。
Lizely 上的色彩對比檢查工具就是圍繞這樣的工作流程所打造。您開啟頁面後,使用原生色彩選擇器挑選前景色,或直接輸入像 #111111 這樣的十六進制色碼,挑選背景色,然後觀看徽章即時更新。由於所有運作都在您的瀏覽器中本機執行,您可以測試機密的品牌配色,完全不必將其送出您的裝置。這使得無需註冊的工具不僅方便,而且在處理尚未公開的產品設計、內部品牌再造,或尚未獲准對外審查的上線前登陸頁面時,也是更安全的預設選擇。
如何在瀏覽器中執行免費的 WCAG 對比檢查
- 在任何現代瀏覽器中開啟色彩對比檢查工具。不需要帳號、電子郵件或安裝步驟即可開始測試。
- 使用色彩選擇器設定前景(文字)顏色,或直接將十六進制色碼(例如 #111111)輸入前景欄位。
- 以同樣方式設定背景顏色,例如輸入 #ffffff 代表白色,或從您要測試的頁面上擷取顏色。
- 在結果面板中讀取對比比率;該數值會介於 1:1 至 21:1 之間,而 AA 和 AAA 徽章會同時立即更新。
- 若徽章未通過,請調整其中一個顏色。亮度的細微變化通常比色相變化產生更大的影響,因此將較暗的顏色調亮幾個色階,或將較亮的顏色調暗幾個色階,通常就能達到閾值。請重新檢查,直到達到您需要的等級。
由於比率是對稱的,交換前景與背景會得到完全相同的數字,因此輸入的順序並不重要。請將結果視為該組合的一種屬性,而非取決於哪個顏色是文字。這也是為何同一個檢查工具可適用於淺色背景上的深色文字、深色背景上的淺色文字,以及圖示和表單欄位邊框等非文字對比檢查。
WCAG 對比閾值一覽
| 符合性等級 | 元素類型 | 最低比率 |
|---|---|---|
| WCAG 2.x AA | 一般文字(18pt 標準字以下,或 14pt 粗體以下) | 4.5:1 |
| WCAG 2.x AA | 大字(18pt 標準字,或 14pt 以上粗體) | 3:1 |
| WCAG 2.x AAA | 一般文字 | 7:1 |
| WCAG 2.x AAA | 大字 | 4.5:1 |
| WCAG 2.x — 非文字對比 (1.4.11) | UI 元件、圖示、圖形物件、焦點指示器 | 3:1 |
這些是對比檢查工具所依據的閾值,直接取自 WCAG 2.x 規範。大字之所以允許較低的比率,是因為較粗、較大的字母較易閱讀。針對按鈕、圖示和表單欄位邊框的 UI 規則採用了一個第三個、獨立的閾值 (3:1),與文字規則不同,這通常是用來抓出眼睛認為「差不多」但公式判定為不合格的細微外框或停用狀態控制項的規則。
比率如何計算 — 簡要說明
數學過程很短,值得走過一次。每個 sRGB 通道先被歸一化為介於 0 到 1 之間的值,接著以 sRGB 曲線進行線性化:小於或等於 0.03928 的值會除以 12.92,其餘的值則在小幅位移後,以 2.4 次方進行處理。三個線性通道以加權值組合成單一的相對亮度,紅色為 0.2126、綠色為 0.7152、藍色為 0.0722。最後,對比比率為 (L1 + 0.05) / (L2 + 0.05),其中 L1 為較亮的色彩,L2 為較暗者。
舉個具體的例子,將 #111111 放在 #ffffff 上。白色經處理後的相對亮度為 1.0。黑色經歸一化後,每個通道約為 17/255 ≈ 0.0667,線性化後每個通道約為 0.0056,因此相對亮度約為 0.0056。代入公式:(1.0 + 0.05) / (0.0056 + 0.05) = 1.05 / 0.0556 ≈ 18.9:1。這遠高於 7:1,因此該組合對任何字級的文字均通過 WCAG AAA,並通過 3:1 非文字規則(適用於任何以該黑色繪製的 UI 元素)。一個免費、無需註冊的檢查工具只需貼上兩個十六進制色碼的時間就能給您這個數字。
實際設計中對比檢查常見的失敗之處
即使設計中的內文通過,常見的 UI 元素仍會踩到規則。表單欄位中的佔位符文字是常見的違規者,因為設計師往往會將其調淡而未檢查比率。停用按鈕狀態中,前景被調向灰色以表示停用,常會在真實背景上低於 4.5:1。纖細的裝飾性字型在粗體能通過的情況下仍可能失敗,因為較細的筆畫在小尺寸下需要更大的亮度差異才能清晰閱讀。
漸層、半透明覆蓋層,以及置於照片背景上的文字,則以另一種方式更加棘手。比率僅描述單一前景與背景的配對,並非涵蓋一系列數值,因此應以字母可能落於的最淺和最深的像素進行測試,而不僅僅是平均顏色。對於會變更背景顏色的懸停與焦點狀態也是如此:在上線前,請將新的配對通過檢查工具檢驗。色彩本身也不應承載語意,因為比率衡量的是亮度而非色相。兩個色相截然不同但亮度相近的顏色(例如飽和紅色與飽和綠色)仍可能不合格,即使對某些觀看者而言看起來很分明。請為任何色彩信號搭配文字標籤、圖示或底線。
檢驗色彩對比的法律與實務原因
足夠的亮度對比是讓數百萬閱讀時受視力低下、白內障、色覺缺陷影響的人,或在明亮陽光下使用廉價螢幕的人,能夠清楚閱讀內文、按鈕和錯誤訊息的原因。這在許多司法管轄區也是法律要求。《美國身心障礙者法案》常被應用於美國的網站,《508 條款》強制美國聯邦機構遵守,而歐洲標準 EN 301 549 則直接引用 WCAG 作為公共部門網站的依據。將對比視為設計事後考量,將使產品面臨投訴、修復成本以及失去的受眾觸及,這些都不是任何色票資料庫所能換來的。
免費、無需註冊的檢查工具同樣有實務上的優勢:不需要安裝、不需要為承包商進行設定,也無需為了測試單一配對而訂閱服務。至於涵蓋焦點順序、鍵盤處理和螢幕閱讀器語意等更深入的審查,仍需進行完整的可及性審核,但對於日常問題「這段文字在此背景上是否通過 WCAG」,色彩對比檢查工具本身就已足夠。根據WCAG 2.1,上表所示的相同閾值仍然適用,這表示免費的瀏覽器工具與企業級審核平台,正以完全相同的公式回答完全相同的問題。
如果您正在權衡各種選擇,免費無需註冊的色彩差異計算工具:快速入門對此有詳細說明。