無障礙色彩系統 是做什麼的？
目的
無障礙色彩系統技能提供了一套建立色彩調色盤的方法論，使其在視覺上協調一致且功能上無障礙。它超越純美學的色彩選擇，建立結構化的色彩階層、對比度安全的搭配以及語義應用，確保所有使用者（包括視覺障礙者）都能感知內容。
使用案例
- 建立新品牌的數位色彩形象。
- 稽核並修復現有網站與色彩相關的無障礙問題。
- 設計深色/淺色模式主題。
- 定義用於回饋的語義色彩（成功、錯誤、警告）。
何時不應使用
- 藝術主導的體驗： 當顏色純粹用於表達且不攜帶功能資訊時（儘管仍鼓勵無障礙）。
- 硬編碼的舊版應用程式： 當技術債務使得無法實作變數系統時（應專注於點修復）。
- 純裝飾元素： 不包含文字或互動元件的元素（如背景圖案，WCAG 1.4.3 不適用於此）。
輸入
要生成無障礙色彩系統，您需要：
- 主要品牌色： 代表品牌的核心顏色（例如，#0055FF）。
- 中性色基礎： 灰色/黑色的起點（例如，#1A1A1A 或微調的中性色）。
- 無障礙目標： WCAG Level AA（標準）或 AAA（增強）。
- 使用情境： 這是用於高密度儀表板、行銷著陸頁還是實用優先的應用程式？
輸出
- 色彩階層： 主要色、次要色、中性色和語義色的色調調色盤（通常為 10 階層）。
- 對比度矩陣： 哪些前景色可在哪些背景色上安全使用的對應圖。
- 語義映射： 定義顏色的角色（例如，
--color-action-primary、--color-surface-muted）。 - CSS 自訂屬性： 一份生產就緒的 CSS 變數區塊，可選擇性地使用
color-mix()從單一基礎標記衍生懸浮/啟用色調，而非手動選取每個狀態顏色。
工作流程
1. 生成色調階層
將基礎顏色擴展為階層（例如 50 到 900）。使用能維持一致明度步進的工具或公式。在 OKLCH 色彩空間（而非 HSL）中工作，能產生跨色調更感知均勻的明度步進，使得在測試前更容易預測對比度。提示：確保您的 Primary 500 或 600 是「品牌」版本。
2. 定義中性色
建立中性色階層。考慮加入少量主要色（例如 2-5%）來「調色」中性色，以創造更協調的外觀。
3. 建立語義角色
將顏色分配給功能角色：
- 動作色： 按鈕、連結和啟用狀態的主要顏色。
- 表面色： 背景、卡片和分隔線（中性色）。
- 內容色： 文字和圖示（高對比中性色）。
- 狀態色： 成功（綠色）、警告（黃色/橙色）、錯誤（紅色）、資訊（藍色）。
4. 執行對比度驗證
使用 WCAG 公式（1.4.3、1.4.11）測試配對：
- 一般文字： AA 為 4.5:1，AAA 為 7:1。
- 大型文字（>18pt）： AA 為 3:1，AAA 為 4.5:1。
- UI 元件/圖示： AA 為 3:1（非文字對比度，1.4.11）。
- 焦點指示器： 與相鄰顏色的對比度為 3:1，且指示器不得被固定頁首或其他內容遮擋（WCAG 2.2 SC 2.4.11，焦點不被遮擋）。
5. 建立配對規則
記錄哪些文字顏色可以放在哪些背景上。範例：白色文字（#FFFFFF）只有在 Primary 600 或更高階層上才安全。
決策規則
- 可讀性優先： 功能（可讀性）永遠凌駕於美學之上。如果品牌顏色對文字來說太淺，則為文字使用較深的變體，同時將品牌顏色保留用於裝飾元素。
- 避免僅用顏色： 絕不依靠顏色作為傳達資訊的唯一方式（例如，在錯誤訊息中包含圖示或文字標籤）。
- 一致的明度： 在同一階層級別的不同色調中保持相似的明度值（例如，Red 500 和 Blue 500 應具有相似的感知亮度）。
限制條件
- 響應式： 顏色必須在行動螢幕上維持對比度，因為眩光或低品質顯示器可能降低可見度。
- 無障礙： 所有功能元素至少須符合 WCAG 2.2 AA 標準，包括 2.4.11 要求：焦點指示器保持可見且不被遮擋。
- 層級結構： 使用色彩飽和度和對比度引導視線；較重要的元素（CTA）應具有較高的視覺權重。
常見失敗模式
- 對比度不足： 在白色背景上使用淺灰色文字，或在淺品牌色上使用白色文字。
- 振動色： 配對高飽和度顏色（如紅色和綠色）導致視覺疲勞。
- 顏色過多： 產生「彩虹」效果，稀釋品牌識別並混淆層級結構。
- 語義誤用： 將「錯誤紅」用於裝飾元素，導致使用者焦慮。
驗證標準
- 每個功能文字元素與其背景的對比度至少為 4.5:1。
- UI 元件（邊框、圖示）的對比度至少為 3:1。
- 系統包含主要色和中性色的清晰階層。
- 資訊絕不單透過顏色傳達。
- 系統使用 CSS 自訂屬性記錄，以確保可攜性。