一個附帶無障礙對比度檢查的隨機顏色產生器，能透過搭配出乎意料的顏色組合，同時確保它們符合 WCAG 標準，幫你打造出可讀性高的文字與介面元素。每一個顏色，都是從全部 16,777,216 種可能的 24 位元 RGB 組合中抽取出來的，給你新鮮、沒有偏見的選項，避開一成不變的預設色盤。Random Color Generator 會立即產生 HEX、RGB 與 HSL 數值——這些格式，你可以直接貼到 CSS、Figma，或其他設計工具中。不過，隨機產生的顏色，並不會自動就符合無障礙標準。WCAG 2.2 要求，一般文字（14pt 或更小）的最低對比度，必須達到 4.5:1，大型文字（18pt 以上，或粗體 14pt 以上）則需要 3:1。由於這個產生器，並不會保證達到這些比例，你需要在定案設計之前，用一個 對比度檢查工具，逐一驗證每一組配色。
設計師、開發者與教育工作者，會用隨機顏色，來跳脫創意瓶頸、為原型設計提供起點，或示範色彩理論。舉例來說，一位前端開發者，可能會為一張圖表的資料序列，產生五個隨機的 HEX 數值，再逐一對照白色背景，確認可讀性。一位老師，也可能用這個工具，展示 RGB 數值如何對應到看得見的顏色，接著在 HSL 中調整亮度，讓這些顏色適合用在教室的展示畫面上。隨機產生的不可預測性，經常會帶來一些你不會刻意去選擇的配色——例如深青綠色搭配柔和的桃色——卻能通過對比度測試，感覺也很新鮮。由於這個工具，完全在你的瀏覽器本機執行，你可以在不上傳敏感專案細節、也不需要建立帳號的情況下，產生並測試顏色。
為什麼隨機顏色能改善無障礙測試
隨機顏色，會暴露出你平常選色習慣中的缺口，這對無障礙測試來說特別有用。許多設計師，習慣預設使用熟悉的色盤——例如藍色與灰色——但這些顏色，可能無法為視力不佳的使用者，提供足夠的對比度。透過在整個 RGB 光譜中均勻地產生顏色，你會被迫去評估一些平常會忽略的配色，例如亮洋紅搭配暗綠色。這些組合，可能可以通過 WCAG 的對比度標準，同時比那些安全、卻已經用到爛的色盤，展現出更獨特的視覺識別度。
對資料視覺化來說，隨機顏色，有助於避開「彩虹問題」——也就是相近的色相（例如紅色與橘色），在色盲使用者眼中會混在一起的問題。產生一組隨機顏色，再用對比度檢查工具測試它們，能確保每一個資料序列，不論對背景還是對其他資料點，都能清楚地凸顯出來。同樣地，UI 開發者，也可以用隨機顏色，來測試像標籤或大頭貼這類佔位元素，確認它們在不同尺寸與字重下，仍然保持可讀。關鍵在於，把隨機顏色，當成一個起點，而不是最終方案——一定要在正式套用之前，先驗證對比度。
如何為無障礙檢查，產生隨機顏色
- 在瀏覽器中打開 Random Color Generator。
- 把數量欄位，設定成你需要的顏色數量（1 到 100）。對大多數專案來說，5 到 10 種顏色，就足以探索各種配色組合。
- Generate 按鈕，產生一批全新的隨機顏色。每一個色塊，都會顯示 HEX、RGB 與 HSL 數值。
- 點擊一個色塊，複製它的 HEX 數值（例如 #3a9d7f），或是點擊 RGB/HSL 數值，改為複製那些格式。
- 在新分頁中打開 Color Contrast Checker。把你的前景色（例如 #3a9d7f）與背景色（例如 #ffffff），貼進這個工具中。
- 檢查顯示出來的對比度。一般文字，目標至少要達到 4.5:1；大型文字，則 3:1 就足夠了。
- 如果比例太低，調整前景色在 HSL 中的亮度數值（例如，淺色背景搭配深色文字時，調高亮度），再重新檢查一次。
- 針對每一組配色，重複這個流程，直到找出適合你專案、且符合無障礙標準的組合為止。
適合不同工作流程的格式
Random Color Generator 會輸出三種格式——HEX、RGB 與 HSL——各自適合不同的任務。下表比較了它們的使用情境，以及它們如何與無障礙工具搭配使用：
| 格式 | 範例 | 最適合用於 | 無障礙使用情境 |
|---|---|---|---|
| HEX | #3a9d7f | CSS、設計工具（Figma、Sketch）、網頁開發 | 直接貼進對比度檢查工具，或 CSS 的顏色屬性中。大多數工具，都預期輸入的是 HEX 格式。 |
| RGB | rgb(58, 157, 127) | 以螢幕為主的設計（UI、數位藝術）、影像編輯軟體 | 適合用來調整個別色版（例如提高紅色分量，來改善對比度）。有些對比度工具，接受 RGB 輸入。 |
| HSL | hsl(158, 46%, 42%) | 人類容易理解的調整方式、微調顏色 | 為了無障礙需求調整亮度最簡單的方式。淺色背景搭配深色文字時，就調高亮度（反之亦然）。 |
舉例來說，如果一個隨機的 HEX 顏色（#3a9d7f），對白色背景的對比度不合格，把它轉換成 HSL（hsl(158, 46%, 42%)），再調高亮度數值（例如調到 60%），讓它變亮一些。這樣可以在維持色相不變的同時，讓這個顏色變得更容易閱讀。這個產生器，針對每一種格式都提供一鍵複製功能，省去了手動轉換的步驟，在測試過程中能節省不少時間。
什麼時候，無障礙需求不該用隨機顏色
雖然隨機顏色很適合用來探索，但並不是每一種無障礙情境都適用。以下情況，請避免使用隨機顏色：
- 品牌相關內容： 標誌、品牌指南與行銷素材，都需要一致、可辨識的顏色。隨機產生的結果，可能會跑出偏離品牌調性的色相，讓使用者感到困惑。
- 重要警示： 錯誤訊息、警告，以及成功狀態（例如錯誤用紅色、成功用綠色），都依賴文化上的既定聯想。隨機顏色，可能會讓錯誤訊息變成綠色，反而誤導使用者。
- 深色模式： 隨機顏色，在深色背景下，可能表現得不太好。請在淺色與深色模式下，都測試每一組配色，確保可讀性。
- 色盲使用者： 對患有紅色盲或綠色盲的使用者來說，有些隨機組合（例如紅色與綠色），可能難以區分。使用 color difference calculator，來驗證這些顏色是否真的能被區分開來。
對於這些情況，請從一個基礎顏色開始（例如你品牌的主色調），並使用 color palette generator，產生出符合無障礙標準的變化版本。這樣可以在維持一致性的同時，仍然符合對比度的要求。
在實際專案中測試隨機顏色
以下說明，如何把隨機顏色，整合進實際的工作流程中，同時維持無障礙標準：
- 從一個目標開始： 先決定你要設計的是什麼——圖表、UI 原型，還是社群媒體圖片——並記下背景顏色（例如白色、深灰色）。
- 產生 5 到 10 種隨機顏色： 使用 Random Color Generator，建立一批選項。複製每一個顏色的 HEX 數值。
- 檢查對比度： 針對每一種顏色，使用 Color Contrast Checker，對照你的背景色進行測試。淘汰任何不符合 WCAG 比例的顏色。
- 在 HSL 中微調： 對於差一點就符合無障礙標準的顏色，把它們轉換成 HSL，再調整亮度（例如，淺色背景搭配深色文字時，調高 +10%）。
- 放進實際情境中測試： 把符合標準的顏色，貼進你的設計工具（例如 Figma、CodePen）中，並以實際尺寸預覽。一個在檢查工具中通過對比度測試的顏色，放進按鈕或標籤裡，感覺可能還是太過強烈。
- 記錄比例： 保存對比度比例的截圖或紀錄，供未來參考，尤其是當這個專案，需要無障礙合規文件時。
舉例來說，一個資料視覺化專案，可能一開始，先產生 10 種隨機顏色，其中有一半，在白色背景下對比度不合格。透過在 HSL 中調整剩下五種顏色的亮度，你最終可能會得到一套，既獨特又符合無障礙標準的色盤。這種做法，在創意與實用性之間取得平衡，確保你的設計具有包容性，又不必犧牲視覺上的趣味。
若想深入了解，請參閱 Color Contrast Checker Explained: The WCAG Formula。
若想深入了解，請參閱 Random Color Generator Alternative Worth Bookmarking。