色彩無障礙設計color-accessibil課件

V

色彩無障礙設計（ColorAccessibility）之「對比度」的探索V色彩無障礙設計（ColorAccessibi1為什么要讓對比度滿足「色彩無障礙設計標準」？1為什么要讓對比度滿足「色彩無障礙設計標準」？當你瀏覽自己喜歡的網站或在你選擇的設備上查看產品的最新版本時，請花點時間以不同的方式查看它。從屏幕上退后一步。稍微閉上眼睛，使你的視線有點被睫毛遮擋。你還能看到并使用這個網站嗎？你是否能夠閱讀標簽，字段，按鈕，導航和小頁腳文本？你能想象其他人會以何種不同方式閱讀和使用它嗎？滿足「ColorAccessibility」當你瀏覽自己喜歡的網站或在你選擇的設備上查看產品的最新版本時約有4％

的人口視力低下，0.6％

視盲。7-12％

的男性、1％

的女性有不同形式的色覺缺陷（如色盲）。他們難以區(qū)分某些特定顏色組合。低視力狀況隨著年齡的增長而增加，50

歲以上的一半人有一定程度的低視力低狀況。全球增長最快的人群是

60

歲以上的人。過了

40

歲，大多數人都需要老花鏡，才能清楚地看到小物體或文字。1.面向大眾的產品，要考慮「有視覺障礙的用戶」?jié)M足「ColorAccessibility」1.面向大眾的產品，要考慮「有視覺障礙的用戶」?jié)M足「Colo也許你覺得你的設計在Mac上看起來很完美??！2.要盡量讓產品在「不佳的使用條件」下，仍能使用滿足「ColorAccessibility」老舊、性能差的設備/顯示器

交通工具強烈的陽光下、昏暗的環(huán)境也許你覺得你的設計在Mac上看起來很完美??！2.要盡量讓滿足「ColorAccessibility」在這個多樣化的世界上，并不是所有人都能毫無障礙、順利地使用各種產品。如果沒做可用性測試，很可能在真正的「主要使用場景」中，你的產品是幾乎沒法用的。優(yōu)秀的無障礙設計，不僅能讓殘疾人用戶正常地與產品交互；還會為普通人提供更好的使用體驗。將「無障礙設計」考慮到產品設計中，是一件非常有必要的事。滿足「ColorAccessibility」在這個多樣化的2「ColorAccessibility」是什么？2「ColorAccessibility」是什么？「ColorAccessibility」是什么？WCAG2.0（WebContentAccessibilityGuideline，Web內容無障礙指南）提出了「POUR無障礙原則」：易于感知的（Perceivable）便于操作（Operable）容易理解的（Understandable）穩(wěn)定耐用的（Robust）

顏色的選擇屬于「易于感知的」無障礙設計范疇。也就是說，網站/App的內容應該很容易被看到——尤其是文字和圖像，應該有足夠高的色彩對比度，使之很容易地從背景中被辨識出來?！窩olorAccessibility」是什么？WCAG對比度（最?。何淖趾捅尘吧膶Ρ榷戎辽僖?.5:1的對比度（AA級），大文本：大號文本至少有3:1的對比度;對比度（加強）：文字和背景色的對比度至少有7:1的對比度（AAA級），大文本：大號文本至少有4.5:1的對比度。Ps：大文本大于等于24px或19px(bold)。顏色對比度無障礙標準「ColorAccessibility」是什么？對比度（最?。何淖趾捅尘吧膶Ρ榷戎辽僖?.5:1「ColorAccessibility」是什么？這項規(guī)范可以幫助視力障礙用戶更好地使用互聯網產品?！窩olorAccessibility」是什么？這項規(guī)范可將規(guī)范總結成表格：「ColorAccessibility」是什么？當字號≥24pxnormal/19pxbold,白背景上能用的最淺的純灰色是#959595。當字號＜24pxnormal/19pxbold，白色背景上可以用的最淺純灰色是#767676。（如果在灰色背景上，文字顏色應該更深）將規(guī)范總結成表格：「ColorAccessibility」以下情況的文本，無最低對比度限制：未激活的用戶界面組件的一部分（按鈕或菜單選項）；表單字段的占位符(placeholder)或ghosttext；「ColorAccessibility」是什么？以下情況的文本，無最低對比度限制：「ColorAccess以下情況的文本，無最低對比度限制：只是純粹的裝飾；文本作為「包含其他重要視覺內容圖片」的一部分；「ColorAccessibility」是什么？以下情況的文本，無最低對比度限制：「ColorAccess以下情況的文本，無最低對比度限制：文本作為logo或品牌名稱的一部分?！窩olorAccessibility」是什么？以下情況的文本，無最低對比度限制：「ColorAccess3「對比度檢測」工具推薦3「對比度檢測」工具推薦「對比度檢測」工具1.WebAIM’sColorContrastChecker：可以直接在線調顏色，實時看對比度是否滿足要求。「對比度檢測」工具1.WebAIM’sColorCont「對比度檢測」工具2.Easilycalculatecolorcontrastratios：方便地檢測對比度是否達標?！笇Ρ榷葯z測」工具2.Easilycalculateco4大廠案例4大廠案例GoogleChrome大廠案例「無障礙設計」已經是GoogleChromeDNA的一部分。過去的兩年中，這方面做了尤其多的努力。新的配色方案符合WCAG2.0規(guī)范，有足夠高的對比度。所有的text、icon，都盡量滿足WCAG2.0AAA標準。GoogleChrome大廠案例「無障礙設計」已經是GoGoogleChrome大廠案例經驗證，發(fā)現Google果然在明暗兩種背景下的配色，幾乎都滿足WCAG2.0AAA標準（colorcontrastratio>4.5）。唯獨白背景下的warning色對比度為3.3，僅滿足AA標準(colorcontrastratio>3)。另，disabled的顏色對比度不屬于限定范圍，Google對比度是1.8、2.2。GoogleChrome大廠案例經驗證，發(fā)現GoogleGoogleChrome大廠案例另外，Google在深淺背景上使用的顏色，都不是直接將brandcolor拿過來就用，而是根據不同背景調整后的顏色。GoogleChrome大廠案例另外，Google在深淺GoogleChrome大廠案例而即使是brandcolor，Google也盡量使之和白背景的對比度滿足AA標準（黃色、橙色例外）。GoogleChrome大廠案例而即使是brandcoTwitter大廠案例Twitter大廠案例Twitter大廠案例黑色、深灰色，危險色，都滿足對比度＞4.5；Disabledcolor對比度是1.9，接近2。Twitter大廠案例黑色、深灰色，危險色，都滿足對比度＞規(guī)律總結大廠案例黑/白色、深灰色、危險色，都盡量滿足對比度＞4.5；（最高對比度一般在16-18左右；最高對比度是21，也就是#000000+#FFFFFF。它們會產生一種“震顫效應”，會讓你覺得兩種色彩之間會產生模糊、震顫或者發(fā)出光暈的視覺效果。盡量別用這種對比，這會引起一些誦讀困難癥患者的不適）規(guī)律總結大廠案例黑/白色、深灰色、危險色，都盡量滿足對比度規(guī)律總結大廠案例深色背景的對比度，比淺色背景的容易滿足一些。（即便如此，謹慎在產品中使用深色調，研究表明散光的人在黑色背景上閱讀白色文字比在白色背景上閱讀黑色文字更難。在淺色背景上用黑色字符閱讀時，比在深色底閱讀淺色字的準確率，高出26%)規(guī)律總結大廠案例規(guī)律總結大廠案例Disabledcolor、placeholder雖未做限制，但淺色背景上對比度大概是1.8~2.3（盡量2以上），深色背景對比度大致是2.5~3（盡量3）；未激活控件（如tab）文字顏色一般對比度＞3；文字顏色、icongraphy，為了滿足無障礙色彩對比要求，一般不直接使用brandcolor，而是加深/變淺后再用；規(guī)律總結大廠案例Disabledcolor、placeho5滿足「無障礙色彩標準」的配色流程5滿足「無障礙色彩標準」的配色流程⒈先確定各顏色的深淺「無障礙色彩標準」的配色流程首先確定的主色調，比如是藍色。根據主色調確定不同深淺的灰色。Colllor這個在線工具能幫你完整這項工作。設計時，可以先從一個非常清晰的方案開始嘗試，然后再慢慢往你的美學方向調整。⒈先確定各顏色的深淺「無障礙色彩標準」的配色流程首先確定的「無障礙色彩標準」的配色流程選定一個灰色后，再根據這個灰色選出灰色的淺色系和深色系?！笩o障礙色彩標準」的配色流程選定一個灰色后，再根據這個灰色選「無障礙色彩標準」的配色流程每個顏色4-6個深淺度比較合適，不同深淺的顏色別太接近，互相和諧。如果自己創(chuàng)建變化規(guī)則也可以，如「疊加5%的黑色」或者「透明度變?yōu)?0%」等等。無論采用哪種方法，確保所有顏色的深淺變化，都遵循統(tǒng)一的規(guī)則?！笩o障礙色彩標準」的配色流程每個顏色4-6個深淺度比較合「無障礙色彩標準」的配色流程嘗試—失敗—再嘗試」——這個過程可能會花費大量時間。測試、重選、調整。滿足accessibilitystandards。然后再將選好的顏色，放到組件、背景中去測試對比效果?！笩o障礙色彩標準」的配色流程嘗試—失敗—再嘗試」——這個過程2.確定文字顏色「無障礙色彩標準」的配色流程主要文字顏色:段落、標簽、其他主要文字；次級文字顏色:表單輔助說明、說明文字、表格標題等；可交互文字顏色：主要是鏈接文字；錯誤信息文字顏色:有的在一些交互控件旁邊；禁用文字顏色：通常用在表單控件和按鈕上。確保至少包含：主要，次要，鏈接和錯誤4種文本顏色。圖標顏色一般可以直接沿用已設置好的primary,secondary,interactive，error的顏色。2.確定文字顏色「無障礙色彩標準」的配色流程主要文字顏色:「無障礙色彩標準」的配色流程

測算出在背景色上，可用的最低對比度的灰色。如果按「WCAG2.0AA」的標準，下圖的#6B797F就是白背景上文字的最淺灰色?！笩o障礙色彩標準」的配色流程測算出在背景色上，可用的最低對3.檢測文字色的對比度「無障礙色彩標準」的配色流程然后，將文字放在按鈕上，檢測對比度是否滿足要求。不要忘記交互式狀態(tài)，例如按鈕，選項卡，列表組和鏈接的hover，active和selected狀態(tài)。3.檢測文字色的對比度「無障礙色彩標準」的配色流程然后，將「無障礙色彩標準」的配色流程將文字放在每一種背景色上測試文字對比度?？梢杂肊ightShapesContrastGrid實時測量兩兩顏色的對比度是否達標?！笩o障礙色彩標準」的配色流程將文字放在每一種背景色上測試文字「無障礙色彩標準」的配色流程來回測試的同時，反復優(yōu)化色板「無障礙色彩標準」的配色流程來回測試的同時，反復優(yōu)化色板4.在不同環(huán)境下測試你的色板「無障礙色彩標準」的配色流程這是設計過程中最重要的步驟之一。調研確定用戶使用你的產品的主要環(huán)境。環(huán)境測試很簡單，把你的設備帶到強日光下去、放在昏暗房間里，調低手機的屏幕亮度（許多手機快沒電了的用戶經常這樣做）自己去感受測試。如果有些地方不好用，重新做。4.在不同環(huán)境下測試你的色板「無障礙色彩標準」的配色流程這5.確定不同色調的顏色組合方式「無障礙色彩標準」的配色流程5.確定不同色調的顏色組合方式「無障礙色彩標準」的配色流程6.輸出色彩規(guī)范文檔「無障礙色彩標準」的配色流程6.輸出色彩規(guī)范文檔「無障礙色彩標準」的配色流程5其他設計點5其他設計點1.Input要有清晰的邊界。其他設計點Input是常被人忽略的一個方面。輸入框有明確的邊界，這對行動/認知障礙的用戶很重要。清晰的邊界，可以讓用戶明確知道點擊目標的位置和大小。如果沒有清晰的邊框，認知障礙用戶可能很難找到輸入框在哪。一個傳統(tǒng)輸入框樣式，界限明晰，標簽清楚1.Input要有清晰的邊界。其他設計點Input是常其他設計點下圖7個input的例子，只有「SearchTw