下圖中的文檔中的 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é)議