小紐扣

現今設計師們需要設計讓所有用戶都能訪問的界面來滿足日益增長的需求。適應殘障用戶是很重要的,但是有很多關于色彩對比的誤解是由被誤解的人造成的。

他們不了解色彩對比標準適用于何種情況,就鸚鵡學舌地重復這些誤解來抹黑設計。不僅如此,他們還認為,每當使用顏色對比來傳達信息時,界面是不可訪問的。

因此,設計師常感覺需要關注可訪問性并被誤以為他們設計的界面實際上是不可訪問的。本文揭露并糾正了關于色彩對比可訪問性的誤解。

 

誤解1:WCAG始終是最佳選擇

Web內容可訪問性指南(WCAG)被用作確定色彩對比可訪問性的標準。但是,這些準則在實際應用中并不總是符合需求的。你應使用指南來指導你的設計決策而不是教條的遵循它們。

WCAG不適用的一種情況是白色文本的亮度對比。以下示例兩個圖標底色都是藍色,但其中一個是白色文案,另一個是黑色文案。當你調查用戶哪個按鈕更易于閱讀時,大多數人會告訴你帶有白色文本的按鈕更易讀。然,色彩對比可訪問性說明了另一個情況。

黑色文本對比度是5.41,符合標準。白色文本的對比度是2.94,不符合標準。根據對比度標準,白色文本按鈕不易于閱讀,但事實上其更容易閱讀。

一項類似對比白色和黑色文字按鈕的研究證實了這一情況。不僅普通視力的用戶發現白色文本更易于閱讀,且色盲用戶也是如此。

這種對比度誤差似乎發生在藍色和橙色背景上的白色文本上。WCAG并不總能解釋白色文本高亮對比度。白色是純粹的亮度,沒有色調或飽和度,對比度最強。因此,白色文本的按鈕更易于閱讀也在情理之中。

白色文本的對比度設計出錯的原因是其本身具有高亮度,且位于高亮度背景上。在淺色背景上的淺色文本通過計算呈現出低對比度。你的設計應該是為滿足用戶的需求,而不是計算算法。

WCAG旨在幫助設計師選擇正確的色彩對比。俗話說“地圖不是領土”,不要將現實模型與現實本身混淆。

 

誤解2:文本必須符合3A要求,否則用戶無法訪問

WCAG有不同級別的標準,有些人認為所有文本都必須符合最高要求(AAA),否則大部分用戶將無法訪問。當您了解3A要求是如何制定的,就會明白這一認知是錯誤的。

3A要求構成7:1的對比度,以補償對比靈敏度損失的低視力用戶(視力下降為0.25(20/80)或更多),這些用戶中的許多人使用了增強對比度的輔助工具,以便瀏覽網頁時查看多個內容。AAA要求僅適用于不使用輔助技術的視力0.25(20/80)的較小群體用戶。

普通人群中,視力下降為0.25的很少見,而且大部分還是與年齡相關患有眼疾的老年人。一項研究發現,大多數視力低下與衰老密切相關。大多數視力正常者在70歲時視力開始下降。如果您的用戶大多數是70歲或以上的,滿足AAA的一些要求可以使他們受益。WCAG不建議滿足AAA所有要求,因為某些內容是不可能滿足的。

 

誤解3:界面組件與文本對比度的標準一致

許多人錯誤的保持界面組件與文本使用相同的對比度標準,然而實際上它們是不同的。界面組件的對比度是3:1,而文本的是4.5:1。文本需要更高的對比度,因為用戶需要閱讀。界面組件不需要讀取,標準較低。

許多細微差別會影響文本對比度,例如字體大小和粗細。較大字體(18 pt)的文本和較粗字體(14 pt粗)的文本要求較低的對比度,不僅如此,某些界面組件也不受此要求約束。

在保持界面組件或文本使用對比度標準前,請您確保使用得當。

 

誤解4:灰色的文本和按鈕無法訪問且看上去是禁用的

另一個普遍的誤解是灰色文本無法訪問。許多人認為用戶無法閱讀灰色文本,因為它看起來對比度很低.有時這可能是正確的,但有時這是一個錯誤的假設。例如,下圖有灰色文本的按鈕,有人會認為它是無法訪問的;然而,通過對比度檢查器發現,它不僅符合AA標準,且比率遠高于標準。

您可能會聽到的另一個誤解是,灰色按鈕是無法訪問的,因為它不符合對比度標準.事實證明,按鈕的成功標準并不需要顯示點擊區域的可視邊框.如果帶有文本的按鈕有邊框,則除了文本對比度之外,沒有其他對比度要求。因此,大多數人認為無法訪問的灰色按鈕通過了對比度要求。

這個成功標準還意味著,只要文本標簽達到4.5:1的對比度,按鈕上的圖標就沒有對比度要求。但是,如果圖標沒有文本標簽,則3:1的對比度要求適用于該圖標。

還有一種說法是灰色按鈕看起來是禁用的,這種說法經常被有偏見的人重復,他們不理解非活動組件的正確所指;禁用按鈕表示與文本標簽缺乏對比度。當按鈕難以閱讀時,用戶不會去理會它,這正是禁用按鈕的目的;更不用說,對比度要求并不適用于非活動組件。

 

誤解5:色盲用戶無法分辨對比色差異

一個常見的假設是,如果設計使用顏色對比來傳達信息,則色盲用戶無法察覺到這種差異;顏色色相和顏色對比度是兩個不同的維度。色盲用戶很難分辨特定的顏色,但對感知顏色對比差異方面沒有困難。

例如,大多數人認為色盲用戶無法閱讀以下這些用顏色對比度來區分不同狀態的按鈕,但事實是色盲用戶可以十分清楚的區分色彩對比度。這些按鈕只使用一種顏色且有足夠的對比差異。

通過使用色盲模擬器,你可以模擬色盲用戶看到的內容,紅綠色色盲和藍黃色色盲不難感知顏色對比度差異。

當紅、綠這兩種顏色使用幾乎相同的暗度,色盲用戶才很難注意到色差。下面的例子展示了當按鈕使用相似暗度的紅色和綠色,色盲用戶看到的是什么情況。

如果你要用不同的顏色來區分不同的狀態,除了顏色之外,你還需要另外的視覺提示。但如果你只使用顏色對比來區分狀態,那么色盲用戶可以無障礙訪問。

色盲有很多種,但你最應關注的是紅綠色色盲。色盲人群中有99%是紅綠色色盲。

 

誤解6:僅使用顏色提示不足以傳達信息

這是人們最容易誤解的。他們經常引用“顏色的運用”要求,卻不知道該標準何時適用。請記住,在隨意使用這些標準之前,你需要了解它們之間的細微差別。

可訪問性要求指出,顏色不應該用作傳達信息、指示操作或區分元素的唯一視覺方式。但是,此標準僅適用于告知用戶不同顏色有特定含義的情況。換句話說,如果你用色差來傳達信息,你需要一個額外的提示;但如果你是用顏色明暗來傳達信息且對比度差異足夠大,則不需要額外的提示。

例如,下面的第一個切換按鈕使用藍色表示活動狀態,但是沒有為藍色指定特定含義?;顒訝顟B是通過顏色對比來提示的,而非色相。

活動狀態的顏色是任意的。你可以使用任何其他顏色,只要與非活動狀態保持高對比度就可以了。因此,“顏色的運用”要求并不適用于此場景。

顏色賦義的一個例子是表單字段上的錯誤狀態。紅色通常用于提示文本字段中的錯誤。在這種情況下,紅色不足以提示錯誤狀態,因為色盲用戶看不到。紅色在他們看來是黑色的。因此,你需要額外的提示,譬如文本或圖標來提示錯誤狀態。

另一個例子是在界面上使用顏色來提示系統狀態。綠色和紅色的色調通常用來表示系統問題的嚴重性?!邦伾倪\用”要求是適用這種情況的,因為顏色被賦予了特定含義。圖標用來幫助色盲用戶區分每個系統狀態。

談到狀態,顏色對比度并不總是唯一的提示方式。視覺深度也是種用戶體驗提示。當與背景形成對比的對象看起來更近且更突出,而缺乏對比度的對象顯得更遠且更弱時,就會產生視覺深度。下例中的藍色按鈕似乎離用戶最近。因此,著重強調和突出的表示活動狀態。

正是這種與背景的對比創造了按鈕的視覺深度,以便用戶區分活動狀態。如果兩個按鈕具有相同的對比度,則用戶將無法感知到視覺深度。

 

誤解7:無障礙設計滿足了每個用戶的需求

每個設計師都想滿足每個用戶的需求。就像設計師們所追求的那樣,即使遵循了所有WCAG要求,你也無法實現它。因為,總有一些用戶會對你的設計感到不滿意。

與其為一個無法實現的幻想而努力,不如為一個可實現的現實而奮斗?,F實就是,可訪問設計不能滿足每個用戶的需求,但它可以滿足盡可能多的用戶的需求。

理解這一現實將意味著接受這樣一個事實:少數用戶的體驗不會像大多數用戶那么好。但幸運的是,對于少數人來說,他們可以使用具有高對比度模式的輔助技術。真正理解易訪問性的設計師將努力實現現實的理想,而不是幻想的。

 

顏色對比可訪問性的細微差別

在為用戶設計時,可訪問性應該始終是一個優先級。WCAG指南是幫助你實現最高標準的可訪問性設計的有效工具。這些誤解并不是WCAG指南造成的。它們是由誤解、歪曲和誤用指南的人造成的。是時候結束這些誤解了。

理解顏色對比度可訪問性的細微差別將幫助你準確地滿足WCAG標準。當其他人將顏色對比可訪問性誤解投射到你的設計中時,你可以對其進行更正。你若保持視覺上的簡潔和美觀的同時,又兼顧可訪問性;這將是一個能滿足幾乎所有用戶的包容性界面。

 

備注:以下內容在翻譯過程中根據閱讀習慣有相應的調整,如有不妥歡迎大家根據官網鏈接進行比對

 

原文地址:UXmovement

譯文地址:站酷

作者:anthony

譯者:黎沫limo

轉載請注明:學UI網 » 顏色對比可訪問性的常見誤解

登錄收藏
 
你可能喜歡的:
沒有競品參考就不知道如何設計,什么情況?沒有競品參考就不知道如何設計,什么情況?
剖析“界面設計”之頁面基本元素(上)剖析“界面設計”之頁面基本元素(上)
設計系統的道與術——下篇設計系統的道與術——下篇
不懂如何設計小程序?來看這份超全面指南!不懂如何設計小程序?來看這份超全面指南!
提高落地頁轉化,按鈕在左?按鈕在右!提高落地頁轉化,按鈕在左?按鈕在右!
用戶不信任你做的產品/界面?不如試試這5招用戶不信任你做的產品/界面?不如試試這5招
UI設計之圖標設計UI設計之圖標設計
北極星指標與增長模型北極星指標與增長模型
專業至上,價值為王:知識問答類產品用戶需求洞察報告 | 【芒種·報告】專業至上,價值為王:知識問答類產品用戶需求洞察報告 | 【芒種·報告】
從「物種起源」到「設計進化論」- 阿里云設計語言哲思從「物種起源」到「設計進化論」- 阿里云設計語言哲思
?
类似钱咖的高额赚钱 爆中3组平特三连肖 体彩环岛赛的玩法 上海时时乐万能两码 彩票开奖查询上海选四 天天三分彩 海南4 1下载安装 天天捕鱼电玩城玩钱 配资炒股_杨方配资平台 白小姐四肖必选一肖王中王 金融投资行业股票