對比度檢查工具無法直接讀取十六進位代碼——它需要每個顏色通道的十進位位元組值,這就是為什麼將十六進位轉換為 RGB 是任何無障礙對比度工作流程中的標準第一步。CSS 標記法 #RRGGBB 會依通道拆分為兩個十六進位數字:紅色優先、綠色次之、藍色第三,這些配對會成為 WCAG 相對亮度計算實際運算時所使用的 0–255 整數。像 #RGB 這種簡寫形式,只是在進行相同轉換之前先將每個位元組重複一次,因此 #1a2 會展開為 #11aa22,並解析為通道位元組 17、170 和 34。半透明的色票會額外加入一個 alpha 位元組,這個位元組不會改變三個通道值,但當預覽疊在真實背景上時,它仍然是重要的。當正規化後的通道值攤在眼前,無障礙對比度工作的剩下部分就是把兩種顏色代入 WCAG 2.x 相對亮度公式,而不是用肉眼去比對色塊。本文會逐步說明這第一步——從 CSS 十六進位顏色中取得可靠的紅、綠、藍與選用的 alpha 值——方法是使用 HEX 轉 RGB 轉換器,讓下游的對比度運算能從正確的數字開始。
執行對比度計算本質上是一項數學工作,而不是一項感知工作。WCAG 2.x 相對亮度公式會將每個 sRGB 通道正規化,把位元組除以 255,再對非線性通道取 2.4 次方,接著形成加權總和:0.2126 × R + 0.7152 × G + 0.0722 × B。要把這些數字代入,你需要把兩種顏色以實際整數表示,而不是簡潔的十六進位配對。許多線上檢查工具可以直接接受十六進位字串,但它們在進行運算之前,內部仍然會執行相同的 base-16 解碼。預先完成轉換,讓你有機會抓出打錯字的地方、查看四捨五入後的 rgba() 輸出,並在計算比值之前先確認通道順序符合預期。
為什麼對比度檢查工具無法跳過 RGB 步驟
每個 WCAG 風格的對比度工具——無論是內建的瀏覽器開發者工具面板、程式庫輔助函式,或專屬的檢查器——最終都需要 0 到 255 之間整數形式的紅、綠、藍。設計師與開發者傾向於以十六進位思考,因為 CSS、設計代碼以及大多數品牌規範都是這樣儲存顏色的,但十六進位是一種標記法,而不是公式能夠吸收的數字格式。十六進位轉 RGB 介於「我從設計系統拿到一個代碼」和「我有兩種可以比較的顏色」之間。跳過這一步通常代表必須信任對比度工具內部解析器的處理,萬一某個通道被誤讀,也沒有任何可見的稽核紀錄。
解碼錯誤往往來自幾個可預見的地方:漏掉前置井號、把位元組用錯誤的形式重複一次、不小心把八位數十六進位當成 alpha 開頭的 ARGB 排列,或是貼上的值夾帶空白字元。轉換器會針對上述每一種情況,回傳明確的錯誤訊息,而不是默默猜測,這在無障礙至上的流程中才是正確的行為。如果你的輸出顯示 rgb(17, 170, 34),但你預期的是 rgb(34, 17, 170),這項調換會在通道位元組中先顯現出來,然後你才會把顏色交給對比度計算工具。
餵入對比度檢查的十六進位形式
CSS 十六進位標記法有四種有效長度,每一種在解析器完成後都會產生相同的紅/綠/藍結構。了解手上是哪一種形式,將決定你是否該預期輸出中包含最後一個 alpha 位元組,以及預覽在與其他東西比較之前是否需要一個純色背景。
| 輸入形式 | 範例 | 位數長度 | 是否含 alpha? | 通道展開 |
|---|---|---|---|---|
| #RGB | #1a2, #0f8 | 3 | 否 | 每位數重複(因此 #1a2 變成 #11aa22) |
| #RGBA | #1a2c, #0f08 | 4 | 是 | 每位數重複,alpha 仍保持在最後(#0f08 展開為 #00ff0088) |
| #RRGGBB | #11aa22, #1f3a5b | 6 | 否 | 逐位元組解析,無額外步驟 |
| #RRGGBBAA | #11aa2280, #000000ff | 8 | 是 | 逐位元組解析,alpha 位於第七與第八位元 |
三位數與六位數的輸入在預覽中會被視為完全不透明,即使實際上只有四位數與八位數的形式才明確帶有 alpha 位元組。對比度計算的數學一律使用三個不透明通道,因此無障礙工作的實務原則很直觀:如果你的代碼是四位數或八位數,在計算比值之前,請先把 alpha 與通道分開,並決定你要對哪個表面進行測試。
為無障礙對比度工作將十六進位轉換為 RGB
完整程序會在你的瀏覽器中本機執行,只需幾秒鐘,最後你會拿到一個正規化的十六進位字串,以及對比度計算工具會讀取的位元組層級通道值。
- 把以 # 開頭的 CSS 十六進位顏色貼到輸入欄位。可接受的形式為 #RGB、#RGBA、#RRGGBB 或 #RRGGBBAA,僅可使用 0–9 的數字與 A–F 的字母。大寫與小寫字母等效,但前置井號是必要的,且值內的任何空白字元都會被拒絕。
- 讀取右側正規化為小寫的十六進位輸出,以及 CSS rgb() 或 rgba() 字串。確認長度符合預期:不透明時為 6 位數,含 alpha 時為 8 位數。
- 讀取個別通道位元組(0, 17, 34, 51, …, 255),包含紅、綠、藍,以及適用的最後一個 alpha 位元組。這些就是你將重複使用的整數。
- 若你的代碼是四位數或八位數,請留意 alpha 顯示。十六進位的 80 會儲存為 128,並顯示為約 0.502 的不透明度;00 表示正好 0,FF 表示正好 1,百分比會四捨五入至小數點後兩位。
- 使用即時預覽來抓出明顯的通道順序錯誤(例如預期是綠色卻變成紅色),接著再把通道位元組交給你的 WCAG 對比度檢查器來計算比值。
若輸入為空或無效,轉換器會以錯誤訊息取代先前的結果,而不是顯示陳舊的成功值,因此你絕不會看到不屬於目前代碼的通道位元組。
Alpha、半透明代碼與背景
半透明顏色會讓無障礙測試變得複雜,因為 WCAG 亮度公式中並不包含 alpha——只有紅、綠、藍會納入。半透明的前景疊在已知背景上會產生單一的可視顏色,而這個可視顏色才是使用者(以及對比度量測)實際看到的。CSS 的 #RRGGBBAA 慣例將 alpha 放在最後,因此即使來源代碼帶有 alpha 位元組,在白頁上的不透明紅色在公式中仍然是 rgb(255, 0, 0)。
如果你準備測試半透明的前景,請先決定它在實際環境中會疊在哪個背景上。把顏色與該背景進行合成——例如把 rgba(R, G, B, A) 疊在純色表面上——然後使用合成後的位元組進行對比度計算。轉換器會顯示 alpha 位元組與 rgba() 字串,讓合成步驟可以被稽核,但它不會替你挑選背景。當與協作者或設計代碼共享顏色時,請保留正規化的八位數十六進位,而不要只留下四捨五入後的小數 alpha,因為位元組比小數點後三位所能保證的還更精確。
將通道交給真正的 WCAG 檢查器
通道解碼完成後,無障礙對比度步驟就是另一項獨立工作。顏色對比度檢查器接受兩種顏色的十六進位或 rgb() 形式,並依 WCAG 2.x AA 與 AAA 門檻,針對一般文字與大型文字回報比值。你可以在 對比度檢查器範例指南中閱讀詳細的 WCAG AA 與 AAA 配對範例,或在樣式表中使用 CSS 端對比比值工作流程以內嵌方式套用相同流程。如果是反方向作業的團隊——也就是從品牌手冊的 RGB 開始——反向轉換可使用 RGB 轉 HEX。無論你採用十六進位轉 RGB 還是 RGB 轉十六進位,對比度量測都是將同一個 WCAG 比值套用於兩個不透明顏色,而兩端的通道層級精確度才能讓結果值得信賴。
預檢視圖無法告訴你的事
即時預覽只能確認解析器已正確讀取位元組,但它並不會測量對比度。同一組 sRGB 三元組,在未校準的筆記型電腦、陽光下的手機、具備特定瀏覽器色彩設定檔的寬色域螢幕,或螢光燈下的印刷打樣上,看起來可能都會不同。預檢視圖能抓到通道順序調換與明顯的打錯字——也就是鍵盤貼上作業所引入的那些錯誤——僅此而已。請將它視為健全性檢查,而不是用來判定兩種顏色對使用者而言是否足夠不同的最終裁決。
轉換器刻意只停留在 CSS 規範範圍內。它不會解析像 rebeccapurple 這類具名顏色、不會讀取 hsl()、lab()、lch() 或 color(),也不會解讀某些 Android 或 .NET 慣例中 alpha 開頭的八位數 ARGB 排列。針對上述每一種情況,正確的做法是先將來源格式轉為 CSS 十六進位,再執行通道解碼。CSS 十六進位值是 sRGB 數字,而不是 Pantone、CMYK 或印刷油墨配方;因此當你對應印刷色樣時,同樣的注意事項也適用——這些數字適合與螢幕比較,而非印刷打樣。
最後,這項轉換完全在你的瀏覽器內執行。你貼上的字串永遠不會被上傳,當品牌顏色與色盤代碼仍處於禁運狀態,或被視為機密的設計系統資產時,這點格外重要。請把從工具中抽出的通道位元組視為你的交接物:相同的數字,沒有四捨五入造成的意外,準備好送進決定該配對是否能通過 AA、AAA,或是需要再迭代一次的 WCAG 比值計算。