和諧的調色盤與符合 WCAG 的對比是兩個不同的問題,而調色盤產生器只解決前者。調色盤產生器接受一個基準顏色 —— 以 HEX 形式輸入(例如 #3b82f6)或從色塊中挑選 —— 並套用經典的色輪數學來產生互補色、類似色、三等分、四等分、分裂互補色或單色組合。每個色塊都會以 HEX、RGB 與 HSL 三種格式顯示,點擊即可將 HEX 複製到剪貼簿。然而,這並不保證文字顏色在其背景上能達到 AA 或 AAA 的可讀性標準。無障礙性是特定前景與背景配對之間的對比比例問題,而 WCAG 2.2 的閾值並非和諧公式所能編碼的。實際的做法是把產生器當作工作流程中的「和諧」那一半,再用對比檢查工具搭配處理「無障礙」那一半。本文要談的正是這個組合:如何使用產生器、哪些配色方案較容易與 WCAG 比例相容,以及如何在 UI 上線前逐一驗證每一組配對。
調色盤產生器實際計算的是什麼
這個產生器運作於 HSL 色彩空間,其中色相是一個 0–360° 的圓,飽和度與亮度則是各自獨立的維度。這是刻意的設計:旋轉色相能在保留顏色感知氛圍的同時,讓顏色之間的關係保持可預測。互補配對是色相加 180°,三等分組合落在 0°、120° 與 240°,類似色群則聚集在 ±30° 之內。色相的循環處理也正確 —— 350° + 30° 會解析為 20°,而不是 380° —— 因此位於色輪邊緣的調色盤在數學上仍然是合理的。
這對無障礙性有一個特別重要的意義:HSL 讓你可以單獨處理亮度,而亮度正是 WCAG 對比最終取決的維度。兩個顏色可能恰好落在完美的互補角度,卻仍無法通過 AA,因為它們的亮度值太過接近。了解亮度是你可以獨立於色相單獨調整的槓桿,正是讓產生的調色盤能針對對比進行微調的關鍵。若想進一步了解本工具所遵循的和諧慣例背景,標準參考資料是 維基百科上的色彩理論條目。
從單一基準顏色建立調色盤
透過 調色盤產生器 最快的路徑有六個步驟,完成後的結果可直接放入 CSS 或設計檔案中。
- 在瀏覽器中開啟調色盤產生器。
- 挑選一個基準顏色 —— 點擊色塊選擇器,或輸入像 #3b82f6 這樣的 HEX 值。
- 從下拉選單中選擇配色方案 —— 互補、類似、三等分、四等分、分裂互補,或單色。
- 查看顯示的色塊;每個色塊下方都會標示 HEX、RGB 與 HSL。
- 點擊任一色塊,即可將其 HEX 複製到剪貼簿。
- 將 HEX 貼到你的 CSS、Figma 檔案、品牌風格指南,或任何需要該顏色的地方。
由於一切都在瀏覽器中透過用戶端 JavaScript 執行,你輸入的顏色不會被上傳、儲存或傳送至任何伺服器,也不需要任何帳號。你可以放心地反覆嘗試,不用擔心進行中的調色盤會留在後端 —— 當你正在試驗多個基準顏色、尚未定案品牌方向時,這一點格外重要。
為什麼和諧的調色盤無法保證可及的對比
色彩和諧是色相之間的關係;無障礙性則是在有顏色背景之上,亮度之間的關係。WCAG 2.2 規範中,一般內文文字對其背景的最低對比比例為 4.5:1,大型文字(18pt 或 14pt 粗體)則為 3:1,這是依據 WCAG 2.2 所訂。這些比例是根據相對亮度計算而得,而相對亮度是 sRGB 編碼通道值的函式,並非由色輪上的色相位置決定。一個以 120° 間隔的三個飽和色彩構成的三等分調色盤,完全可能出現其中兩個色塊的亮度值僅相差幾個百分點 —— 在和諧上完美無瑕,作為文字時卻難以辨讀。
這並非產生器的缺陷。產生器的任務是和諧:產出看起來相互契合的顏色。驗證任何特定配對是否符合 WCAG,則是色輪數學無法執行的獨立步驟。慣常的做法是:以產生器建立品牌系統,再搭配專門的對比檢查工具,逐一檢視所有將出現在正式 UI 中的文字與顏色組合。將兩者視為單一功能 ——「一個調色盤就能搞定無障礙」—— 正是多數「color palette generator accessibility」(調色盤產生器 無障礙)登陸頁面會落入的陷阱。
哪些配色方案天生適合 WCAG 友善的 UI
有些方案在無障礙性上讓你擁有更高的起點,原因單純在於它們在整個調色盤中分配亮度的方式。下表摘要說明每種方案與 WCAG 對比工作之間的關係。
| 方案 | 在色輪上的運作方式 | 對 WCAG 對比的實務備註 |
|---|---|---|
| 互補色 | 兩個色相相距 180° | 色相對比最高,但亮度各自獨立 —— 仍須逐一驗證每組配對 |
| 類似色 | 三個色相落在 ±30° 內 | 色相分佈柔和;色塊可能共享相近的亮度,不利於文字對比 |
| 三等分 | 三個色相相距 120° | 平衡且鮮明;飽和的中間色調彼此對照時經常無法通過 AA |
| 四等分 | 四個色相相距 90° | 變化豐富;需要驗證的配對更多,而不是更少 |
| 分裂互補 | 180° 加上兩側各 30° | 比直接互補更柔和;稍微更容易平衡亮度 |
| 單色 | 單一色相,亮度分級 | 對文字對比最安全的方案 —— 唯一的變數就是亮度 |
值得注意的模式:單色調色盤在建構上就最為 WCAG 友善,因為唯一改變的就是亮度,而亮度正是對比比例所讀取的依據。互補、三等分與四等分的調色盤對於強調色、圖示與行動呼籲按鈕等用途特別有價值 —— 在這些介面上,亮度可以刻意推向極暗或極亮,以跨越 4.5:1 的門檻。最健全的品牌系統會用彩色方案處理強調色,再以單色階處理中性介面 —— 這正是下一節將逐步說明的工作流程。
以無障礙為優先的調色盤工作流程
一個最終能交付無障礙 UI 的工作流程,通常看起來如下。
- 在調色盤產生器中選定品牌色,並以此作為基準。
- 產生互補或分裂互補的方案,用以定義按鈕、連結與圖示的強調色。
- 將方案切換為單色,作為中性色階 —— 背景、邊框、hover 狀態、陰影。
- 為每一組文字/背景配對開啟 對比檢查工具:內文文字對背景、連結文字對背景、按鈕文字對按鈕背景、輸入框的提示文字對輸入框背景。
- 對於任何未通過的配對,調整文字或背景色塊的亮度 —— 而不是色相 —— 然後重新檢查。HSL 讓這件事變得輕而易舉:改變 L 值,貼上新的 HEX,再次驗證。
若想更深入了解 WCAG 對比比例如何計算,以及 4.5:1 與 3:1 閾值的由來,請參考 色彩對比無障礙的實用指南。
這個兩步驟做法能避免和諧與無障礙互相衝突。產生器的任務是確保你的顏色彼此契合;對比檢查工具的任務是確保讀者真的能讀懂這些顏色。兩者搭配使用,才能涵蓋許多「color palette generator accessibility」工具宣稱一鍵搞定、卻很少真正做到的事 —— 因為和諧與對比本質上是兩個不同的問題:前者關乎顏色在色輪上的關係,後者關乎光線透過特定前景/背景配對抵達眼睛的多寡。
想進一步了解,請參閱 無障礙對比比例:公式與閾值。