漸層與無障礙設計：確保所有人都能使用
漸層設計雖然美觀，但如果不考慮無障礙性，可能會對視覺障礙的使用者造成困擾。本文將探討如何在使用漸層的同時確保網頁符合 WCAG（Web Content Accessibility Guidelines）標準。
文字對比度要求
WCAG 2.1 對文字對比度有明確的要求：
| 等級 | 一般文字 | 大型文字 |
|---|---|---|
| AA（最低要求） | 4.5:1 | 3:1 |
| AAA（推薦） | 7:1 | 4.5:1 |
當文字放置在漸層背景上時，必須確保文字與漸層中每個區域的對比度都符合標準。這意味著你需要檢查漸層最亮和最暗區域的對比度。
重要提醒：漸層上的白色文字可能在漸層的淺色區域對比度不足。解決方案包括：在文字下方添加半透明暗色層、使用 text-shadow，或確保漸層的所有區域都足夠暗。
色覺障礙考量
約 8% 的男性和 0.5% 的女性有某種形式的色覺障礙。在設計漸層時：
- 不要僅依賴顏色傳達資訊 — 結合圖案、文字或圖示
- 避免紅綠漸層 — 這是最常見的色覺障礙類型
- 使用色覺模擬工具 — 檢查不同類型色覺障礙下的效果
動態漸層與癲癇症
快速變化的漸層動畫可能對光敏性癲癇患者造成風險。WCAG 2.1 指出：
- 避免每秒閃爍超過 3 次的效果
- 提供停止動畫的機制（
prefers-reduced-motion媒體查詢） - 確保漸層動畫的色彩變化不會過於劇烈
實用的無障礙技巧
1. 使用 prefers-reduced-motion
透過 CSS 媒體查詢 @media (prefers-reduced-motion: reduce)，為偏好減少動畫的使用者提供替代樣式。
2. 提供高對比模式支援
使用 @media (prefers-contrast: high) 在高對比模式下調整漸層。
3. 不要在漸層上放置重要功能
漸層應該是裝飾性的。核心功能和重要資訊應該在移除漸層後仍然可用。
對比度檢查工具
| 工具 | 說明 |
|---|---|
| WebAIM Contrast Checker | 檢查兩個顏色的對比度 |
| Chrome DevTools | 內建的對比度檢查功能 |
| axe DevTools | 自動化無障礙性檢測 |
生成無障礙友善的漸層
立即使用 CSS 漸層產生器 →結語
漸層設計和無障礙並不矛盾。只要在設計過程中注意對比度、色覺障礙和動畫安全，就能創造出既美觀又人人可用的網頁。
參考文獻
- W3C. "Web Content Accessibility Guidelines (WCAG) 2.1." W3C Recommendation, 2018. https://www.w3.org/TR/WCAG21/
- W3C WAI. "Web Accessibility Initiative (WAI)." W3C. https://www.w3.org/WAI/
- WebAIM. "Contrast Checker." WebAIM. https://webaim.org/resources/contrastchecker/
- Mozilla Developer Network. "prefers-reduced-motion." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion