文字佔了大多數網站的絕大部分內容，色彩則決定第一眼的觀感。這兩件事做對，畫面就先贏一半。本章談字體搭配與色彩系統，並扣回 CSS 與無障礙。

字體搭配#

新手常犯的錯是「在同一頁混用兩種長得很像的字體」——例如兩款不同的無襯線體。它們不夠像（無法形成重複），又不夠不同（無法形成對比），結果就是不協調。

兩個安全原則：

• 要嘛完全一致：整站用同一個字型家族，靠字重與字級拉出層級。
• 要嘛明顯對比：標題用一款，內文用另一款，但兩者風格要「明顯不同」（如襯線體標題配無襯線體內文）。

字體的對比可以建立在六個維度上：

可讀性的幾個關鍵值#

.article {
  font-size: 1.0625rem; /* 內文約 16–18px */
  line-height: 1.6; /* 行距 1.5–1.7，太擠或太鬆都難讀 */
  max-width: 65ch; /* 每行 45–75 字元最好讀 */
}

max-width: 65ch 是排版老技巧：ch 單位等於當前字體「0」的寬度，限制行寬避免一行過長導致換行時找不到下一行。

Web Font 載入時建議加 font-display: swap，先用系統字體顯示文字，避免「文字不可見」的空白期（FOIT）。

色彩系統#

用 HSL 思考顏色#

相較於 #rrggbb，HSL（色相 Hue、飽和度 Saturation、亮度 Lightness）更貼近人對顏色的直覺，也更容易「程式化」地調出一整組協調的顏色。

:root {
  --hue: 217;
  --color-primary: hsl(var(--hue) 91% 60%);
  --color-primary-dark: hsl(var(--hue) 91% 45%); /* 同色相，降低亮度 */
  --color-muted: hsl(var(--hue) 20% 50%); /* 同色相，降低飽和度 */
}

螢幕用的是 RGB 加色模型（光的疊加），印刷用的是 CMYK 減色模型（墨水的吸收）。前端只需面對 RGB/HSL，但這也解釋了「螢幕上鮮豔的顏色印出來常會變暗沉」。

建立一個務實的調色板#

一套夠用的色板通常包含：

• 主色（primary）：品牌色、主要按鈕、連結
• 強調色（accent）：少量點綴，製造焦點
• 中性色（neutral）：大量的灰階，用於文字、邊框、背景
• 語意色（semantic）：成功綠、警告黃、危險紅

:root {
  --color-primary: hsl(217 91% 60%);
  --color-accent: hsl(45 100% 51%);
  --color-text: hsl(220 13% 18%);
  --color-bg: hsl(0 0% 100%);
  --color-danger: hsl(0 72% 51%);
}

暖色（紅、橙）視覺上「向前」、適合行動呼籲按鈕；冷色（藍、灰）「後退」、適合背景。這也是「危險操作用紅色」之所以直覺的原因。

對比度與無障礙#

顏色「好看」還不夠，文字與背景的對比度要足夠，視力較弱或在強光下的使用者才讀得到。WCAG 規範了最低對比度：

不要只靠顏色傳達資訊。 例如表單只用紅框表示錯誤，色盲使用者可能看不出來。要同時搭配文字、圖示或其他視覺線索。

/* 深色模式：用同一套變數，整組切換 */
@media (prefers-color-scheme: dark) {
  :root {
    --color-text: hsl(220 13% 90%);
    --color-bg: hsl(220 13% 12%);
  }
}

可在 Chrome DevTools 的 Elements 面板，點選顏色色塊查看「對比度」即時檢測，低於標準時會明確警告。

小結#

• 字體：要嘛一致、要嘛明顯對比；行距 1.5–1.7、行寬約 65ch。
• 色彩：用 HSL 思考，建立 primary / accent / neutral / semantic 四類。
• 對比度：一般文字至少 4.5:1，且別只靠顏色傳達資訊。