文章主要探討文本色、背景色該如何選擇，才能提供良好的「可讀性」。一起來看！

上次整理「色彩對比度」文章時，同時搜集了不少「文本可讀性」的相關(guān)資料。在這里挑一些比較實用的分享出來。

主要探討文本色、背景色該如何選擇，才能提供良好的「可讀性」。

慎用「暗色調(diào)」模式

對文本可讀性的探索科學已經(jīng)并不新鮮，而且許多非常棒的研究成果都來自于80年代早期。

多數(shù)研究表明，「淺背景深色字」比「深背景淺色字」要好。
Bauer and Cavonius在1980年發(fā)現(xiàn)，閱讀「淺色背景上的深色字」，比閱讀「深色背景上的淺色字」，準確率高出26%。

（Reference: Bauer, D., & Cavonius, C., R. (1980). Improving the legibility of visual display units through contrast reversal. In E. Grandjean, E. Vigliani (Eds.), Ergonomic Aspects of Visual Display Terminals (pp. 137-142). London: Taylor & Francis）

散光患者（約占人口的50％）在黑色上閱讀白色文字，比在白色上閱讀黑色文字更難。
部分原因與光線水平有關(guān)：當人眼看明亮的淺色背景顯示屏時，虹膜會關(guān)閉更多，「鏡頭變形」較小; 看暗色調(diào)屏幕時，虹膜打開以接收更多的光，「鏡頭變形」更大，并且會在眼睛上形成一個非常模糊的焦點。

（Jason Harrison?– Post Doctoral Fellow, Imager Lab Manager – Sensory Perception and Interaction Research Group, University of British Columbia ）

這種模糊會迫使人閱讀時，時不時停頓下來。

即使對比度完全相同的深色和淺色，淺背景上黑字，也要比深背景上淺色字的閱讀效果好許多。

也許你覺得為了視覺障礙者來改變設(shè)計很奇怪。但如果「視覺障礙」的比例高達50%，那這已經(jīng)和視力正常用戶同等重要了。

這兩個引用足以說明，采用暗色調(diào)設(shè)計是個壞主意。

（from：Why light text on dark background is a bad idea，by：Tatham Oddie?，2008.10.13）

別在純白背景上使用純黑字

在純白背景 (#FFFFFF)上使用純黑色字 (#000000)不合適。

因為許多誦讀困難患者，對這種極高的對比度很敏感，過高的對比度會使他們看到的字旋轉(zhuǎn)模糊。

（from：6 Surprising Bad Practices That Hurt Dyslexic Users，by：?anthony?，2011.1.23）

淺灰色背景比純白背景閱讀效果好

研究人員在1997年做了一個實驗，測試黑色文字在三種不同的背景顏色上（淺灰色，深灰色和白色），哪種「可讀性」（readability）最好。（他們以為是白背效果最好）

驚訝的是，他們發(fā)現(xiàn)灰色背景比白色背景「可讀性」更好。?（具有諷刺意味的是，盡管有這些發(fā)現(xiàn)，但是現(xiàn)在網(wǎng)絡(luò)瀏覽器的默認背景還是白色的。）

（from：The Impact of Web Page Text-Background Color Combinations on Readability, Retention, Aesthetics, and Behavioral Intention，by：RICHARD H. HALL and PATRICK HANNA，2004.5）

自適應(yīng)亮度對比度，可提高文本在智能手機上的「可讀性」和視覺舒適度

前人又說高對比度更有利于閱讀，又說高對比度增加視覺壓力，到底如何是好？

下面的實驗說明，拋開時間維度談「可讀性」都是耍流氓。

人們在智能手機顯示屏上閱讀時，文本和背景之間的亮度對比度對視覺感知有很大的影響。

《Adaptive luminance contrast for enhancing reading performance and visual comfort on smartphone displays》一文，通過2個實驗，提出并證實了一個理想的模型：隨著時間的推移，將對比度從最高，逐漸降低為一定數(shù)值，不僅可以增強文本的「可讀性」和視覺舒適度，同時還能降低了智能手機的能耗。這是一種非常適合智能手機等終端的顯示模型。

詳細實驗：

實驗1：

鑒于一些研究表明：

• 高對比度有利于人們集中精力、快速閱讀文字；
• 在顯示器上閱讀，對比度過高會導致視覺壓力；
• 對比度的連續(xù)變化，會導致視覺不適。

因此，提出一種隨著時間的推移逐漸降低亮度對比度的理想自適應(yīng)模型：在閱讀開始使用高對比度，便于讓人集中精力；隨后隨著時間變化，慢慢降低對比度，之后持續(xù)不變，以期減輕人長時間閱讀的視覺壓力。

一共設(shè)置了3組實驗：

1. 白背景，文字顏色改變：由黑到白；
2. 文字顏色一直黑色不變，背景顏色由白到黑漸變；
3. 文本從黑色逐漸變?yōu)榘咨?，而背景顏色以相同的速度從白色變?yōu)楹谏?/li>

3組實驗參數(shù)及測量結(jié)果

測試結(jié)果：

• 與早期的研究結(jié)果相反，當文本和背景之間的亮度對比度最大時，閱讀速度最快。
• 當亮度對比度降低時，每組視覺舒適度都迅速下降。
• 對比得出，組C 文本和背景的亮度同時變化，獲得了最高的舒適度。

通過一系列用戶測試，開發(fā)出了智能手機顯示器的亮度對比度隨時間變化的自適應(yīng)模型：

Adaptive luminance contrast: gradual decrease between text and background as time passes.

因為高對比度可以幫助用戶首先集中精力閱讀。他們最開始也覺得這樣的對比值的在視覺上很舒適。

然而，如果使用者持續(xù)很長時間，則會感到視力疲勞。

因此，亮度對比度開始在150秒后變化；因為通常在這段時間后，人們更多的集中精力于當前閱讀當?shù)膬?nèi)容上。

最終的亮度對比度確定為0.52，考慮平均識別感受范圍的變化，文本的RGB值 51，背景為204。為了避免用戶因為亮度變化而感到改變，文本和背景之間的亮度對比度緩慢切換時間為40秒。

RGB 204 的淺灰背景色，與RGB 51的深灰文字色

實驗2：

設(shè)置3組實驗：

1. 白底黑字；
2. 自適應(yīng)對比度；
3. B70——從之前的用戶測試中選出的的最佳閱讀表現(xiàn)的數(shù)值。

使用腦電波的腦波分析測量「可讀性」、視覺舒適度和生理壓力。

測試結(jié)果證實，自適應(yīng)對比度模式，可讀性、閱讀速度、舒適度表現(xiàn)都是最好的。

在智能手機顯示器上應(yīng)用自適應(yīng)亮度對比有兩個主要優(yōu)點：

• 首先，通過保持閱讀性能和視覺舒適度之間的平衡，用戶可以在舒適、可讀性佳的狀態(tài)下長時間閱讀內(nèi)容。
• 其次，與目前普通的智能手機顯示形態(tài)相比，自適應(yīng)模型能耗更低；因此，它具有節(jié)省電池電力的潛力。

所以說，自適應(yīng)亮度對比度，是一種實現(xiàn)文本和背景之間的最佳亮度對比度的新方法。

（from：Adaptive luminance contrast for enhancing reading performance and visual comfort on smartphone displays，by：Nooree Na;?Hyeon-Jeong Suk，2014.11.3）

參考文獻：

• Why light text on dark background is a bad idea，by：Tatham Oddie?，2008.10.13
• Adaptive luminance contrast for enhancing reading performance and visual comfort on smartphone displays，by：Nooree Na;?Hyeon-Jeong Suk，2014.11.3
• 6 Surprising Bad Practices That Hurt Dyslexic Users，by：?anthony?，2011.1.23
• The Impact of Web Page Text-Background Color Combinations on Readability, Retention, Aesthetics, and Behavioral Intention，by：RICHARD H. HALL and PATRICK HANNA，2004.5

作者：Angelaaa，知乎專欄：ANN 的設(shè)計筆記

來源：https://zhuanlan.zhihu.com/p/30018110

本文由 @Angelaaa 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自PEXELS，基于CC0協(xié)議