介面設計師的色彩科學：我從打造零色彩網站中學到的事

W3C 網頁內容無障礙指引要求一般文字的最低對比度為 4.5:1，然而 2023 年 WebAIM 的調查發現，排名前一百萬的網站中有 83.6% 的首頁存在可偵測的 WCAG 2 對比度違規。我在打造 blakecrosley.com 時面對的是相反的問題：所有元素皆採用最大對比度（21:1），再選擇性地降低。¹

TL;DR

我設計個人網站時未使用任何品牌色彩。整個視覺層級透過白色文字搭配純黑背景（#000000）以四個透明度層級運作：100%、65%、40% 與 10%。這個決策迫使我學習感知色彩科學——為什麼 sRGB 在均勻間距上欺騙了我們、OKLCH 如何解決這個問題，以及為什麼深色模式需要與淺色模式不同的對比度關係。下方的互動工具讓您探索對比度與色彩空間的差異。結論是：理解色彩感知背後的科學，比美學直覺能產生更好的設計決策。

我的無色彩調色盤

多數設計系統從色彩調色盤開始。我的則從色彩的缺席開始：

:root {
  --color-bg-dark:        #000000;
  --color-bg-elevated:    #111111;
  --color-bg-surface:     #1a1a1a;
  --color-text-primary:   #ffffff;
  --color-text-secondary: rgba(255,255,255,0.65);
  --color-text-tertiary:  rgba(255,255,255,0.4);
  --color-border:         rgba(255,255,255,0.1);
  --color-border-subtle:  rgba(255,255,255,0.05);
  --color-accent:         #ffffff;
}

十個設計代符。沒有品牌色彩。沒有語意化的錯誤/成功/警告調色盤。整個視覺層級透過四個透明度層級運作。²

為什麼四個層級就夠了

每個層級服務於特定的溝通功能：

每個層級皆通過 WCAG AAA（7:1）文字對比度標準。40% 透明度的第三級層級產生 8.4:1 的比率——幾乎是 AA 最低標準 4.5:1 的兩倍。選擇純黑背景（#000000 而非 #0a0a0a 或 #1a1a1a）為每個文字層級提供了最大的對比度餘裕。³

--spacing-2xs 事件

我在使用 --spacing-2xs 作為副標題邊距時，發現了嚴格設計代符的價值。該代符在我的 :root 定義中並不存在。CSS 靜默失敗，版面破損，我花了 20 分鐘除錯一個本應在編譯期就被捕捉的間距問題。修正方式：改用 --spacing-xs（我定義的最小代符）。教訓是：如果一個值不存在於系統中，那是設計有問題，不是系統有問題。⁴

為什麼 sRGB 欺騙了設計師

感知非均勻性問題

sRGB（網頁的標準色彩空間）將色彩對應到一個立方體，每個軸（紅、綠、藍）的範圍為 0-255。在紅色通道移動 50 個單位所產生的感知變化，與在綠色通道移動 50 個單位並不相同。人眼含有比紅色或藍色更多的綠色敏感視錐細胞，使得綠色的偏移比等量的紅色偏移更容易被感知。⁵

實際的影響是：設計師若以均勻間隔的十六進位值建立色彩調色盤，產生的色彩看起來會是不均勻的。#000000 與 #FFFFFF 之間的「中間」灰色並非 #808080（數學中點），而是大約 #777777（感知中點），因為人類的亮度感知遵循冪次定律而非線性函數。⁶

我的網站完全迴避了這個問題。透過僅使用不同透明度的白色，我避開了 sRGB 均勻性陷阱。在黑色背景上，透明度與感知透明度呈線性關係——這是 sRGB 色彩混合所不具備的特性。

OKLCH 解決方案

OKLCH（Oklab 明度、彩度、色相）是一個感知均勻的色彩空間，其中相等的數學距離對應相等的感知差異。無論起始色彩為何，10 個單位的明度變化看起來永遠是相同的變化量。⁷

/* sRGB: mathematically even, perceptually uneven */
--gray-100: #f5f5f5;
--gray-200: #e5e5e5;
--gray-300: #d4d4d4;

/* OKLCH: perceptually even steps */
--gray-100: oklch(96% 0 0);
--gray-200: oklch(88% 0 0);
--gray-300: oklch(80% 0 0);

現代 CSS 原生支援 oklch()。在我下一個需要色彩調色盤的專案中，我會以 OKLCH 定義調色盤。對於目前的網站，基於透明度的系統透過不同的方式達成了相同的感知均勻性。

我的深色模式決策：沒有淺色模式

我的網站沒有 prefers-color-scheme 媒體查詢。它完全以深色模式運作。這是刻意的決定。⁸

支持雙模式的論點： 使用者期望有淺色模式選項。系統偏好整合尊重使用者的選擇。

反對的論點（我的選擇）： 維護兩套視覺系統不可避免地會犧牲兩者的品質。在黑色背景上以 65% 透明度運作的設計，在白色背景上需要不同的透明度（接近 45%）才能達到相同的感知權重。每個互動狀態、每條邊框、每個陰影都需要重新校正。我選擇將一套系統做好，而非將兩套系統做到勉強及格。

純黑背景（#000000）為每個文字層級提供了最大的可用對比度：

/* My actual typography contrast hierarchy */
.hero__title     { color: var(--color-text-primary); }   /* 21:1 */
.hero__subtitle  { color: var(--color-text-secondary); }  /* 13.7:1 */
.nav a           { color: var(--color-text-secondary); }  /* 13.7:1 */
.nav a:hover     { color: var(--color-text-primary); }    /* 21:1 */

懸停狀態的轉換（次要 → 主要）完全透過對比度變化提供功能性回饋——不需要色彩偏移。

對比度與可讀性

WCAG 對比度要求

對比度測量的是前景色與背景色之間的相對亮度差異。1:1 的比率表示無對比度（相同色彩）。21:1 的比率表示最大對比度（黑底白字或白底黑字）。⁹

超越 WCAG：APCA

WCAG 2 的對比度演算法有已知的限制。該演算法不論極性（深底淺字 vs. 淺底深字）皆同等對待所有色彩，儘管研究顯示人類對兩種模式的對比度感知有顯著差異。¹⁰

APCA（無障礙感知對比度演算法）透過以下方式解決這些限制： - 極性敏感度： 在相同的數學對比度下，淺底深字比深底淺字更易讀 - 空間頻率： 細字型比相同大小的粗字型需要更高的對比度 - 適應性： 眼睛會適應周圍頁面的亮度，影響感知對比度

APCA 預計將成為 WCAG 3.0 對比度要求的基礎。我的網站受益於極性洞察：由於我exclusively使用淺字深底，我需要比淺色模式網站更高的對比度。我最低的文字層級（40% 透明度，8.4:1 比率）甚至超過了 APCA 對深色背景內文的建議最低值。

無色彩的語意色彩

正式的色彩系統通常會將色彩指定給功能（綠色代表成功、紅色代表錯誤）。我的網站完全避免功能性色彩，因為它沒有交易性 UI——沒有表單、沒有狀態訊息、沒有成功/錯誤狀態。內容是靜態的。

如果我需要語意色彩，我會精確地加入：

將圖示與文字搭配使用，消除了僅依賴色彩傳達資訊的問題——這對約 8% 患有色覺缺陷的男性而言是失效的。此做法同時保留了我的單色系統。色彩將作為點綴而非結構性元素。¹¹

字型優先的層級系統

在沒有色彩承載層級的情況下，我的網站完全依靠字型排版來傳達層級：

:root {
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
                 "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --font-size-display: 5rem;     /* 80px — hero headlines */
  --font-size-7xl:     3.875rem; /* 62px */
  --font-size-base:    1rem;     /* 16px — body text */
  --font-size-xs:      0.75rem;  /* 12px — metadata */
}

系統字型，而非自訂網頁字型。這既是一個粗獷主義的決定（使用平台的原生素材），也是效能決定（零字型載入延遲，助於達成 Lighthouse 滿分 100/100）。展示用字級（80px）搭配緊密的字母間距（-0.03em）賦予標題莊重感而無需裝飾。內文字級 16px 搭配寬鬆的行高（1.7）優先考量可讀性而非密度。¹²

從 0.75rem 到 5rem 的 13 級字型比例提供了足夠的精細度，僅透過大小就能表達層級。結合四個透明度層級，我擁有 52 種可能的組合（13 種大小 × 4 種透明度）——足以表達任何內容層級而無需動用色彩。

關鍵要點

給設計師： - 以 OKLCH 而非 sRGB 定義色彩調色盤；感知均勻的色彩空間能產生可預測的層級與整個調色盤一致的對比度 - 以 WCAG AAA（7:1）而非僅 AA（4.5:1）測試您的第三級文字層級；AAA 門檻為真實螢幕環境（低亮度、眩光、老化螢幕）提供足夠的餘裕 - 考量您的專案是否真的需要色彩；我的網站證明僅靠字型排版與透明度就能承載完整的視覺層級

給開發者： - 使用 CSS oklch() 定義色彩，並以 WCAG 2（現行標準）和 APCA（即將推出的標準）測試對比度；所有現代瀏覽器皆支援 oklch() - 實作深色模式時，在 OKLCH 空間中調整明度與飽和度，而非反轉十六進位值；感知調整比數學反轉產生更好的結果 - 嚴格的設計代符管理可防止 CSS 靜默失敗；如果代符不存在，應該改變設計，而非改變代符系統

參考文獻