色彩無障礙設(shè)計(jì)color-accessibil課件

V

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

的人口視力低下，0.6％

視盲。7-12％

的男性、1％

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

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

60

歲以上的人。過了

40

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

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

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

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