為什麼色彩對比很重要

想象一個潛在客戶打開你的官網，他的灰色文字在淺灰白色背景上幾乎看不清楚。他花了 3 秒嘗試閱讀，然後關掉了頁面。

這個訪客可能是有輕微色覺問題的人，或者只是在陽光直射的戶外用手機瀏覽，或者他就是視力不好。這樣的用戶比你想象的多得多。

WCAG（Web Content Accessibility Guidelines）是國際通用的網頁無障礙標準，其中對色彩對比有明確的規定。在某些國家（美國、英國、EU），政府網站和某些規模以上的企業網站依法需要符合 WCAG 標準。

WCAG 對比度標準

最低標準（AA 等級）

正常文字（18pt 以下的常規字體，14pt 以下的粗體）：對比比率至少 4.5:1

大型文字（18pt 以上，或 14pt 以上粗體）：對比比率至少 3:1

增強標準（AAA 等級）

正常文字：對比比率至少 7:1

大型文字：對比比率至少 4.5:1

大多數品牌官網以符合 AA 等級為目標。

對比比率的計算

對比比率的計算基於相對亮度（Relative Luminance）—— 0 是純黑，1 是純白。

計算公式：(L1 + 0.05) / (L2 + 0.05)，其中 L1 是較亮的顏色，L2 是較暗的顏色。

純黑（#000000）vs 純白（#ffffff）的對比比率是 21:1——最高對比。

你不需要手算——有現成的工具：

WebAIM Contrast Checker：webaim.org/resources/contrastchecker

Colour Contrast Analyser（桌面軟體）

Figma 的 Contrast 外掛（設計階段就能檢查）

常見設計中的對比問題

淺灰色文字在白色背景

很多現代設計使用 #999999 或更淺的灰色作為輔助文字——這在大面積使用時通常不符合 AA 標準。

解決方案：輔助文字使用至少 #767676（在白色背景上對比比率約 4.54:1，剛好符合 AA）。

低對比的按鈕

黃色、淺橙色或淺藍色按鈕上的白色文字，是最常見的對比問題。

例如：#FFD700（金色）背景上的白色文字，對比比率只有約 1.9:1，差得很遠。

解決方案：在亮色背景按鈕上使用深色文字，或選擇更深的背景色。我們自己品牌的 accent-600 深金色（而非淺金色）搭配白色文字，對比度更好。

圖片上的文字

圖片背景的對比度難以保證——圖片的不同區域亮度不同。

解決方案：在圖片和文字之間加半透明的深色遮罩（overlay），確保文字始終可讀。

色盲友善設計

全球約 8% 的男性和 0.5% 的女性有不同程度的色覺辨別缺陷（色盲）。最常見的是紅綠色盲，很難區分紅色和綠色。

設計原則：不要只用顏色來傳遞資訊。

反例：只用紅色表示「錯誤」、只用綠色表示「成功」——色盲用戶看不出差別。

正解：用顏色 + 圖示 + 文字標籤同時傳遞資訊。「×」或「✓」圖示讓所有人都能理解，不依賴色彩。

在設計系統中建立對比標準

在你的品牌設計系統中，預先定義「哪個背景色上使用哪個文字色」的規則：

例如：

  • 白色（#fff）背景 → 主文字 navy-950，輔助文字 warm-600（對比度 4.6:1）
  • Navy-950 深背景 → 主文字 white，輔助文字 white/60（確認是否符合標準）
  • Accent gold 按鈕（深色調）→ 使用白色文字（確認深度夠達到 4.5:1+）

這樣的規則讓整個設計系統的色彩使用有一致的標準，而不是每次都要個別確認。

自動化測試

在開發流程中加入無障礙自動化測試：

Lighthouse（Chrome DevTools）有無障礙檢查項目，包含色對比檢查。

axe DevTools（瀏覽器插件）提供更詳細的 WCAG 合規性檢查。

Vercel 的持續整合（CI）可以設定在每次部署後自動跑 Lighthouse 報告，讓無障礙分數持續可見。