界面設計的可訪問性——設計與顏色
一個設計優秀的產品,可訪問性對所有用戶來說都是很高的,本文主要關注可訪問性中顏色的運用。
顏色和對比
確保界面設計中的顏色對用戶來說是易于訪問的,這是視覺設計師最重要的工作。應該使用顏色和對比度來幫助用戶看到并理解應用程序的內容、交互元素。
根據W3C Web內容的可訪問性指南(WCAG),小型文本與背景的比例至少是4.5:1,大型文本(14pt的粗體/18pt常規體或以上)應該有一個至少3:1的對比度。這條規則可以幫助人們在屏幕上看清使用了不同顏色的文字。具體數值不用去關心,根據設計者的感覺足以應付。
但對于有些色弱或色盲用戶來說,他們看到的顏色有所不同,所以在設計的時候還是要盡量選擇對比度較高的組合。
像Color Safe這樣的在線工具可以幫助你在設計的時候挑選可訪問性高的顏色組合。
還有WebAIM,WebAIM色彩對比檢查器可以幫你測試它們是否是比較優良的組合。
提示: 探索各種顏色組合方式。為你的應用程序選擇原色、次級色和強調色的組合,提高可用性。確保不同元素之間足夠的色彩對比度,這樣即使是某些有視力障礙的用戶也可以很好的使用你的應用程序。
不要只依賴于顏色
根據調查,男性中的1/12、女性中的1/200為色盲,如果僅僅用顏色來傳達信息,他們看到的顏色與我們不同(不是同一個色),手機屏幕不像紅綠燈,現在大部分紅綠燈在設計之初就已經考慮到這點,比如在綠燈加了一些藍光,紅燈加了一些橙光。
在下面的示例中,如果表單字段的設計只依賴顏色(紅色和綠色)來表示這個地方有沒有錯誤,你可以想象一下這個場景,提交的時候跳出一條信息“你提交的信息有誤,請重試”,而沒有什么說明到底是哪個文本框,是不是會崩潰。這是一個典型的場景,色盲用戶每天都會面對的問題,因為他們無法區分以紅色突出顯示的字段。
有許多方法可以解決這個問題。一個方法是使用兩個顏色和標簽,像下面的示例。
一個很好的例子,這是非死book的表單字段和錯誤消息。在所有錯誤的地方它都有紅色圓圈圖標。還用文本標注來解釋這個地方錯在哪了。
據說非死book的標志和藍色配色方案是專門為馬克·扎克伯格選的,因為他是紅綠色盲。
在設計的時候,你可以模擬色盲看到的顏色場景。在Adobe Photoshop中:
將圖像轉換為RGB模式(此方案能夠為色盲提供最準確的結果)。
選擇View > Proof Setup > Color Blindness,然后選擇Protanopia-type或Deuteranopia-type。
提示: 不要只使用顏色來傳達意義。確保在不能很好的分辨顏色的時候使用文本和圖形讓人理解。
結論:
我們不是為設計師設計,我們是為用戶設計。盡管本文主要針對手機UI設計,但它可以適用于幾乎任何其他設計項目。
作者:Nick Babich
資料來源:uxplanet.org