萬盛學電腦網

您现在的位置: 萬盛學電腦網 >> 程式設計 >  >> 網頁製作 >> 互動設計

文字色彩與可讀性研究:高飽和度並非好讀,科學配色指南

一、飽和度與易讀性:高飽和易疲勞

專案中列表文字鏈接統一高飽和藍 #014ccc,吸引注意卻易視覺疲勞。降低飽和度後閱讀顯著舒適。主流門戶網站列表鏈接多用低飽和藍驗證此結論。
結論:顏色飽和度達臨界值,視覺神經興奮引發閱讀疲勞。

二、視覺神經興奮臨界值:波長決定敏感度

光譜紅橙黃綠青藍紫波長遞減,神經興奮所需飽和度呈先增後減弧狀:
長波(紅/橙)與短波(藍/紫)低飽和即易興奮;中波(綠/青)需較高飽和。
藍色屬臨界點低顏色,慎用高飽和藍。
結論:同飽和度下,紅/紫最易興奮>黃/藍>綠/青。

設計建議

  • 盡量用低飽和紅、紫
  • 禁止高飽和紅、紫
  • 少量用高飽和黃、藍

三、明度、色相、飽和度三元關系(RGB 模型解析)

名詞定義

  • 明度:明暗程度(0-255 級),0 純黑,255 純白。
  • 色相:顏色種類(光譜紅橙黃綠青藍紫及組合)。
  • 飽和度:顏色純度/鮮豔度。

RGB 混色規則與計算

  • R=G=B 1:1:1 → 白光
  • 任意兩原色混合產生新色相,非白光
  • 單一原色對明度影響為數值一半(≤127 級)
  • 明度 = (RGB 最大值 + 最小值) / 2
  • 色相由最大值/最小值位置及中間值決定
  • 飽和度 = 最大值 - 最小值 差值

關鍵結論

  1. 暗色(無通道達 FF)增明度=增飽和,降明度=降飽和
  2. 亮色(無通道達 00)增明度=降飽和,降明度=增飽和
  3. 飽和度越大(差值越大),同明度下可變色相種類越少
  4. 飽和度越小,同明度下可變色相種類越多
  5. 色相變化不影響明度與飽和度

四、可落地的配色操作指南

  1. 高飽和紅 #FF0000、紫 #FF00FF 不推薦使用
  2. 高飽和藍 #1834D1、橙 #FF4E00 可用於少量文字吸引注意,不宜用於列表鏈接
  3. 列表鏈接藍色調製法:降藍通道降飽和(如 #0000FF→#000099),為避免過暗增其他通道調明度(如 #005599)
  4. 顏色不協調可降飽和或調色相協調。例:#FF4E00 與 #FF0000 飽和度一致,但紅色更刺眼,因同飽和度下紅色視覺神經更敏感

參考文獻:《基於色度學的人眼彩色探測特性分析》(北京理工大學)、《計算機求解顏色刺激的主波長和興奮純度》(長春光機院)。

copyright © 萬盛學電腦網 all rights reserved