W3C CSS Color 4 的簡易 CMYK 轉 RGB 公式,使用 R = 255 × (1 − C) × (1 − K)、G = 255 × (1 − M) × (1 − K) 以及 B = 255 × (1 − Y) × (1 − K) 將任四個油墨百分比轉換成 8 位元 sRGB 色彩,而這個產生的十六進位值是 WCAG 對比檢查器唯一能讀取的東西。CMYK 是一個減色、與裝置相關的模式,由印表機使用,其中每個百分比代表紙面上青色、洋紅色、黃色或黑色油墨的面積覆蓋率。RGB 是一個加色模式,由螢幕使用,其中 0 到 255 之間的每個整數描述紅色、綠色或藍色光的亮度。由 WCAG 定義的無障礙對比完全是在 sRGB 中計算的,因此沒有任何 WCAG 公式可以直接接受 CMYK 輸入。這個缺口正好說明了為什麼 CMYK 轉 RGB 的轉換步驟總是位於任何無障礙檢查之前,無論來源是品牌手冊、供應商打樣、印表機報價,還是從 Photoshop 檔案中複製出來的色樣。瀏覽器型的 CMYK 轉 RGB 工具採用上述簡易公式,因此你輸入百分比的瞬間就能得到一個可用的十六進位代碼,可直接放入對比檢查器中使用。

cmyk to rgb accessibility contrast
cmyk to rgb accessibility contrast

「CMYK 轉 RGB 無障礙對比」真正的含義

這個詞組將三件事串在一起:以 CMYK 油墨百分比表示的印刷色彩配方、螢幕上的 RGB 近似值,以及該螢幕色彩與背景之間的 WCAG 對比檢查。重點在於確保你打算用於網頁介面、PDF 表單、HTML 電子郵件或海報預覽中的印刷衍生色彩,在顯示器上呈現時仍然清晰可讀。

CMYK 和 RGB 以不相容的方式描述色彩。CMYK 是一個與裝置相關的減色模式,由印表機使用,其中每個百分比代表給定紙張面積上青色、洋紅色、黃色或黑色油墨的覆蓋量。RGB 是一個加色、與裝置無關的模式,由瀏覽器、作業系統和顯示器使用,其中每個色道描述紅色、綠色或藍色光的強度。由 WCAG 定義的無障礙對比完全是在 sRGB 色彩空間中計算的,因此要評估 CMYK 色彩的可存取文字,你必須先將其轉換為 RGB 值,然後將該值輸入對比檢查器。CMYK 轉 RGB 工具可一鍵將四個印刷油墨百分比轉換為單一 sRGB 十六進位值,然後你可以將其放入色彩對比檢查器中與另一個色彩進行測試。如需更廣泛地了解每種色彩模式在專案中何時適用,CMYK 與 RGB 印刷指南更深入地涵蓋了周邊的決策考量。

W3C 簡易裝置 CMYK 公式

此工具遵循 W3C CSS Color 4 的「簡易」裝置 CMYK 後備機制——這是規格在 CMYK 色彩沒有相關聯 ICC 設定檔時使用的相同計算方式。該轉換將每種油墨獨立處理,將黑色作為每個色道的乘數併入,然後將結果從 0 到 1 的浮點數重新調整為 0 到 255 的整數。針對每個輸入,將四個百分比除以 100 標準化為 0–1,然後計算每個顯示色道為 255 × (1 − ink) × (1 − K),任何超過 255 的值都會被限制為 255。半偶數捨入將每個結果序列化為整數,使計算結果與 W3C 火磚紅範例逐位元組相符。W3C CSS Color 4 工作草案記錄了這個確切的後備機制以及實作應遵守的端點。

計算範例:取 CMYK = (15%、75%、10%、25%)。標準化後,C = 0.15,M = 0.75,Y = 0.10,K = 0.25。

  • R = 255 × (1 − 0.15) × (1 − 0.25) = 255 × 0.85 × 0.75 = 162.5625,四捨五入為 163。
  • G = 255 × (1 − 0.75) × (1 − 0.25) = 255 × 0.25 × 0.75 = 47.8125,四捨五入為 48。
  • B = 255 × (1 − 0.10) × (1 − 0.25) = 255 × 0.90 × 0.75 = 172.125,四捨五入為 172。

結果為 rgb(163, 48, 172),即 #A330AC,一個飽和的紫色。你可以透過直接將百分比輸入 CMYK 轉 RGB 工具來確認相同的數字。在此情況下沒有任何中間乘積超過 1,因此沒有觸發限制機制,公式的簡單乘積形式就已足夠。

在瀏覽器中將 CMYK 轉換為 RGB

如果你有來自設計檔案、品牌規格或印刷報價的四個油墨百分比,前往螢幕就緒色彩的最快路徑是一次瀏覽器操作。

  1. 開啟 CMYK 轉 RGB 工具。
  2. 移動青色、洋紅色、黃色和黑色滑桿,使其匹配介於 0 到 100 之間的四個百分比。
  3. 讀取色樣旁顯示的三個更新後的 8 位元 RGB 色道(0–255)。
  4. 從十六進位欄位複製六位數的十六進位值。
  5. 將該十六進位值貼入對比檢查器中,與你預定的背景或文字色彩進行比對。

每個步驟都在瀏覽器中本機完成。該工具不會載入 ICC 設定檔,也不會將你的百分比傳輸到伺服器,因此在轉換時,供應商和品牌敏感的色彩配方會保持私密。

從 RGB 到無障礙對比分數

WCAG 2.x 為文字相對於其背景定義了最低對比比例:AA 級的一般內文為 4.5:1,AAA 級為 7:1,AA 級的大型文字為 3:1,AAA 級的大型文字為 4.5:1。所有這些都是使用相對亮度公式在 sRGB 中計算的,這就是為什麼 CMYK 轉 RGB 步驟必須先進行——對比檢查器無法直接讀取 CMYK 值。一旦你有了十六進位代碼,請將其與你的背景十六進位值一同貼入 色彩對比檢查器。檢查器會傳回該比例,針對一般和大型文字標示 AA 和 AAA 的通過或未通過狀態,並即時預覽組合。如果比例太低,你可以返回 CMYK 工具,微調滑桿,然後重新測試,直到分數可接受為止。

面向簡易(瀏覽器工具)支援 ICC 設定檔的軟體
方法W3C CSS Color 4 後備公式來源/目的地設定檔對應,附帶渲染意圖
速度瞬間完成,完全在瀏覽器中數秒鐘,需要設定檔資產和支援色彩管理的作業系統
準確度sRGB 螢幕色彩的近似值對校準裝置的印刷精準度
典型用途UI 模型、調色盤預覽、無障礙健全性檢查印刷打樣、合約色彩、品牌規格執行
需求僅需四個 CMYK 百分比ICC 設定檔、校準顯示器、支援設定檔的應用程式

對於任何目標是在印刷前篩選掉明顯不佳對比候選項的任務來說,簡易路徑是正確的選擇;而對於印刷色彩即為最終交付成果的任務,支援設定檔的路徑則是正確的選擇。

可預測的熟悉端點

由於公式非常簡單,少量端點的行為是可預測的,值得記住作為健全性檢查:

  • CMYK (0, 0, 0, 0) — 完全沒有油墨 — 產生 rgb(255, 255, 255),即純白色。
  • CMYK (0, 0, 0, 100) — 滿黑色 — 產生 rgb(0, 0, 0),即純黑色。
  • CMYK (0, 100, 100, 0) — 滿洋紅和黃色,無青色,無黑色 — 產生 rgb(255, 0, 0),即純紅色。
  • CMYK (100, 0, 0, 0) — 僅滿青色 — 產生 rgb(0, 255, 255),即青色。
  • CMYK (100, 100, 0, 0) — 滿青色和洋紅 — 產生 rgb(0, 0, 255),即藍色。

這些與 W3C 規格所指出的端點相符,並為你提供一個快速的心智檢查,在你信任輸出結果進行對比決策之前,確認輸入以正確的順序和範圍傳遞到工具中。

簡易轉換何時足夠,何時不足

簡易後備機制快速、可預測,對於若干實際任務已足夠好:需要知道印刷色彩在螢幕上「看起來大致正確」的粗略介面模型、整份簡報中的調色盤比較,以及目標是在任何印刷發生之前篩選掉明顯不佳對比候選項的無障礙健全性檢查。該工具將自身標示為近似值而非印刷打樣,這個標示很重要。真實的 CMYK 是與裝置相關的。印刷機、油墨組、紙張類型、網點擴大、渲染意圖和嵌入的 ICC 設定檔都可能使印刷色彩產生明顯偏移。支援設定檔的應用程式——Photoshop、Illustrator、Acrobat、InDesign——在 CMYK 和 RGB 之間轉換時會套用來源和目的地 ICC 設定檔。瀏覽器工具不會載入設定檔,因此對於任何影響合約色彩、客戶核准或印刷輸出的決策,請保留原始 CMYK 值,向你的印表機請求正確的輸出設定檔,並透過支援設定檔的軟體在已校準的顯示器上配合實體打樣來執行轉換。

具體就無障礙工作而言,影響通常較輕微。簡易公式是未設定檔的印刷色彩在典型 sRGB 顯示器上呈現方式的合理預測指標,因此它能在早期就捕捉到最嚴重的對比失敗。在捨入邊界處的一兩個 RGB 點差異很少會將對比比例從「通過 AA」推到「未通過 AA」。當結果處於邊緣時,正確的下一步是使用支援設定檔的轉換來確認十六進位值,而不是假設簡易答案是最終結果。

實用的 CMYK 轉 RGB 無障礙工作流程

綜合以上內容,以下是檢查印刷衍生色彩之螢幕無障礙性的最低可行工作流程:

  1. 從你的品牌手冊、供應商規格或印刷檔案中讀取四個 CMYK 百分比。
  2. 開啟 CMYK 轉 RGB 工具,將青色、洋紅色、黃色和黑色設定為那些數值。
  3. 記下顯示的十六進位代碼。
  4. 開啟色彩對比檢查器,一邊放入該十六進位值,另一邊放入你預定的背景。
  5. 確認比例至少符合 WCAG AA——一般文字為 4.5:1,大型文字為 3:1。
  6. 如果未通過,請返回步驟 2 並進行調整——提高黑度會同時調暗所有色道,通常會改善在淺色背景上的對比,而降低飽和度並同時增加黑色傾向於在保持色相的同時提升比例。
  7. 對於生產印刷,請勿將原始 CMYK 值替換為轉換後的十六進位值。十六進位值僅供螢幕參考。

最後一點很重要:許多設計師因為將轉換後的十六進位值儲存到可印刷檔案而吃了虧。CMYK 是印刷輸出的語言,而 RGB 與十六進位是螢幕的語言。將兩者區分開來,才能同時保護印刷成果和相同品牌的螢幕無障礙性。

如果你正在權衡選擇,如何在 PowerPoint 投影片中檢查色彩對比對此進行了詳細探討。