設計
網頁無障礙設計：色彩對比度完整指南
深入了解 WCAG 色彩對比度標準、計算方式和常見設計錯誤，打造人人都能使用的無障礙網頁。
什麼是色彩對比度？
色彩對比度（Color Contrast Ratio）是衡量兩個顏色之間視覺差異的數值指標。在網頁設計中，它直接影響內容的可讀性，尤其對視力障礙者至關重要。
為什麼對比度很重要？
全球約有 22 億人有某種形式的視力問題（WHO 2023 數據），包括：
• 色覺缺陷（俗稱色盲）：全球約 3 億人，男性發生率約 8%，女性約 0.5%
• 低視力：約 2.5 億人
• 老年性視力退化：60 歲以上人群中非常普遍
• 暫時性視力受限：強光下看手機、眼睛疲勞等
對比度的定義：
對比度是前景色與背景色之間相對亮度的比值，範圍從 1:1（完全相同）到 21:1（純黑配純白）。
• 1:1 = 沒有對比（同色）
• 21:1 = 最大對比（#000000 黑配 #FFFFFF 白）
為什麼不能只憑直覺判斷？
人類的視覺系統對不同顏色的亮度感知並不均勻。例如：
• 純綠色（#00FF00）看起來比純紅色（#FF0000）亮得多
• 純藍色（#0000FF）看起來最暗
• 黃色（#FFFF00）和白色之間的對比度可能比你想像的低
這就是為什麼需要數學公式來客觀測量對比度，而不能只靠設計師的眼睛判斷。
WCAG（Web Content Accessibility Guidelines，網頁內容無障礙指引）是由 W3C 組織制定的國際標準，明確規範了網頁內容的對比度要求。
WCAG 對比度標準
WCAG 2.1 定義了三個等級的無障礙合規標準：A（最低）、AA（建議）、AAA（最高），對色彩對比度的具體要求如下：
AA 級標準（建議達到的最低標準）：
• 一般文字（小於 18pt 或 14pt 粗體）：對比度 ≥ 4.5:1
• 大文字（≥ 18pt 或 ≥ 14pt 粗體）：對比度 ≥ 3:1
• UI 元件和圖形元素：對比度 ≥ 3:1
AAA 級標準（最高無障礙等級）：
• 一般文字：對比度 ≥ 7:1
• 大文字：對比度 ≥ 4.5:1
常見顏色組合的對比度：
• 黑色 #000000 配白色 #FFFFFF → 21:1（最高，通過 AAA）
• 深灰 #333333 配白色 #FFFFFF → 12.63:1（通過 AAA）
• 藍色 #0000FF 配白色 #FFFFFF → 8.59:1（通過 AAA）
• 紅色 #FF0000 配白色 #FFFFFF → 3.99:1（不通過一般文字 AA！）
• 綠色 #00FF00 配白色 #FFFFFF → 1.37:1（完全不通過）
• 灰色 #767676 配白色 #FFFFFF → 4.54:1（恰好通過 AA）
• 灰色 #777777 配白色 #FFFFFF → 4.48:1（不通過 AA！）
注意：#767676 是白色背景上能通過 AA 標準的最淺灰色。很多設計師喜歡用的淺灰色（如 #999999，對比度 2.85:1）其實不符合標準。
法律要求：
許多國家已將網頁無障礙納入法律：
• 美國：ADA（美國殘障法案）要求公共網站符合 WCAG AA
• 歐盟：歐洲無障礙法案（2025 年生效）要求所有商業網站符合 WCAG AA
• 台灣：無障礙網頁開發規範要求政府網站符合 WCAG 2.0 AA
如何計算對比度
對比度的計算涉及兩個步驟：先計算每個顏色的「相對亮度」（Relative Luminance），再用亮度比值得出對比度。
步驟一：計算相對亮度
相對亮度的計算基於 sRGB 色彩空間，反映人眼對不同顏色的實際亮度感知：
1. 將 RGB 值從 0-255 轉換為 0-1（除以 255）
2. 對每個通道進行 Gamma 校正：
如果值 ≤ 0.03928：線性值 = 值 / 12.92
如果值 > 0.03928：線性值 = ((值 + 0.055) / 1.055) ^ 2.4
3. 相對亮度 L = 0.2126 × R_linear + 0.7152 × G_linear + 0.0722 × B_linear
注意係數的分配：綠色佔 71.52%（人眼對綠色最敏感）、紅色佔 21.26%、藍色僅佔 7.22%。這就是為什麼綠色看起來最亮、藍色看起來最暗。
步驟二：計算對比度
對比度 = (L_lighter + 0.05) / (L_darker + 0.05)
其中 L_lighter 是較亮顏色的相對亮度，L_darker 是較暗顏色的相對亮度。
計算範例 —— 深藍色 #003366 配白色 #FFFFFF：
白色的相對亮度 = 1.0
深藍色 #003366：R=0, G=51, B=102
• R: 0/255 = 0 → 0/12.92 = 0
• G: 51/255 = 0.2 → (0.2+0.055)/1.055)^2.4 = 0.0331
• B: 102/255 = 0.4 → ((0.4+0.055)/1.055)^2.4 = 0.1329
L = 0.2126×0 + 0.7152×0.0331 + 0.0722×0.1329 = 0.0333
對比度 = (1.0 + 0.05) / (0.0333 + 0.05) = 1.05 / 0.0833 = 12.6:1（通過 AAA）
手動計算很繁瑣，建議使用 Gigi Tools 的色彩工具來自動檢查。
常見的無障礙設計錯誤
以下是網頁設計中最常見的色彩對比度錯誤，以及如何修正：
1. 淺灰色文字（最普遍的問題）：
❌ 錯誤：在白色背景上使用 #AAAAAA（對比度 2.32:1）的說明文字
✅ 修正：改用 #767676（對比度 4.54:1）或更深的灰色
很多設計師追求「乾淨」的視覺效果而使用過淺的灰色，但這對低視力用戶來說幾乎無法閱讀。
2. 純色彩區分資訊（色盲陷阱）：
❌ 錯誤：表單驗證只用紅色標示錯誤欄位，成功用綠色
✅ 修正：同時使用顏色 + 圖標（✕ / ✓）+ 文字提示
約 8% 的男性有紅綠色覺缺陷，無法區分紅色和綠色。
3. 低對比度按鈕：
❌ 錯誤：淺藍色按鈕（#87CEEB）配白色文字（對比度 1.98:1）
✅ 修正：使用深藍色（#0056B3）配白色文字（對比度 7.37:1）
互動元件的對比度至少需要 3:1（WCAG 2.1 新增要求）。
4. 漸層背景上的文字：
❌ 錯誤：在漸層圖片上直接放置文字，部分區域對比度不足
✅ 修正：在文字下方加半透明黑色遮罩（overlay），確保整個區域都有足夠對比度
5. Placeholder 文字過淺：
❌ 錯誤：輸入框的 placeholder 使用 #CCCCCC（對比度 1.61:1）
✅ 修正：使用 #767676 以上的深度，或者不依賴 placeholder 傳達重要資訊
6. 深色模式（Dark Mode）的常見問題：
❌ 錯誤：深色背景 #121212 配 #FFFFFF 純白文字（對比度 18.1:1）
雖然技術上通過了標準，但過高的對比度在深色背景下反而會造成視覺疲勞和「光暈效應」（halation）。
✅ 修正：深色模式建議用 #E0E0E0 淺灰色文字（對比度約 13:1），更舒適。
設計系統的建議做法：
在建立色彩系統時，為每個顏色預先定義好可搭配的文字顏色，並在設計規範文件中標註對比度數值。
使用 Gigi Tools 色彩工具檢查對比度
Gigi Tools 提供多種免費的色彩相關工具，幫助你設計無障礙的網頁：
色碼轉換器（Color Converter）：
• 支援 HEX、RGB、HSL 三種色彩格式的即時互轉
• 輸入任一格式，自動顯示其他格式的對應值
• 方便在不同設計工具和 CSS 之間轉換色碼
調色盤工具（Color Picker）：
• 視覺化的色彩選取介面
• 即時預覽選定顏色的效果
• 可直接複製各種格式的色碼
HEX 轉 RGB / RGB 轉 HEX：
• 快速的單向轉換工具
• 適合只需要特定轉換的使用情境
• 支援帶透明度的色碼（如 RGBA、HEXA）
漸層產生器（Gradient Generator）：
• 建立 CSS 線性漸層和徑向漸層
• 即時預覽漸層效果
• 一鍵複製 CSS 程式碼
• 設計漸層時，記得用對比度工具檢查漸層上文字的可讀性
實用工作流程：
1. 用調色盤選取品牌主色
2. 用色碼轉換器取得各種格式
3. 手動或用外部工具檢查與白色/黑色背景的對比度
4. 確保符合 WCAG AA 標準（一般文字 4.5:1、大文字 3:1）
5. 用漸層產生器建立品牌漸層
所有工具在瀏覽器中直接運算，色碼資料不會被上傳到伺服器。