文章
從圖像中提取無障礙色彩調色板
一張照片或品牌資產通常包含完整色彩系統的種子。提取這個種子、將其塑造成可用的調色板，然後根據無障礙標準進行驗證，需要三個不同的步驟。本文依序介紹每個步驟：調色板提取的底層工作原理、如何選擇和調整顏色以供實際使用、如何根據 WCAG 閾值檢查對比度，以及如何找出對色盲使用者而言會混為一色的色對。
調色板如何被提取：像素採樣與色彩量化
每張數位圖像都是像素的網格，每個像素在 RGB 等色彩空間中攜帶一個色彩值。調色板提取工具不會逐一檢查每個像素：一張 200 萬像素的照片包含 200 萬個資料點，處理起來會很慢，而且會返回數千種略有不同的色調，而非一個有用的集合。相反，工具以固定間隔對像素網格進行採樣，收集一個代表性子集。然後將該子集輸入色彩量化演算法。最常見的方法使用聚類方法將相似顏色分組，有時稱為中位數切割或 k-means 式分割。演算法根據顏色相似度將每個採樣像素放入固定數量的桶中，然後計算每個桶的平均顏色。結果是一個小列表，通常為 4 到 16 種顏色，這些顏色共同代表圖像中的主要視覺色調。只出現在小型孤立區域的顏色可能被遺漏，這是預期行為，而非缺陷。
從原始主色到可用調色板
調色板提取工具的原始輸出是按頻率排名的顏色列表，但僅憑頻率無法構成調色板。一張森林照片會返回幾種太過相似、無法在 UI 中用作不同強調色的綠色。實際工作是選擇和調整。首先確定一種顏色作為主色：最具特色且最不中性的那個。從其餘顏色中，尋找最多兩種與主色及彼此形成對比的顏色。這些成為你的強調色。其他所有顏色，包括提取工具通常從陰影和中間色調返回的去飽和色調，可以用作背景和邊框的中性色。一旦有了這個粗略的結構，你幾乎肯定需要調整個別值。color-converter 工具讓你以 hex、RGB 和 HSL 格式檢查每種顏色。HSL 在這裡特別有用：你可以保持色相不變，調整明度或飽和度，在不離開同一色系的情況下創造更緊密或更寬鬆的家族。
檢查對比度：可讀文字的 WCAG 閾值
一旦確定了文字和背景的候選顏色，你需要檢查這個組合是否可讀。網頁內容無障礙指南（WCAG）為此定義了對比度。該比率比較兩種顏色的相對亮度：1:1 表示完全沒有對比（相同顏色），21:1 是最大值（黑色在白色上）。WCAG 2.1 AA 級要求正常尺寸正文的對比度至少為 4.5:1，大文字（18pt 或 14pt 粗體）至少為 3:1。AAA 級分別設定了更高的 7:1 和 4.5:1 閾值。你不需要手動計算亮度。關鍵認識是，在良好照明下看起來不錯的色對，在螢幕上可能低於 4.5:1，而指南的存在正是為了這種情況。提取和調整顏色後，請測試你計畫使用的每個文字在背景上的色對。在白色上看起來清晰的中灰色，在你提取的調色板中的淺米色背景上可能完全不達標。
色盲：模擬受影響用戶看到的色對效果
大約每 12 名男性中有 1 人，每 200 名女性中有 1 人有某種形式的色覺缺陷。最常見的類型是綠色弱（對綠色敏感度降低），其次是紅色弱（對紅色敏感度降低）。藍黃色弱（對藍黃色敏感度降低）較為罕見。對於每種類型，視覺系統將某些波長對應到相同的感知顏色，而無色覺缺陷的觀看者則將其視為不同的顏色。對調色板而言，實際問題是在正常視覺下看起來明顯不同的兩種顏色，對色盲用戶來說可能呈現相同的色調，使其無法用於傳達區別，例如只用紅色和綠色來表示成功和錯誤。執行色盲模擬可以讓你看到當受影響的通道被壓縮時調色板的樣子。那些崩潰成幾乎相同的灰色或棕色的色對，就是需要重新考慮的：要麼增加它們之間的明度差異，使對比在沒有色相差異的情況下仍然保持，要麼新增次要提示（形狀、標籤、圖案），使顏色不是唯一的信號。
在本地完成：color-palette、color-blindness 和 color-converter
本文所述的三個步驟都可以在不將圖像或品牌顏色傳送到任何伺服器的情況下完成。color-palette 工具完全在瀏覽器中執行：你放入一張圖像，它在本地採樣像素並以 hex 值返回主色。沒有檔案傳輸。color-converter 工具接受 hex 程式碼，並以 RGB 和 HSL 格式顯示相同的顏色，讓你可以在保持同一色相系列的同時，對明度或飽和度進行有針對性的調整。hex 和轉換後的值都僅存在於頁面中。color-blindness 工具的運作方向則相反：你放入一張圖像，它會在瀏覽器中運算出該圖像的綠色弱、紅色弱和藍黃色弱模擬版本。如果你想檢查的是色票組合而非照片，請先把你的色票匯出或截圖成一張圖像，再放入模擬器。按順序使用這三個工具：從圖像提取、在 color-converter 中調整，然後匯出一張色票圖像並在 color-blindness 中驗證，即可涵蓋上述完整的工作流程。你的圖像在整個過程中都保留在你的裝置上，如果源照片包含未發佈的品牌或客戶未發佈的識別標誌，這一點尤為重要。
本文涉及的工具
常見問題
調色板提取工具通常返回多少種顏色？
大多數工具預設返回 5 到 16 種顏色，儘管許多工具允許你設定數量。返回較少的顏色意味著演算法必須將更多像素分組，這可能會合併不同但相似的色調。返回更多顏色可能會產生難以有效區分使用的近似重複顏色。對於 UI 調色板，6 到 8 種顏色通常是一個實用的起點。
從圖像提取的調色板能自動通過 WCAG 對比度要求嗎？
不能自動通過。照片中的主色通常是具有中等亮度的中間色調，彼此之間的對比度往往在 2:1 到 3:1 的範圍內。達到正文 4.5:1 的閾值通常需要在原始提取結果的基礎上進一步提亮背景值或加深文字值。提取給你提供了一個起點；對比度檢查告訴你需要進行多少調整。
WCAG 對比度是否考慮了色盲？
部分考慮。WCAG 亮度公式基於相對亮度而非色相，因此滿足 4.5:1 的高對比度色對通常對色盲用戶也能保持可區分性，因為明度差異得以保留。然而，具有相似亮度但不同色相的兩種顏色，例如亮度相同的紅色和綠色，可以通過基於亮度的對比度檢查，但對紅色弱患者來說仍然無法區分。執行色盲模擬是正確的方式，可以將色相層面的區分度與對比度比率分開單獨檢查。