一、基于對比度的核心原則

1. 文本與背景的對比度標準

• WCAG 無障礙標準是可讀性的基礎：
  • AA 級：普通文本對比度≥4.5:1，大文本（≥18pt 或 14pt 加粗）≥3:1；
  • AAA 級：普通文本≥7:1，大文本≥4.5:1。
• 示例組合（高對比度易讀）：
  • 深色文本（#111）+ 淺色背景（#fff）；
  • 白色文本（#fff）+ 深藍色背景（#1a365d）；
  • 深灰色文本（#333）+ 米白色背景（#f9f9f9）。
• 避免低對比度組合：
  • 淺灰色文本（#999）+ 淺灰色背景（#eee）；
  • 黃色文本（#ffd166）+ 白色背景（易造成視覺疲勞）；
  • 藍色文本（#4299e1）+ 紫色背景（色相相近，區分度低）。

2. 色彩明度對比優先于色相對比

• 明度（亮度）差異是影響可讀性的關鍵因素，而非顏色本身：
  • 例如：紅色（#ff2d20）與綠色（#27ae60）色相差異大，但若兩者明度接近（如深紅配深綠），文本仍可能難辨；
  • 正確做法：確保文本與背景的明度差足夠，如深紫色文本（#311b92）配淺灰色背景（#f5f5f5）。

二、色彩心理學與可讀性的關聯

1. 避免高刺激性顏色作為背景

• 高飽和度顏色（如亮紅、亮黃）作為大面積背景時，易導致視覺疲勞，降低文本可讀性：
  • 電商促銷頁可短期使用紅色背景突出 urgency，但正文區域需搭配中性色（如白色卡片浮層）；
  • 正確案例：科技網站常用深藍色背景（低飽和度）+ 白色文本，既專業又易讀。

2. 中性色為主，彩色為輔

• 正文區域優先使用黑、白、灰等中性色組合：
  • 純黑色文本（#000）在白色背景上對比度極高，但可能過于刺眼，建議用深灰色（#333、#444）提升舒適度；
  • 輔助色僅用于標題、按鈕等需要突出的元素，避免干擾正文閱讀（如標題用藍色，正文用深灰）。

三、布局中的色彩分層邏輯

1. 通過色彩區分內容層級

• 用色彩亮度或飽和度差異劃分信息優先級：
  • 主標題：高對比度顏色（如深藍色 #1e3a8a）+ 較大字號；
  • 正文：中對比度深灰色（#666）+ 適中字號；
  • 輔助信息（如注釋、標簽）：低對比度淺灰色（#999）+ 小字號。

2. 區塊背景色的弱對比原則

• 不同內容區塊（如側邊欄、卡片）需用色彩區分，但避免對比度太強：
  • 示例：主內容區白色背景，側邊欄淺灰色（#f0f0f0）背景，通過明度差區分區域，同時不影響文本閱讀。

四、特殊場景下的適配原則

1. 深色模式（Dark Mode）的色彩策略

• 避免純黑色背景（#000）+ 純白色文本（#fff），強光對比易導致眼睛疲勞：
  • 優化方案：
    • 背景用深灰色（#121212）或暗藍色（#161625）；
    • 正文用淺灰色（#e0e0e0）而非純白，標題用白色（#fff）提升層級；
    • 輔助色（如按鈕）用高飽和度色彩（如藍色 #38bdf8），在深色背景下更突出。

2. 響應式設計中的色彩適配

• 移動端屏幕更小，需簡化色彩復雜度：
  • 避免多色漸變背景，改用單色或低飽和度底色；
  • 文本與背景的對比度可適當提高（如移動端正文用 #333，PC 端用 #444），確保小屏閱讀清晰。

五、工具與測試方法

1. 對比度檢測工具

• WebAIM 對比度檢查器（https://webaim.org/resources/contrastchecker/）：輸入色值即可顯示對比度是否符合 WCAG 標準。
• 瀏覽器開發者工具：Chrome/Firefox 可直接選取頁面元素，查看色彩對比度（如 Chrome 的 “無障礙” 面板）。

2. 模擬視覺障礙測試

• 部分用戶可能存在色弱（如紅綠色弱），需確保色彩搭配在色弱模式下仍可區分：
  • 用工具如Coblis 色弱模擬器預覽配色效果；
  • 避免僅通過顏色區分信息（如紅色按鈕和綠色按鈕），需搭配圖標或文字說明。

六、經典高可讀性配色案例

總結：高可讀性配色的核心邏輯

1. 對比度是第一優先級：嚴格遵循 WCAG 標準，用明度差而非色相差確保文本清晰；
2. 中性色主導內容區：正文避免使用彩色背景或彩色文本，僅用中性色搭配；
3. 色彩服務于信息層級：通過色彩亮度、飽和度區分標題、正文、輔助信息，避免視覺混亂；
4. 適配特殊場景：針對深色模式、移動端、視覺障礙用戶優化配色，提升包容性。