WCAG 對比度檢查透過幾個簡單的步驟完成。沒有任何資訊離開你的瀏覽器。
- 你輸入一個前景色和一個背景色。工具將 hex、rgb()、hsl() 或命名 CSS 色彩解析為紅、綠、藍通道值。
- 每個 RGB 通道透過 sRGB 傳遞函數進行線性化，將經過伽瑪編碼的顯示值轉換為線性光強度。
- 線性值按照人眼對每個通道的敏感度加權——紅色 0.2126、綠色 0.7152、藍色 0.0722。其總和即為該色彩的相對亮度。
- 對比度計算公式為 (L1 + 0.05) ÷ (L2 + 0.05)，其中 L1 是較亮色彩的亮度，L2 是較暗色彩的亮度。額外的 0.05 確保公式對純黑色同樣有效。
- 將計算出的比值與 WCAG 閾值比較：AA 一般文字需要至少 4.5:1，AA 大型文字需要 3:1，AAA 一般文字需要 7:1，AAA 大型文字需要 4.5:1。大型文字指至少 18pt 或 14pt 粗體。
FAQ
關於 WCAG 對比度檢查的常見問題。
AA 和 AAA 有什麼區別？
AA 是大多數 Web 內容的最低合規等級。它要求一般文字的對比度至少為 4.5:1，大型文字為 3:1。AAA 是更高的標準，要求一般文字 7:1，大型文字 4.5:1。你可能會針對新聞網站正文等關鍵內容瞄準 AAA，同時在整個設計中採用 AA。由於品牌色彩很難在所有地方都滿足 AAA，許多團隊的目標是全平台達到 AA，並在可能的地方將關鍵文字提升至 AAA。
WCAG 中什麼是「大型文字」？
WCAG 2.x 將大型文字定義為常規字重至少 18 點（24px），或粗體字重至少 14 點（約 19px）。屬於字型的符號和圖示遵循相同的閾值。如果你不確定 UI 應使用哪個閾值，請同時檢查兩者——AA 大型的標準較低（3:1），因此大多數未通過 AA 一般的色彩對在文字足夠大時實際上能通過 AA 大型。
為什麼我的色彩對通過了 AA 大型卻未通過 AA 一般？
因為 AA 大型只需要 3:1 的比值，而 AA 一般需要 4.5:1。WCAG 為大型文字設定了較低的閾值，因為較大的字元即使對比度較低也更容易閱讀。例如，比值為 4.0:1 的色彩對可以通過 AA 大型（3:1 閾值），但無法通過 AA 一般（4.5:1 閾值）。這在白色背景上使用較淺的品牌色作為前景時非常常見。
我可以僅依賴此工具進行無障礙稽核嗎？
本工具只檢查一項內容——兩種純色之間的 WCAG 2.x 對比度。真正的無障礙涉及更多方面：焦點指示器、字型大小和字重、僅透過色彩傳達資訊，以及螢幕閱讀器和縮放工具的相容性。請將本對比度檢查與其他稽核方法結合使用，以全面了解你應用程式的無障礙狀況。
輸入支援哪些色彩格式？
你可以貼上 3、4、6 或 8 位 hex 代碼（帶或不帶 #）、使用傳統逗號語法或現代空格分隔語法的 rgb() 和 rgba() 值、使用任意標準色相單位（deg、rad、grad、turn）的 hsl() 和 hsla()、hsv()、hwb()，以及 CSS Color Module Level 4 規範中的任意 150 個命名 CSS 色彩。色彩完全在你的裝置上解析。