色彩無障礙設計指南：對比度、色盲適配與 WCAG 合規實戰

實用工具

色彩無障礙：不只是「好看」

全球約 8% 男性和 0.5% 女性存在色覺缺陷——每 12 個使用者中就有 1 個無法正常辨別某些顏色。

色覺缺陷類型 盛行率 難辨顏色
紅色盲（Protanopia） 1% 紅-綠
綠色盲（Deuteranopia） 5% 紅-綠
藍色盲（Tritanopia） 0.003% 藍-黃
全色盲（Achromatopsia） 極罕見 全部

一、WCAG 對比度標準

三級標準

級別 一般文字 大型文字 UI 元件
AA ≥ 4.5:1 ≥ 3:1 ≥ 3:1
AAA ≥ 7:1 ≥ 4.5:1 —

大型文字定義：≥ 18pt（24px）或 ≥ 14pt 粗體（18.66px bold）。

對比度計算

對比度 = (L1 + 0.05) / (L2 + 0.05)

L1 = 較亮顏色的相對亮度
L2 = 較暗顏色的相對亮度

相對亮度 L:
  對於 sRGB ≤ 0.03928: L = sRGB / 12.92
  對於 sRGB > 0.03928: L = ((sRGB + 0.055) / 1.055)^2.4

  sRGB = R/255, G/255, B/255 (每個通道分別計算)

常見配色對比度

前景 背景 對比度 AA 一般文字 AA 大型文字
#000000 #FFFFFF 21:1 ✅ ✅
#333333 #FFFFFF 12.6:1 ✅ ✅
#666666 #FFFFFF 5.7:1 ✅ ✅
#767676 #FFFFFF 4.5:1 ✅（剛好） ✅
#999999 #FFFFFF 2.8:1 ❌ ❌
#FF0000 #FFFFFF 3.99:1 ❌ ✅
#0000FF #FFFFFF 8.59:1 ✅ ✅

二、使用工具庫驗證對比度

操作步驟

  1. 開啟 顏色對比度工具
  2. 輸入前景色和背景色（支援 HEX、RGB、HSL）
  3. 查看結果：
    • 對比度比值
    • WCAG AA / AAA 合規狀態
    • 一般文字 / 大型文字分別判定
  4. 調整顏色直到合規

三、色盲模擬

CSS filter 模擬

/* 紅色盲 */
.protanopia { filter: url('#protanopia'); }

/* 綠色盲 */
.deuteranopia { filter: url('#deuteranopia'); }

/* 藍色盲 */
.tritanopia { filter: url('#tritanopia'); }

SVG 濾鏡矩陣

<svg style="display:none">
  <!-- 紅色盲模擬矩陣 -->
  <filter id="protanopia">
    <feColorMatrix type="matrix" values="
      0.567  0.433  0      0  0
      0.558  0.442  0      0  0
      0      0.242  0.758  0  0
      0      0      0      1  0
    "/>
  </filter>

  <!-- 綠色盲模擬矩陣 -->
  <filter id="deuteranopia">
    <feColorMatrix type="matrix" values="
      0.625  0.375  0      0  0
      0.7    0.3    0      0  0
      0      0.3    0.7    0  0
      0      0      0      1  0
    "/>
  </filter>
</svg>

四、色盲適配策略

策略一：不只依賴顏色傳達資訊

<!-- 錯誤：僅用顏色區分狀態 -->
<span class="status-error" style="color: red">失敗</span>
<span class="status-success" style="color: green">成功</span>

<!-- 正確：顏色 + 圖示 -->
<span class="status-error" style="color: red">
  <svg>✕</svg> 失敗
</span>
<span class="status-success" style="color: green">
  <svg>✓</svg> 成功
</span>

策略二：使用色盲友善配色

避免的組合 替代組合
紅 + 綠 紅 + 藍，或 橙 + 藍
淺紅 + 淺綠 深紅 + 淺綠
綠色成功 + 紅色錯誤 藍色資訊 + 橙色警告

Wong 色盲友善配色板

#000000 黑色
#E69F00 橙色
#56B4E9 天藍
#009E73 青綠
#F0E442 黃色
#0072B2 藍色
#D55E00 朱紅
#CC79A7 粉紫

這套配色在所有色覺缺陷類型下均可區分。

策略三：圖表使用紋理/圖案

/* 不同資料系列使用不同紋理 */
.series-a { background-image: url('stripes.svg'); }
.series-b { background-image: url('dots.svg'); }
.series-c { background-image: url('crosshatch.svg'); }

五、深色模式無障礙

深色模式對比度陷阱

陷阱 說明 解決
純黑底純白字 對比度 21:1，但易致眼疲勞 用深灰底 (#1a1a2e)
降低飽和度 深色下高飽和度刺眼 適當降低飽和度
陰影不可見 深色背景上陰影消失 用邊框或亮度差替代
圖片對比度不足 深色下圖片細節遺失 CSS filter 調整

深色模式配色建議

:root {
  /* 淺色模式 */
  --bg: #ffffff;
  --fg: #1a1a2e;
  --muted: #6b7280;
  --accent: #3b82f6;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a2e;
    --fg: #e0e0e0;
    --muted: #9ca3af;
    --accent: #60a5fa; /* 更亮的藍色，保持對比度 */
  }
}

六、元件級無障礙檢查

表單錯誤提示

<!-- 錯誤：僅用紅色邊框提示 -->
<input style="border: 1px solid red" />

<!-- 正確：邊框 + 文字 + aria -->
<input
  style="border: 1px solid red"
  aria-invalid="true"
  aria-describedby="error-msg"
/>
<span id="error-msg" role="alert" style="color: #dc2626">
  請輸入有效的電子郵件地址
</span>

連結與周圍文字的對比

連結不僅需要與背景有足夠對比度，還需要與周圍文字有視覺區分：

/* 連結不僅靠顏色區分，還有底線 */
a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

七、自動化檢測

axe-core 整合

import { axe, toHaveNoViolations } from 'jest-axe';

expect.extend(toHaveNoViolations);

test('色彩無障礙', async () => {
  const { container } = render(<MyComponent />);
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});

Lighthouse 稽核

npx lighthouse https://example.com --only-categories=accessibility

CI 整合

- name: Accessibility check
  run: npx pa11y https://staging.example.com

八、最佳實踐清單

  1. 文字對比度 ≥ 4.5:1（AA 級一般文字）
  2. 不只依賴顏色傳達狀態資訊
  3. 使用色盲友善配色板（如 Wong 配色）
  4. 圖表加入紋理/圖案輔助區分
  5. 深色模式保持對比度，避免純黑底
  6. 連結有底線或其他非顏色區分
  7. 錯誤提示有文字說明，不僅靠紅色
  8. 自動化無障礙測試整合到 CI
#无障碍#WCAG#对比度#色盲#色彩设计