下圖中的文檔中的 docsify 邊欄是如何設(shè)置的?
在你的項(xiàng)目的 index.html 文件中,添加參數(shù):
loadSidebar: true
然后再在項(xiàng)目中添加一個(gè) _sidebar.md 文件,這個(gè)文件的格式為:
- CWIKIUS 文檔概述
- [文檔介紹和快速鏈接](README.md)
- [公眾平臺(tái)](CONTACT.md)
- Gradle
- [Deploy](deploy.md)
- 其他小工具
- [JWT](jwt/README.md)
- [Awesome docsify](awesome.md)
- [Changelog](changelog.md)
采用分級(jí)的方式鏈接到你的項(xiàng)目文檔路徑中。
然后保存提交就可以了。
輯導(dǎo)語(yǔ):如今人們已經(jīng)習(xí)慣于使用各種智能設(shè)備,然而全球有3億左右殘障人群,他們的需求不該被忽略,于是無(wú)障礙設(shè)計(jì)便應(yīng)運(yùn)而生。本文作者從色盲用戶(hù)的角度出發(fā),分享如何做色彩無(wú)障礙設(shè)計(jì),一起來(lái)學(xué)習(xí)一下吧。
隨著科技的普及和快速發(fā)展,人們?cè)絹?lái)越頻繁和習(xí)慣于使用智能設(shè)備,然而全球有3億左右的殘障人群, 無(wú)論是從科技還是法律的角度,這群人的需求不該被忽略。
于是無(wú)障礙設(shè)計(jì)應(yīng)運(yùn)而生。無(wú)障礙具體可拆分為視覺(jué)、聽(tīng)覺(jué)、操作、認(rèn)知、言語(yǔ)交流無(wú)障礙. 而色彩是視覺(jué)中很重要的部分,我們的世界是五彩繽紛的,不同的色彩被賦予不同的意義,對(duì)于色覺(jué)障礙人群,我們?cè)撊绾伟菪缘卦O(shè)計(jì),讓他們的生活更加便利和美好呢?
無(wú)障礙設(shè)計(jì)無(wú)處不在,舉個(gè)例子:Spotify有兩種播放模式,一個(gè)是隨機(jī)播放,一個(gè)是循環(huán)播放.它通過(guò)改變圖標(biāo)的顏色為綠色,表明激活狀態(tài),但是如果僅僅只是改變顏色,對(duì)于色盲用戶(hù)來(lái)說(shuō),不容易識(shí)別,因?yàn)樵觉r艷的綠色在他們看來(lái)是暗淡的:
但是加上小綠點(diǎn)之后,不去依靠顏色也很容易判斷當(dāng)前的狀態(tài):
再舉個(gè)例子:有一款名為FODMAP的應(yīng)用程序值得借鑒,FODMAP是在腸道中不能正確吸收的糖, 這是一款通過(guò)列出食物中各種含糖量,來(lái)給用戶(hù)提供飲食參考的軟件。
軟件中用紅黃綠表示不同的FODMAP等級(jí),但是這讓色盲用戶(hù)感到很困擾:
幸運(yùn)的是,這個(gè)軟件的設(shè)置中,可以打開(kāi)色盲幫助選項(xiàng), 打開(kāi)后你看到的界面就變成了這樣:
用顯而易見(jiàn)的符號(hào)替換顏色,無(wú)論對(duì)色盲用戶(hù)還是普通用戶(hù),都很友好。
再舉個(gè)例子, 英國(guó)的在線(xiàn)足球網(wǎng)站在2012年時(shí)是這樣的:
色盲用戶(hù)根本無(wú)法分辨輸贏情況,此舉無(wú)疑是白白流失了全國(guó)的色盲用戶(hù)。后來(lái),他們也意識(shí)到了問(wèn)題,于是現(xiàn)在的設(shè)計(jì)時(shí)這樣的:
每個(gè)顏色色塊中填入字母,W代表贏,L代表輸,D代表平局,色盲用戶(hù)也可以輕松獲得信息。
但是目前無(wú)障礙的普及程度并不高,色盲用戶(hù)在日常生活中仍然面臨很多的問(wèn)題,比如在商店買(mǎi)衣服問(wèn)題、在線(xiàn)選座問(wèn)題、無(wú)法使用色彩標(biāo)簽等等。本文將帶你全面地了解如何做好色彩無(wú)障礙設(shè)計(jì)。
色盲的頻率相當(dāng)高,十二分之一的高加索人(8%),二十分之一的亞洲人(5%)和25分之一的非洲男性(4%)是所謂的“紅綠”色盲。它比AB血型更常見(jiàn),據(jù)統(tǒng)計(jì),平均每12名男性中就有1人有某種形式的色盲, 每200名女性中就有1人, 占人口的4.25%。麥當(dāng)勞每天為300萬(wàn)色盲客戶(hù)提供服務(wù)。亞馬遜每天超過(guò)110萬(wàn)客戶(hù)是色盲。
色盲遠(yuǎn)比我們想象中的數(shù)量要龐大的多,所以設(shè)計(jì)色盲友好的互聯(lián)網(wǎng)產(chǎn)品,這件事情應(yīng)當(dāng)被重視和完善。
正常的彩色視覺(jué)需要用到三種功能正常的錐形細(xì)胞,紅色、綠色和藍(lán)色錐形細(xì)胞,根據(jù)三色錐形細(xì)胞的是否缺失,又可以將色盲分為全色盲,雙色色盲和三色色盲。
三色色盲擁有三種錐形細(xì)胞, 但是其中一種錐細(xì)胞感知的光略微偏離對(duì)齊,根據(jù)哪種錐形細(xì)胞類(lèi)型“有缺陷”,產(chǎn)生三種不同類(lèi)型的效果,并且還具有不同的嚴(yán)重性。
三種情況分別是是紅色弱,即對(duì)紅光的敏感性降低,綠色弱: 對(duì)綠光(最常見(jiàn)的色盲形式)的敏感性降低,以及藍(lán)色弱: 對(duì)藍(lán)光的敏感性降低(極為罕見(jiàn),只有0.001%的發(fā)生率)。
對(duì)某種類(lèi)型光的感知力,有敏感性降低的,也有完全感知不到的,程度不一。
因?yàn)榧t色和綠色錐形細(xì)胞感知到的光譜部分明顯重疊,因此紅色和綠色色弱都難以分辨紅色、綠色、褐色和橙色, 所以在診斷的時(shí)候常常被統(tǒng)稱(chēng)為“紅綠色盲”,他們對(duì)藍(lán)色和紫色以及多種顏色的組合也常常難以區(qū)分。
藍(lán)色弱很難分辨藍(lán)色VS黃色,紫羅蘭VS紅色,藍(lán)色VS綠色. 藍(lán)色弱眼中是紅粉色,黑白色和青綠色的世界。
1)紅色色弱
2)綠色色弱
3)藍(lán)色色弱
雙色色盲只有兩種顏色的錐形細(xì)胞,第三種類(lèi)型的細(xì)胞完全缺失. 所以,紅色盲完全無(wú)法感知到紅色,綠色盲完全無(wú)法感知到綠色,藍(lán)色盲完全無(wú)法感知到藍(lán)色。
同時(shí)喪失了紅色和綠色感知力的人生活在暗綠色的世界,所以藍(lán)色和黃色會(huì)非常突出。
大約1/2的三色色盲看到的世界與雙色色盲看到的很相似,但是三色色盲色彩感知力受光照影響較大,在良好的光照下,他們對(duì)色彩的感知力就更好,反之久更糟糕。總的來(lái)說(shuō), 雙色色盲在辨別色彩方面比三色色盲更容易些。
為了讓大家更清晰的了解不同色盲眼中的世界,這里做一些展示:
1)紅色色盲
2)綠色色盲
3)藍(lán)色色盲
全色盲完全沒(méi)有任何一種顏色細(xì)胞,他們眼中世界是完全的黑白色,就像是黑白電視機(jī)那樣.但是我們?cè)谧霎a(chǎn)品無(wú)障礙時(shí),基本不會(huì)考慮這一類(lèi)人群,因?yàn)槿ぐl(fā)生的概率實(shí)在是太低了,33000人中僅有1人,他們的生活因此有很多阻礙,在正常的光照條件下,也需要戴深色墨鏡。
WAI制定了幾項(xiàng)W3C建議,包括:
WCAG有三種評(píng)級(jí): A、AA和AAA,標(biāo)準(zhǔn)從低到高:
WCAG2.1詳細(xì)指南完整版可查看: https://www.w3.org/TR/WCAG21/
快速參考WCAG標(biāo)準(zhǔn): https://www.w3.org/WAI/WCAG21/quickref/?currentsidebar=%23col_overview#use-of-color
WCAG關(guān)于顏色的要求描述:https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html
WCAG中將字體分為一般字體和大字體。
大字體是這樣定義的:“大于等于18點(diǎn)常規(guī)體或者大于等于14點(diǎn)的粗體,如果是中日韓的語(yǔ)言,就要換算成同等大小”,除卻大字體之外的就是一般文字。
AA評(píng)級(jí)對(duì)于一般文字來(lái)說(shuō),文字和背景的顏色對(duì)比度不少于4.5:1的對(duì)比度;對(duì)于大字體和(如圖標(biāo)、表格等等)組件的要求就沒(méi)那么嚴(yán)格,只要顏色對(duì)比不低于3:1即可。
如果帶有文本的按鈕也有彩色邊框,因?yàn)檫吙驔](méi)有提供輔助信息,所以對(duì)邊框沒(méi)有對(duì)比度要求,只要該文字符合AA評(píng)級(jí)即可。
顏色在特定的語(yǔ)境中,會(huì)被賦予特殊的含義,如常見(jiàn)的紅色代表警告,綠色代表合格通過(guò)的意思等等,而患有色彩缺陷、視力衰退的老齡化群體、還有使用單色閱讀器(如kindle紙墨水)的人都可能會(huì)因此遺漏了顏色所傳達(dá)出的重要信息。
同時(shí)在用顏色表達(dá)某種信息時(shí),為了確保所有的用戶(hù)都能接受到信息,需要添加另一種視覺(jué)形式,下面給大家舉例說(shuō)明:
1)文字
文字是最容易讓色盲用戶(hù)了解到顏色含義的元素,也是我們首先會(huì)考慮到的。
一個(gè)典型例子是表單字段上的錯(cuò)誤狀態(tài), 紅色通常用于表示文本字段中的錯(cuò)誤, 但是標(biāo)紅不足以引起色盲用戶(hù)的注意,因?yàn)閺乃麄兊囊暯强矗?紅色的字體在一群黑色的字體中顯得很暗, 很難分辨出來(lái)。因此,你需要一個(gè)額外的提示,例如文本或圖標(biāo),來(lái)指示錯(cuò)誤狀態(tài)。
2)圖標(biāo)
圖標(biāo)是使用頻率很高的組件, 一些通用圖標(biāo)的含義甚至不需要Tooltip來(lái)解釋?zhuān)脩?hù)就能一眼識(shí)別, 比如設(shè)置、警告、成功等等圖標(biāo),舉個(gè)例子:許多B端界面會(huì)通過(guò)不同的語(yǔ)義顏色,告知用戶(hù)某個(gè)流程的狀態(tài),但是對(duì)于色盲用戶(hù)來(lái)說(shuō),識(shí)別顏色對(duì)應(yīng)的狀態(tài)圖例是一件很艱難的事情,但是如果添加圖標(biāo)輔助信息,一切就變得容易多了!
3)明暗對(duì)比
這一點(diǎn)常常被大家忽略.如果兩種顏色的色調(diào)不同,但是擁有強(qiáng)烈的明暗對(duì)比,那么在這里, 明暗對(duì)比也算是另一種視覺(jué)輔助形式,只要這兩種顏色的對(duì)比不低于3:1(AA)。
只有一種情況例外, 就是用戶(hù)需要準(zhǔn)確地識(shí)別一種特定的顏色,這個(gè)時(shí)候?qū)Ρ榷染筒荒芩阍趦?nèi)。
4)符號(hào)
舉個(gè)例子,標(biāo)注紅色的文字標(biāo)簽是必填項(xiàng),出于無(wú)障礙的需要,我們可以在紅色標(biāo)簽上打一個(gè)星號(hào),這樣即使注意不到顏色差異,看到星號(hào)也會(huì)意識(shí)到此項(xiàng)必填。
但是!大多數(shù)情況下,星號(hào)的尺寸很小(位于左上角),不容易被屏幕閱讀器捕捉到,為了改善這樣的情況,設(shè)計(jì)者可以增大星號(hào)的尺寸,以及為星號(hào)添加注釋?zhuān)═ooltip), 這個(gè)注釋是由開(kāi)發(fā)者完成的, 不借助屏幕閱讀器是無(wú)法捕捉這個(gè)信息。
5)數(shù)字
這是一個(gè)丙烯結(jié)構(gòu)式,三個(gè)碳原子被標(biāo)上了三種顏色(化學(xué)老師會(huì)教我們標(biāo)記碳原子序號(hào)的規(guī)律,不過(guò)就假設(shè)這是老師在給一群初學(xué)者的課件吧),那么老師提問(wèn)“黃色的碳原子和紫色的碳原子中間用的是什么鍵”,色盲學(xué)生可能就沒(méi)辦法辨別顏色所對(duì)應(yīng)的碳原子了,但是如果標(biāo)上序號(hào),這樣提問(wèn):“1號(hào)碳原子和2號(hào)碳原子中間用的是什么鍵?”,是不是所有的學(xué)生就一目了然了?
6)圖形
減少使用顏色的數(shù)量,增加圖形樣式,這樣盲人用戶(hù)能夠花費(fèi)更少的力氣在辨別顏色上。
7)圖案
在顯示圖形或者圖表時(shí),可以提供一些圖案供用戶(hù)填充,色盲雖然對(duì)顏色不敏感,但是對(duì)于圖案卻非常容易察覺(jué)區(qū)別。
這里推薦幾個(gè)提供大量圖案樣式的網(wǎng)站:Http://pattern.monster
交互式地圖(付費(fèi)使用):https://www.arcgis.com/index.html
Figma圖案填充插件:Hero Pattern for Image https://www.figma.com/community/plugin/743134103711120154
以折線(xiàn)圖舉例:
再以堆疊條形圖為例:
再舉個(gè)倫敦地鐵圖和上海地鐵圖的例子:
WCAG的標(biāo)準(zhǔn)被許多人奉為無(wú)障礙法則,但是有些情況下,并不適用。舉個(gè)例子:你覺(jué)得黑色字體和白色字體在橙色的背景上,哪一種看起來(lái)更清晰?
相信有不少人覺(jué)得白色字體看起來(lái)更舒服,更清晰,但是WCAG的顏色標(biāo)準(zhǔn)卻告訴我們,黑色達(dá)到了AAA的級(jí)別,而白色卻連AA級(jí)別都沒(méi)有達(dá)到:
不僅僅是我們,在很早之前,就有設(shè)計(jì)師對(duì)此產(chǎn)生疑惑,并做了用戶(hù)調(diào)研。
Ericka Seastrand 曾在2019年做過(guò)一項(xiàng)用戶(hù)調(diào)研,調(diào)研對(duì)象是20名色盲用戶(hù),測(cè)試問(wèn)題是: 黑色還是白色的字體在該背景下更突出? 最后的結(jié)果顯示: 61%的用戶(hù)認(rèn)為白色字體更清晰。
這些用戶(hù)也給出了具體的原因:
所以謹(jǐn)記:盡信書(shū),則不如無(wú)書(shū)。WCAG的標(biāo)準(zhǔn)僅供參考,但是實(shí)際運(yùn)用中,應(yīng)當(dāng)以用戶(hù)的感受為參考,質(zhì)疑精神是很可貴的!
1)灰色按鈕
有些人認(rèn)為不能夠使用灰色的按鈕,因?yàn)榛疑o人以不可用的暗示,但是其實(shí)并沒(méi)有領(lǐng)悟不可用狀態(tài)的本質(zhì). 視覺(jué)深度才是幫助用戶(hù)判斷按鈕狀態(tài)的核心.活動(dòng)狀態(tài)是通過(guò)顏色對(duì)比度而不是色調(diào)傳達(dá)的。
正常狀態(tài)的按鈕的文字與背景對(duì)比起來(lái),看上去更接近和占主導(dǎo)地位,而不可用狀態(tài)缺乏對(duì)比度,文字看起來(lái)在更遠(yuǎn)的地方。不過(guò)灰色按鈕經(jīng)常被用作二級(jí)按鈕,主按鈕都是需要使用彩色。
同樣地,按鈕的各種交互狀態(tài),只要對(duì)比度有差異性,能夠傳達(dá)視覺(jué)深度變化,就是符合無(wú)障礙的標(biāo)準(zhǔn)的,以Ant Design舉例:
2)讓你的主按鈕最顯眼
在大多數(shù)情況下,設(shè)計(jì)師們都是通過(guò)賦予主按鈕顏色,吸引用戶(hù)注意,但是在色盲用戶(hù)眼中,主按鈕的顏色差異很難被捕捉到,甚至在有些色盲眼中無(wú)法分辨顏色:
為了增加主按鈕和次按鈕的對(duì)比, 這個(gè)時(shí)候我們可以嘗試:
當(dāng)你在為你的產(chǎn)品或者品牌選擇色彩時(shí),一定要避免下面的色彩組合:
網(wǎng)頁(yè)中超鏈接文本很常見(jiàn),比如百度百科,如果只是用顏色區(qū)別超鏈接,對(duì)于有些色盲很難注意到這是一個(gè)超鏈接,他需要將鼠標(biāo)滑過(guò)時(shí),發(fā)現(xiàn)變成一只手,才能知道。
所以對(duì)于超鏈接文本,添加下劃線(xiàn)是一個(gè)很好的方式:
曾經(jīng)看過(guò)一個(gè)色盲講述自己買(mǎi)衣服的難題, 他來(lái)到商場(chǎng),看到一件衣服,但是不確定這個(gè)衣服是什么顏色,可是衣服上的標(biāo)簽也沒(méi)有寫(xiě)顏色,所以他只好硬著頭皮去問(wèn)商店里其他的人,承受著一些不解和懷疑的目光,如果這件衣服有清晰的顏色標(biāo)簽的話(huà),就能輕松解決這個(gè)問(wèn)題了。這一點(diǎn)對(duì)于購(gòu)物網(wǎng)站來(lái)說(shuō),尤其重要。
1. 避免文本和對(duì)象被背景遮擋的情況。 例如,文本/對(duì)象和背景之間的亮度和飽和度應(yīng)該有足夠的對(duì)比度。避免組合亮度相同但色調(diào)不同的顏色。例如,綠色背景上的紅色字符對(duì)色盲來(lái)說(shuō)是不可讀的。在深色背景上使用明亮的文本/對(duì)象,反之亦然。
2. 文本和對(duì)象盡可能粗或大,色盲人很難區(qū)分細(xì)線(xiàn)和小符號(hào)的顏色, 對(duì)于彩色文本,一定要使用粗體字體。
3. 小心使用紅色和綠色,對(duì)于視覺(jué)正常的人來(lái)說(shuō),純紅色是明亮生動(dòng)的顏色。但對(duì)于色盲來(lái)說(shuō),它就像藍(lán)色或深綠色一樣暗淡。特別是對(duì)于紅色盲來(lái)說(shuō),深紅色看起來(lái)幾乎是黑色的。因此,避免在黑色背景上使用紅色字符,包括黑板。但是有一些紅色對(duì)色盲來(lái)說(shuō)是鮮活的, 比如:
避免使用純綠色,使用偏藍(lán)一點(diǎn)的綠色。
4. 在深藍(lán)色背景上無(wú)法看清:深紅色、明亮的紫紅色、細(xì)線(xiàn)條。
5. 在一堆黑色字體中,很難看到深紅色強(qiáng)調(diào)的字體。
6. 盡量減少顏色的數(shù)量,可以使用不同的外形和少量容易識(shí)別的顏色的組合。
7. 保持顏色色調(diào)的對(duì)比的同時(shí),也可以添加亮度的對(duì)比。
8. 使用種類(lèi)少且容易識(shí)別的字體。
盡量不要使用顏色的名字交流信息. 在演講時(shí),去指代ppt上的某個(gè)東西時(shí),不要說(shuō)“那個(gè)紅色的細(xì)胞”,嘗試描述除了顏色信息之外的,比如“那個(gè)紅色的方形的位于PPT左上角的細(xì)胞”。
Stark: 色盲模擬器和顏色對(duì)比度檢查器網(wǎng)站, sketch/figma/XD插件 https://www.getstark.co
Color Oracle: 一款免費(fèi)的色盲模擬軟件,支持Windows,Mac 和 Linux. https://colororacle.org
Sim Daltonism: 一款色盲模擬軟件,可以選擇不同類(lèi)型的色盲.只有mac版本. https://michelf.ca/projects/mac/sim-daltonism/
Toptal:一款在線(xiàn)模擬色盲工具. https://www.toptal.com/designers/colorfilter
Color-contrast-checker: 顏色對(duì)比度檢查器,提供快速調(diào)節(jié), figma插件 https://www.figma.com/community/plugin/733159460536249875/A11y—Color-Contrast-Checker
Tanaguru Contrast Finder: 檢測(cè)顏色對(duì)比度,如果你的顏色沒(méi)有達(dá)到要求,還會(huì)提供新顏色建議. https://contrast-finder.tanaguru.com
Color Review: 提供兩種顏色組合在一起的預(yù)覽,檢測(cè)結(jié)果失敗還會(huì)提供顏色建議https://color.review
color contrast checker from polypane: 提供顏色對(duì)比和修改建議. https://polypane.app/color-contrast
Accessible colors: 提供顏色對(duì)比、修改建議、還可以輸入字體大小和字重. https://accessible-colors.com
Accessible color palette builder:選擇5個(gè)顏色,網(wǎng)站會(huì)通過(guò)分析這些的顏色的排列組合,判斷你的色板是否符合無(wú)障礙標(biāo)準(zhǔn)https://toolness.github.io/accessible-color-matrix
contrast grid:通過(guò)在左側(cè)邊欄手動(dòng)添加/刪減行列、編輯行列的色值,為您提供這些顏色排列組合的對(duì)比度結(jié)果,非常高效而且一目了然https://contrast-grid.eightshapes.com
Cloudflare color tool:當(dāng)你不知道選擇什么顏色毫無(wú)頭緒時(shí),你可以嘗試這個(gè)網(wǎng)站!它會(huì)幫你提取來(lái)自某個(gè)鏈接、某個(gè)圖片的顏色色板,當(dāng)然你也能輸入色值.然后把這些顏色拖到對(duì)應(yīng)的功能(底色、主色、背景色、描邊色),你就可以預(yù)覽下你的產(chǎn)品用了這個(gè)色板大概是什么樣子了.它同時(shí)也提供這些顏色的排列組合分析https://color.cloudflare.design
少數(shù)群體如色盲、老齡化群體、殘障群體等等,在近些年來(lái),他們對(duì)無(wú)障礙使用互聯(lián)網(wǎng)的需求,越來(lái)越受到關(guān)注,也許你在現(xiàn)在不需要無(wú)障礙技術(shù)的幫助,但是隨著你變老,在未來(lái)的某個(gè)階段也許無(wú)障礙技術(shù)就會(huì)大大的幫助你。
色彩無(wú)障礙只是無(wú)障礙的一小步,但是卻是證明無(wú)障礙普及進(jìn)步的一大步。
參考文章:
https://medium.com/inside-design/a-guide-to-color-accessibility-in-product-design-516e734c160c
https://www.colourblindawareness.org/colour-blindness/types-of-colour-blindness
https://modus.medium.com/the-myths-of-color-contrast-accessibility-4b7fcba77317
https://jfly.uni-koeln.de/color
https://www.bounteous.com/insights/2019/03/22/orange-you-accessible-mini-case-study-color-ratio
本文由郝小七指導(dǎo)http://www.woshipm.com/u/917803
本文由 @自來(lái)卷夏憶 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來(lái)自 Unsplash,基于 CC0 協(xié)議
*請(qǐng)認(rèn)真填寫(xiě)需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。