在界面設計時,文本與背景的對比度值如何計算?

今天在閱讀優設網文章《漲姿勢! 對於可訪問性設計師必知的7件事(上)》的時候,有以下知識點:

3、確保文字和背景有充分的對比

根據WCAG的規定,文本和所處的背景的對比度至少為4.5:1。這套規範主要是要確保弱視者、色盲看清楚屏幕上顯示的文字內容。這也就意味著,如果你的文字大小為24px,19px粗體的時候,文字的灰度最少也得是#959595.

#959595 字體在白色背景上的效果。

對於最小的字體,能用的灰色最低也得到#767676,如果你的背景本身就是灰色的,那麼文字的用色還得更沉才行。

通過原文給的鏈接,可以找到WCAG給出了對比度的計算方法,可是對學渣來說簡直太難懂!請問還有沒有比較好理解或者方便實際設計中運用的對比度的計算方法或通用規範?

另,按照上述WCAG的指南,似乎目前國內多數網站在文字背景對比度上都未完全遵循該指南,如很多14px或更小字型大小的漢字中採用#999999,問在網站設計中應該如何對待WCAG標準?在實際界面設計中,文字色值的使用有哪些建議?

謝謝~


關於你的第一個問題:給你個鏈接自己玩吧,MSFW ContrastRationCalculator

關於你的第二個問題:你有點太教條了,你應該先搞明白WCAG 2.0的目的是什麼再考慮該怎麼做。關於WCAG 2.0這件事我在另一個問題中已經回答過了,你可以搜索看看。

在實踐中,我個人針對於文字顏色一般考慮兩種情況:失明,弱視(包括色盲)。針對於失明人士,任何顏色,任何對比都不是問題,因為他們會用屏幕閱讀器。針對於弱視,唯一的目標是確保背景和前景有足夠的,不影響閱讀舒適度的反差。這個我都是可以用各種視覺障礙模擬器來檢查頁面對比度。比如說Impairment simulator software


贊@貼餑餑,對比度的目的是讓用戶更容易看到內容,把前景後背景有相應的區分,實現上,方法和技術很多,看下面的資源

http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html#visual-audio-contrast-contrast-resources-head

另有一種情況 - 讀寫障礙,讀寫障礙患者對於顏色有一定的敏感程度,特定的對比度和顏色對他們接受信息是有幫助的。好吧,這個有點生僻,但它確實應該被考慮,技術方法:http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/G156


推薦閱讀:

作為設計師,當我們在面試時,到底是在面什麼?
跟迪士尼學動效設計(下篇)
iOS 文本對齊,如何像素般精確還原設計稿
想了解、學習APP的UI設計應從何下手?
第二話——什麼是 dp、pt、sp?

TAG:設計 | 文化 | 用戶界面設計 | 可用性 | 信息無障礙 |