整合營(yíng)銷(xiāo)服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢(xún)熱線(xiàn):

          Docsify 的邊欄目錄如何設(shè)置

          下圖中的文檔中的 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ì)。

          01 色盲類(lèi)型

          色盲的頻率相當(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ì)胞的是否缺失,又可以將色盲分為全色盲,雙色色盲和三色色盲。

          1. 三色色盲

          三色色盲擁有三種錐形細(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)色色弱

          2. 雙色色盲

          雙色色盲只有兩種顏色的錐形細(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)色色盲

          3. 全色盲

          全色盲完全沒(méi)有任何一種顏色細(xì)胞,他們眼中世界是完全的黑白色,就像是黑白電視機(jī)那樣.但是我們?cè)谧霎a(chǎn)品無(wú)障礙時(shí),基本不會(huì)考慮這一類(lèi)人群,因?yàn)槿ぐl(fā)生的概率實(shí)在是太低了,33000人中僅有1人,他們的生活因此有很多阻礙,在正常的光照條件下,也需要戴深色墨鏡。

          02 WCAG 2.1指南是什么?

          1. 什么是WCAG

          WAI制定了幾項(xiàng)W3C建議,包括:

          • Web內(nèi)容可訪(fǎng)問(wèn)性指南(Web Content Accessibility Guidelines), 即 WCAG(2.1)
          • 創(chuàng)作工具輔助功能指南(Authoring Tool Accessibility Guidelines), 即ATAG(2.0)
          • 用戶(hù)代理輔助功能指南(User Agent Accessibility Guidelines),即UAAG(2.0)
          • 可訪(fǎng)問(wèn)的豐富互聯(lián)網(wǎng)應(yīng)用程序(the Accessible Rich Internet Applications suite of web standards),即WAI-ARIA

          WCAG有三種評(píng)級(jí): A、AA和AAA,標(biāo)準(zhǔn)從低到高:

          1. A是最低等級(jí)的需求:這是所有的網(wǎng)站、軟件和數(shù)字內(nèi)容都應(yīng)該做到的,可以被認(rèn)為是及格線(xiàn)。
          2. AA:補(bǔ)償20/40(通常被報(bào)告為大約80歲老年人的典型視力)視力喪失的用戶(hù)的對(duì)比度敏感性損失,也是大多數(shù)網(wǎng)站可以接受的標(biāo)準(zhǔn),電腦端和手機(jī)端的輔助技術(shù)都可以運(yùn)行良好。
          3. AAA:補(bǔ)償視力損失為20/80(通常使用輔助技術(shù)來(lái)訪(fǎng)問(wèn)他們的內(nèi)容, 輔助技術(shù)通常具有對(duì)比度增強(qiáng), 以及內(nèi)置放大能力)或以上的低視力用戶(hù)的對(duì)比度敏感性損失,這個(gè)等級(jí)是無(wú)障礙的黃金級(jí)別,幾乎一切都能夠達(dá)到無(wú)障礙,包括一些很細(xì)小的環(huán)節(jié)。

          2. WCAG傳送門(mé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

          03 色彩無(wú)障礙的八個(gè)要點(diǎn)

          1. 對(duì)比度達(dá)到AA評(píng)級(jí)

          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í)即可。

          2. 不要只依賴(lài)顏色來(lái)區(qū)分不同含義

          顏色在特定的語(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

          3. 圖表中要注意的點(diǎn)

          以折線(xiàn)圖舉例:

          • 避免使用圖例,盡量在圖形旁邊注釋?zhuān)驗(yàn)槊と嗽诰嚯x拉遠(yuǎn)的時(shí)候,就更難去識(shí)別并且對(duì)應(yīng)名字
          • 避免使用細(xì)線(xiàn)條,建議組合不同的虛線(xiàn)/實(shí)線(xiàn),虛線(xiàn)的間距差異化
          • 關(guān)鍵數(shù)據(jù)點(diǎn)可以采用不同的幾何圖形標(biāo)記,更便于識(shí)別

          再以堆疊條形圖為例:

          • 使用飽和度高的顏色,避免使用飽和度低且相近的顏色
          • 盲人盡管不能識(shí)別有些顏色,但他們對(duì)明暗和圖案非常敏感,嘗試用不同的圖案代替顏色
          • 在不同的圖案之間,創(chuàng)造明暗對(duì)比

          再舉個(gè)倫敦地鐵圖和上海地鐵圖的例子:

          4. 白色字體還是黑色字體

          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ì)疑精神是很可貴的!

          5. 按鈕二三事

          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í)候我們可以嘗試:

          • 增加主按鈕尺寸的大小
          • 把主按鈕和次按鈕放在不同的位置
          • 描邊、圖標(biāo)、字重差異化

          6. 色彩組合黑榜

          當(dāng)你在為你的產(chǎn)品或者品牌選擇色彩時(shí),一定要避免下面的色彩組合:

          7. 超鏈接文字

          網(wǎng)頁(yè)中超鏈接文本很常見(jiàn),比如百度百科,如果只是用顏色區(qū)別超鏈接,對(duì)于有些色盲很難注意到這是一個(gè)超鏈接,他需要將鼠標(biāo)滑過(guò)時(shí),發(fā)現(xiàn)變成一只手,才能知道。

          所以對(duì)于超鏈接文本,添加下劃線(xiàn)是一個(gè)很好的方式:

          8. 解決色盲買(mǎi)衣服難題

          曾經(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ō),尤其重要。

          04 如何制作色盲友好的PPT

          1. PPT本身注意

          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í)別的字體。

          2. 演講者要注意

          盡量不要使用顏色的名字交流信息. 在演講時(shí),去指代ppt上的某個(gè)東西時(shí),不要說(shuō)“那個(gè)紅色的細(xì)胞”,嘗試描述除了顏色信息之外的,比如“那個(gè)紅色的方形的位于PPT左上角的細(xì)胞”。

          3. 設(shè)備和環(huán)境的選擇

          • 選擇綠色激光筆,由于紅色激光筆使用長(zhǎng)波長(zhǎng)的光, 色盲通常很難看到指向哪里最近, 綠色激光筆可用, 色盲和非色盲都很容易看到。
          • 1兆瓦的光線(xiàn)適合普通研討室,如果是很大很大的禮堂,可以使用5兆瓦的燈光。

          05 色彩無(wú)障礙工具推薦

          1. 色盲模擬工具

          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

          2. 顏色對(duì)比度工具

          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

          3. 為你的產(chǎn)品搭建無(wú)障礙色板

          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

          06 結(jié)語(yǔ)

          少數(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é)議


          主站蜘蛛池模板: 最新中文字幕一区二区乱码| 无码一区18禁3D| 亚洲片国产一区一级在线观看 | 在线精品视频一区二区| 丝袜美腿高跟呻吟高潮一区| 国产一区麻豆剧传媒果冻精品| 亚洲午夜日韩高清一区| 国内偷窥一区二区三区视频| 国产成人无码一区二区在线播放 | 国产福利一区二区三区视频在线| 国产成人精品一区二区A片带套 | 国产高清在线精品一区二区三区| 久久精品成人一区二区三区| 中字幕一区二区三区乱码 | 午夜影院一区二区| 无码精品视频一区二区三区| 国产成人精品视频一区二区不卡 | 日韩精品一区在线| 亚洲国产精品无码久久一区二区 | 无码8090精品久久一区| 无码国产精品一区二区免费3p| 国产精品成人99一区无码| 色狠狠AV一区二区三区| 无码AV中文一区二区三区| 久久久久人妻一区精品性色av| 亚洲一区二区电影| 国产一区在线mmai| 日本香蕉一区二区三区| 亚洲一区二区三区在线播放| 久久婷婷色一区二区三区| 亚洲一区二区三区无码中文字幕 | 亚洲变态另类一区二区三区| 亚洲一区二区三区免费视频| 2021国产精品一区二区在线| 91视频一区二区| 国产精品免费综合一区视频| 中文字幕人妻无码一区二区三区 | 少妇精品久久久一区二区三区 | 人妻久久久一区二区三区| 国产aⅴ一区二区三区 | 亚洲国产av一区二区三区|