無障礙色彩對比指南：符合 WCAG 標準的配色方法
全球約有 3 億人有色覺障礙（俗稱色盲），而視力退化更是每個人都可能面對的問題。設計一個對所有人都友善的網站，色彩對比度是最基本也最重要的考量。本文將帶你了解 WCAG 的色彩對比度標準，以及如何在設計中落實這些規範。
為什麼色彩對比度很重要？
色彩對比度直接影響文字的可讀性。當前景色（文字）和背景色之間的對比度不夠時，以下使用者會遇到困難：
- 色覺障礙者（全球約 8% 的男性、0.5% 的女性）
- 視力退化的年長者
- 在強光環境下使用手機的使用者
- 使用低品質螢幕的使用者
即使你的目標受眾不包括上述族群，良好的對比度也能提升所有使用者的閱讀體驗。
WCAG 對比度標準
Web Content Accessibility Guidelines（WCAG）2.1 定義了兩個等級的色彩對比度標準：
| 等級 | 一般文字（18px 以下） | 大字文字（18px 以上或 14px 粗體） | 非文字元素 |
|---|---|---|---|
| AA 級（最低要求） | 4.5:1 | 3:1 | 3:1 |
| AAA 級（最高標準） | 7:1 | 4.5:1 | — |
建議：大部分網站至少應該達到 AA 級標準。如果你的網站有法律合規要求（如政府網站、教育機構），可能需要達到 AAA 級。
對比度是怎麼計算的？
WCAG 的對比度計算公式基於兩個顏色的相對亮度（Relative Luminance）。計算步驟如下：
- 將 RGB 值轉換為 sRGB 線性值（去除 gamma 校正）
- 使用公式計算相對亮度：L = 0.2126R + 0.7152G + 0.0722B
- 對比度 = (L1 + 0.05) / (L2 + 0.05)，其中 L1 是較亮的顏色
對比度的範圍從 1:1（完全相同）到 21:1（黑色對白色）。
常見配色的對比度
| 前景色 | 背景色 | 對比度 | AA 級 |
|---|---|---|---|
| #000000（黑色） | #FFFFFF（白色） | 21:1 | 通過 |
| #333333（深灰） | #FFFFFF（白色） | 12.6:1 | 通過 |
| #767676（灰色） | #FFFFFF（白色） | 4.5:1 | 剛好通過 |
| #999999（淺灰） | #FFFFFF（白色） | 2.8:1 | 未通過 |
| #10b981（綠色） | #FFFFFF（白色） | 3.0:1 | 僅大字通過 |
色覺障礙的類型
設計無障礙配色時，需要了解常見的色覺障礙類型：
- 紅綠色弱（Deuteranomaly） — 最常見，約佔男性的 6%。紅色和綠色難以區分。
- 紅色盲（Protanopia） — 完全無法感知紅色光。紅色看起來像暗棕色。
- 綠色盲（Deuteranopia） — 完全無法感知綠色光。
- 藍黃色弱（Tritanomaly） — 較少見。藍色和黃色難以區分。
重要原則：永遠不要只靠顏色來傳達資訊。搭配圖示、文字標籤、底線或圖案等視覺線索，確保即使無法分辨顏色，也能理解內容。
實用的無障礙配色技巧
1. 使用對比度檢測工具
在選擇配色時，養成隨時檢查對比度的習慣。推薦工具包括 WebAIM Contrast Checker、Chrome DevTools 的色彩對比度顯示功能，以及 Figma 的 Stark 外掛。
2. 建立無障礙色彩系統
在設計系統中，為每個顏色標記其在白色/深色背景上是否達到 AA 標準。例如，你的主色可能需要準備兩個版本：一個在白色背景上達標，一個在深色背景上達標。
3. 不要只靠色彩區分狀態
表單驗證的錯誤提示不要只用紅色，應該同時加上錯誤圖示和文字說明。成功/失敗狀態也應該有文字標籤，而非僅用綠色/紅色區分。
4. 測試在灰階模式下的表現
將你的設計轉換為灰階，看看資訊層次是否仍然清晰。如果灰階下看不出差異，代表你過度依賴色彩來區分元素。
5. 深色模式也要注意對比度
深色模式不只是把背景換成黑色。純黑背景上的純白文字（21:1 對比度）反而可能造成閱讀疲勞。建議使用深灰背景（如 #121212）搭配淺灰文字（如 #e0e0e0）。
立即使用色彩轉換工具 →結語
無障礙設計不是額外的負擔，而是好設計的基本要求。良好的色彩對比度不只對視覺障礙者有幫助，也能提升所有使用者的體驗。從今天開始，在你的設計流程中加入對比度檢查這個步驟，讓你的作品對每個人都更加友善。
參考文獻
- W3C. "Web Content Accessibility Guidelines (WCAG) 2.1 — Success Criterion 1.4.3 Contrast (Minimum)." W3C Recommendation, 2018. https://www.w3.org/TR/WCAG21/#contrast-minimum
- W3C Web Accessibility Initiative (WAI). "Understanding SC 1.4.3: Contrast (Minimum)." Understanding WCAG 2.1, 2018. https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html
- WebAIM. "Contrast Checker." WebAIM, 2024. https://webaim.org/resources/contrastchecker/
- Colour Blind Awareness. "Colour Blindness." Colour Blind Awareness Organization, 2024. https://www.colourblindawareness.org/colour-blindness/