超周全！色彩無(wú)停滯設(shè)計(jì)之「對(duì)比度」的探索

@Angelaaa （公眾號(hào)：漫聲細(xì)語(yǔ)）：正文開始之前先看一發(fā)文章框架：

一. 為什么要讓對(duì)比度知足「色彩無(wú)停滯設(shè)計(jì)標(biāo)準(zhǔn)」？

Accessible design aids in creating a better experience not just for people with disability, but also for people without it.

舉個(gè)例子，一樣平常的門，都必要本身推開或者拉開，但美國(guó)一款為殘障人士設(shè)計(jì)的門開關(guān)，可以一按下門主動(dòng)打開。

△ from：Power Door Openers – Access and Mobility

這個(gè)「一按門就開」的按鈕，裝在公共建筑的入口，可以幫助坐輪椅的用戶方便開門。

這同時(shí)也方便了捧著很多東西的人、抱小孩的人，或者人們干脆都去按它開門——由于它真的比本身去推開/拉開大門方便多了。

所以，知足無(wú)停滯設(shè)計(jì)標(biāo)準(zhǔn)的設(shè)計(jì)，不僅給殘障人士提供了更好的體驗(yàn)，同時(shí)也能更方便通俗人使用。

現(xiàn)實(shí)生活中的產(chǎn)品設(shè)計(jì)如此，互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)如此，顏色對(duì)比度的設(shè)計(jì)亦如此。

1.面向大眾的產(chǎn)品，要盡量知足「有視覺停滯的用戶」

Salesforce 的無(wú)停滯設(shè)計(jì)顧問(wèn) Cathy O’ Connor 經(jīng)常被問(wèn)到「你們產(chǎn)品究竟有多少殘障人士在使用？」他想說(shuō)的是，殘障人士的數(shù)量并不少，詳細(xì)數(shù)據(jù)如下：

• 世界人口的15%，有著不同程度的殘疾，包括視力、聽覺、舉措及認(rèn)知停滯。
• 約有4%的人口視力低下，0.6%視盲。這些用戶可能必要借助屏幕閱讀器/盲文閱讀器的幫助。
• 7-12% 的男性有不同情勢(shì)的色覺缺陷（如色盲），不到1％的女性如許。他們難以區(qū)分某些特定顏色組合。
• 低視力狀態(tài)隨著年齡的增加而增長(zhǎng)，50歲以上的一半人有肯定程度的低視力低狀態(tài)。
• 全球增加最快的人群是60歲以上的人。
• 過(guò)了40歲，大多數(shù)人都必要老花鏡，才能清楚地看到小物體或筆墨。

△ from：Color Contrast And Why You Should Rethink It ，by： Cathy O’ Connor

2.要盡量讓產(chǎn)品在「不佳的使用條件」下，仍能使用

大概你覺得你的設(shè)計(jì)在 Mac 上看起來(lái)很完善啊！

但大概你的用戶中一部分人，用的是老舊、性能差的設(shè)備/ 表現(xiàn)器；大概有人會(huì)在強(qiáng)烈的陽(yáng)光下、在交通工具上，在陰暗的環(huán)境中使用你的產(chǎn)品。假如沒做可用性測(cè)試，很可能在真正的「重要使用場(chǎng)景」中，你的產(chǎn)品是幾乎沒法用。

為了讓使用條件不是很好的用戶仍然能正常使用你的產(chǎn)品，也為了更多有視覺停滯的人能用好你的產(chǎn)品，將「無(wú)停滯設(shè)計(jì)」考慮到產(chǎn)品設(shè)計(jì)中，是一件特別很是有需要的事。

什么？為了美觀，不得不摒棄充足高的對(duì)比度？那看看這個(gè)絕佳網(wǎng)站 Contrast Rebellion，上面列舉了很多真實(shí)案例，證實(shí)了高對(duì)比度設(shè)計(jì)仍然很酷很吸引人。

二. 「Color Accessibility」是什么？

WCAG 2.0 （Web Content Accessibility Guideline，Web內(nèi)容無(wú)停滯指南）就是為了幫助設(shè)計(jì)師創(chuàng)造優(yōu)秀用戶體驗(yàn)的。

WCAG 中提到的重要的四種類型的殘疾是：

• 視力停滯（Visual impairments）
• 聽力停滯（Hearing impairments）
• 運(yùn)動(dòng)停滯（Motor impairments）
• 智力停滯（Intellectual disabilities）

基于此，提出了「POUR無(wú)停滯原則」：

• 易于感知的（Perceivable）
• 便于操作（Operable）
• 容易理解的（Understandable）
• 穩(wěn)固耐用的（Robust）

顏色的選擇屬于「易于感知的」無(wú)停滯設(shè)計(jì)范疇。 也就是說(shuō)，網(wǎng)站/App 的內(nèi)容應(yīng)該很容易被看到——尤其是筆墨和圖像，應(yīng)該有充足高的色彩對(duì)比度（high color contrast ratio），使之很容易地從背景中被辨識(shí)出來(lái)。

顏色對(duì)比度無(wú)停滯標(biāo)準(zhǔn)

1.4.3 對(duì)比度（最?。? 文本的視覺呈現(xiàn)以及文本圖像至少要有4.5:1的對(duì)比度（AA級(jí)）。

大文本: 大號(hào)文本以及大文本圖像至少有3:1的對(duì)比度。

1.4.6 對(duì)比度（增強(qiáng)）: 文本視覺呈現(xiàn)以及文本圖像至少有7:1的對(duì)比度（AAA級(jí)）。

大文本: 大號(hào)文本以及大文本圖像至少有 4.5:1的對(duì)比度。

Ps：大文本：至少 18pt（24px）或 14pt（19px）bold。

△ from: Web Content Accessibility Guidelines (WCAG) 2.0

將規(guī)范總結(jié)成表格：

△  from：Making Bootstrap a Little More Accessible — SitePoint， by：Rhiana Heath

△ 這就意味著，當(dāng)字號(hào) ≥ 24px normal / 19px bold, 白背景上能用的最淺的純灰色是#959595。

△ 當(dāng)字號(hào)＜ 24px normal / 19px bold，白色背景上可以用的最淺純灰色是#767676。（假如在灰色背景上，筆墨顏色應(yīng)該更深）

另外，以下情況的文本，無(wú)最低對(duì)比度限定：

• 未激活的（inactive）用戶界面組件的一部分（按鈕或菜單選項(xiàng)）。
• 表單字段的占位符 (placeholder) 或 ghost text 。
• 只是純粹的裝飾。
• 對(duì)任何人都不可見的內(nèi)容。
• 文本作為「包含其他緊張視覺內(nèi)容圖片」的一部分。
• 文本作為 logo 或品牌名稱的一部分。

下圖，Salesforce Design Systems team 在本身的移動(dòng)應(yīng)用的選色上，很好地知足了「WCAG 2.0 AA標(biāo)準(zhǔn)」 。

而且設(shè)計(jì)師們?cè)谔剿鞲邔?duì)比度色彩組合的過(guò)程中發(fā)現(xiàn)，他們本身越來(lái)越喜好高對(duì)比度的設(shè)計(jì)。我信賴你也會(huì)發(fā)現(xiàn)，使用知足標(biāo)準(zhǔn)對(duì)比度標(biāo)準(zhǔn)的顏色，并不會(huì)影響你產(chǎn)品的美觀。

△ 完全知足大字對(duì)比度>3；小字對(duì)比度>4.5。

設(shè)計(jì)時(shí)，可以借助一些工具，比如用「灰度/色盲模仿器」測(cè)試設(shè)計(jì)。 （ Photoshop 在其“View> Proof Setup”菜單中內(nèi)置了色盲濾鏡。）

時(shí)刻記得問(wèn)問(wèn)你本身，網(wǎng)頁(yè)上的 CTA ( call to action ) 是否「看上去」是網(wǎng)頁(yè)中的重要元素。

三. 「對(duì)比度檢測(cè)」工具保舉

一些實(shí)用在線工具可以用來(lái)測(cè)試對(duì)比度是否知足 WCAG 2.0 AA 的「色彩無(wú)停滯設(shè)計(jì)」標(biāo)準(zhǔn)。

WebAIM’s Color Contrast Checker

可以直接在線調(diào)顏色，實(shí)時(shí)看對(duì)比度是否知足要求。

?? Tanaguru Contrast-Finder

若測(cè)試的2個(gè)顏色對(duì)比度不達(dá)標(biāo)，會(huì)主動(dòng)保舉一系列達(dá)標(biāo)的顏色可供選擇。

Easily calculate color contrast ratios

方便地檢測(cè)對(duì)比度是否達(dá)標(biāo)。

Color Safe

在定色板之前，可以用它來(lái)事先選擇吻合標(biāo)準(zhǔn)的顏色。

Color tool

另外保舉一款 Google 的配色工具，可直接檢測(cè)顏色的accessibility。

Color Oracle

檢測(cè)不同類型色盲、色弱患者，看到屏幕的結(jié)果。

四. 大廠案例

看完了規(guī)范，仍有些疑心未能解決，比如 ：

disabled text 對(duì)比度未作要求，那對(duì)比度也不可能是1，究竟多少比較合適？

最低對(duì)比度有了要求，那么最高對(duì)比度呢？畢竟純黑加純白也很難受。

黃色橙色這種，無(wú)論如何在白背景也不可能知足對(duì)比度 ＞ 3的顏色，如何處理？

所以我選取了一些比較看重?zé)o停滯設(shè)計(jì)的大廠案例，以求能發(fā)現(xiàn)一些規(guī)律。

Google Chrome

「無(wú)停滯設(shè)計(jì)」已經(jīng)是 Google Chrome DNA 的一部分。曩昔的兩年中，這方面做了尤其多的努力。新的配色方案吻合 WCAG 2.0 規(guī)范，有充足高的對(duì)比度。所有的 text、icongraphy，都盡量知足 WCAG 2.0 AAA 標(biāo)準(zhǔn)。

我用 EightShapes Contrast Grid 驗(yàn)證了一下 Google text 顏色的對(duì)比度：

經(jīng)驗(yàn)證，發(fā)現(xiàn) Google 果然在明暗兩種背景下的配色，幾乎都知足 WCAG 2.0 AAA 標(biāo)準(zhǔn)（color contrast ratio > 4.5）。

唯獨(dú)白背景下的 warning 色對(duì)比度為3.3，僅知足 AA 標(biāo)準(zhǔn) ( color contrast ratio > 3)。

另，disabled 的顏色對(duì)比度不屬于限制范圍，Google 對(duì)比度是1.8、2.2。

另外我發(fā)現(xiàn)，Google 在深淺背景上使用的顏色，都不是直接將 brand color 拿過(guò)來(lái)就用，而是根據(jù)不同背景調(diào)整后的顏色。

而即使是 brand color，Google 也盡量使之和白背景的對(duì)比度知足 AA 標(biāo)準(zhǔn)（黃色、橙色例外）。

Material Design

Material Dsign 官方說(shuō)明：

Accessible color palette

Choose primary, secondary, and accent colors for your app that support usability. Ensure sufficient color contrast between elements so that users with low vision can see and use your app.

Contrast ratios

The W3C recommends the following contrast ratios for body text and image text:
Small text should have a contrast ratio of at least 4.5:1 against its background
Large text (at 14 pt bold/18 pt regular and up) should have a contrast ratio of at least 3:1 against its background.

Elements

Elements currently in a disabled state are exempt from color contrast standard: this includes buttons in disabled state or inactive menu items.

從 Sketch 中選取 Material Design 的 Template， 測(cè)試一下顏色的對(duì)比度。

△ Material Design

我分外測(cè)了下按鈕 disabled color 的對(duì)比度，發(fā)現(xiàn)白背景是1.8；暗色背景的對(duì)比度高一些，2.5。

發(fā)現(xiàn)：

• 黑/白色、深灰色，傷害色的顏色，都＞ 4.5，知足 AAA 標(biāo)準(zhǔn)。
• 白背景的「綠色」知足 AA 標(biāo)準(zhǔn)。
• 筆墨 disabled color 對(duì)比度分別是2.6、2.5。
• 看起來(lái)，深色背景下的灰色系對(duì)比度，比淺色背景下更容易達(dá)到 3。

iOS

iOS 在對(duì)比度上，普遍比 MD 的對(duì)比度低。

即使蘋果的官方規(guī)范里也明確對(duì)「對(duì)比度」做了響應(yīng)規(guī)范：

Human Interface Guidelines：Use sufficient color contrast ratios. Insufficient contrast in your app makes content hard to read for everyone. Icons and text might blend with the background, for example. An online color contrast calculator can help you accurately analyze the color contrast in your app, to ensure that it meets optimal standards. Strive for a minimum contrast ratio of 4.5:1, although 7:1 is preferred because it meets more stringent accessibility standards.

我猜 iOS11 將纖細(xì)筆墨變粗變大，細(xì)線 icon 改為實(shí)心 icon， 也是出于進(jìn)步對(duì)比度、讓更多人能看清的初衷吧。

△ from：iOS 10 vs 11：完備 UI 比較分析，by：Taylor Hu

Medium

看下早期的Medium，只有「大M」和深灰色，知足對(duì)比度 > 3.0。

現(xiàn)在的 Medium ，色彩對(duì)比度都 ≥ 3.0。

測(cè)量發(fā)現(xiàn):

• 黑色、深灰色，傷害色，都知足對(duì)比度＞ 4.5。
• 某些地方的灰色筆墨（如未激活的Tab筆墨），對(duì)比度 ＞ 3。
• 寫文章的 Placeholder 對(duì)比度為2.1。
• 禁用控件對(duì)比度為1.2（那個(gè)右側(cè)淡淡的on/off radio-button）。
• 綠色筆墨較難知足；作為大面積顏色時(shí)，綠色更淺。
• 深淺背景下，用的不同綠色。

△ 深淺背景下用的是不同綠色。

Twitter

• 黑色、深灰色，傷害色，都知足對(duì)比度＞ 4.5。
• Disabled color 對(duì)比度是1.9，接近2。

規(guī)律總結(jié)

由此可大致總結(jié)出一些規(guī)律，可酌情應(yīng)用：

• 黑/白色、深灰色、傷害色，都盡量知足對(duì)比度 ＞ 4.5。
• 最高對(duì)比度一樣平常在 16-18 左右。（最高對(duì)比度是21，也就是 #000000 + #FFFFFF 。盡量別用這種對(duì)比，這會(huì)引起一些誦讀困難癥患者的不適，他們會(huì)感覺筆墨在旋轉(zhuǎn)、模糊）
• Disabled color、placeholder 雖未做限定，但淺色背景上對(duì)比度也許是1.8~2.3（盡量2以上），深色背景對(duì)比度大致是2.5~3（盡量3）。
• 未激活控件（如tab）筆墨顏色一樣平常對(duì)比度 ＞ 3。
• 筆墨顏色、icongraphy，為了知足無(wú)停滯色彩對(duì)比要求，一樣平常不直接使用 brand color，而是加深/變淺后再用。
• 假如重要背景是白色，brand color 和白色的對(duì)比度盡量知足 ≥ 3。（黃色、橙色、綠色較難知足，酌情處理）。
• 深色背景的對(duì)比度，比淺色背景的容易知足一些。（即便如此，鄭重在產(chǎn)品中使用深色調(diào)，研究注解散光的人在黑色上閱讀白色筆墨比在白色黑色筆墨更難。Bauer和Cavonius 在 發(fā)現(xiàn)，在淺色背景上用黑色字符閱讀時(shí)，比在深色底閱讀淺色字的正確率，高出26%。參考：Why light text on dark background is a bad idea）

五. 知足「無(wú)停滯色彩標(biāo)準(zhǔn)」的配色流程

設(shè)計(jì)時(shí)，可以先從一個(gè)特別很是清晰的方案開始嘗試，然后再慢慢往你的美學(xué)方向調(diào)整。

1. 先確定各顏色的深淺

• 首先確定的主色調(diào)，大概是藍(lán)色。
• 根據(jù)主色調(diào)確定不同深淺的灰色。 Colllor 這個(gè)在線工具能幫你完備這項(xiàng)工作。

△ Colllor 網(wǎng)站截圖

• 選定一個(gè)灰色后，再根據(jù)這個(gè)灰色選出灰色的淺色系和深色系。

• 選定好灰色后，再用雷同方法，選出其他顏色的深淺色。

△ from: Don’t let your color palette be an airball，by: Zack Gehin

每個(gè)顏色 4-6 個(gè)深淺度比較合適，不同深淺的顏色別太接近，互相協(xié)調(diào)。

假如本身創(chuàng)建轉(zhuǎn)變規(guī)則也可以，如「疊加5%的黑色」或者「透明度變?yōu)?0%」等等。無(wú)論采用哪種方法，確保所有顏色的深淺轉(zhuǎn)變，都遵循同一的規(guī)則。

△ 顏色加深、變淺的方法示例。from: Color Contrast for Better Readability | Viget, by: Tom Osborne

「嘗試—失敗—再嘗試」——這個(gè)過(guò)程可能會(huì)花費(fèi)大量時(shí)間。 Zack Gehin 為 Widen Enterprises 創(chuàng)建色板的過(guò)程中，花了40個(gè)小時(shí)——測(cè)試、重選、調(diào)整。效果吻合了他們的預(yù)期，表達(dá)出了他們期望的情感，并且知足了Acessibility standards。

Zack Gehin 行使 Colllor 創(chuàng)建的色板示例：

△  from: Don’t let your color palette be an airball，by: Zack Gehin, 2017.8.16

然后再將選好的顏色，放到組件、背景中去測(cè)試對(duì)比結(jié)果。

2. 確定筆墨顏色

這是一個(gè)體系化的工作，可以先從幾個(gè)基本文本類型開始：

• 重要筆墨顏色（primary text color）: 段落、標(biāo)簽、其他重要筆墨。
• 次級(jí)筆墨顏色（secondary text color）: 表單輔助說(shuō)明（form microcopy）、說(shuō)明筆墨、表格題目，等。
• 可交互筆墨顏色（interactive text color）：重要是鏈接筆墨。
• 錯(cuò)誤信息筆墨顏色（ inline error text color）: 有的在一些交互控件旁邊。
• 禁用筆墨顏色（disabled text color）：通常用在表單控件和按鈕上。

確保至少包含：重要，次要，鏈接和錯(cuò)誤4種文本顏色。鄭重添加新的顏色，如三級(jí)筆墨顏色（teriary text color）、圖標(biāo)添補(bǔ)顏色。

圖標(biāo)顏色一樣平?？梢灾苯酉嘌匾言O(shè)置好的 primary, secondary, interactive，error 的顏色。

同樣，先確定body text 的色值，從灰色入手。

測(cè)算出在各個(gè)背景色上，可用的最低對(duì)比度的灰色。

假如按「WCAG 2.0 AA 」的標(biāo)準(zhǔn)，下圖的 #6B797F 就是白背景上筆墨的最淺灰色。

△ from: Color Contrast for Better Readability | Viget, by: Tom Osborne

接下來(lái)測(cè)試選擇「鏈接文本色」「錯(cuò)誤文本色」。

△ from: Color Contrast for Better Readability | Viget, by: Tom Osborne

經(jīng)反復(fù)對(duì)比，最后確定，在白背景上，選擇 以上2個(gè)顏色（對(duì)比度＞4.5）。

前文中，從各大網(wǎng)站/ App 中測(cè)量得出，

• 未激活tab筆墨，對(duì)比度一樣平常＞3；
• disabled text、placeholder，一樣平常對(duì)比度是2左右（夜間模式可盡量知足3）。

3. 檢測(cè)筆墨色的對(duì)比度

然后，將筆墨放在按鈕上，檢測(cè)對(duì)比度是否知足要求。

不要忘掉交互式狀況，例如按鈕，選項(xiàng)卡，列表組和鏈接的 hover，active 和 selected 狀況。

△ from: Color Contrast for Better Readability | Viget, by: Tom Osborne

將筆墨放在每一種背景色上測(cè)試筆墨對(duì)比度?？梢杂?EightShapes Contrast Grid 實(shí)時(shí)測(cè)量?jī)蓛深伾膶?duì)比度是否達(dá)標(biāo)。

往返測(cè)試的同時(shí)，反復(fù)優(yōu)化色板。

△ from：Light & Dark Color Systems，by: Nathan Curtis

4. 在不同環(huán)境下測(cè)試你的色板

這是設(shè)計(jì)過(guò)程中最緊張的步驟之一。

調(diào)研確定用戶使用你的產(chǎn)品的重要環(huán)境。 Human environment design 會(huì)幫助你確定哪些環(huán)境是必須要考慮的。

環(huán)境測(cè)試很簡(jiǎn)單，把你的設(shè)備帶到強(qiáng)日光下去、放在陰暗房間里，調(diào)低手機(jī)的屏幕亮度（很多手機(jī)快沒電了的用戶經(jīng)常如許做）本身去感受測(cè)試。

假如有些地方不好用，重新做。

• 在不同表現(xiàn)器上測(cè)試你的色板

雖然我們?cè)S多人都特別很是榮幸，可以用很好的設(shè)備工作，但是世界上的許多人沒有這么好的條件。我們很容易就風(fēng)俗 Retina 或者 5k 的表現(xiàn)器，但假如用回老舊的低質(zhì)量表現(xiàn)器，我們肯定會(huì)驚訝本身用的是啥，圖紙?jiān)趺茨鼙憩F(xiàn)成如許。

△ from: Don’t let your color palette be an airball，by: Zack Gehin

若想知道用戶都在用什么表現(xiàn)設(shè)備，可以從 Google Analytics 上，或者其他你有權(quán)限的數(shù)據(jù)分析工具上獲取數(shù)據(jù)。

5. 確定不同色調(diào)的顏色組合體例

△ from: Color Contrast for Better Readability | Viget, by: Tom Osborne

6. 輸出色彩規(guī)范文檔

△ from: Color Contrast for Better Readability | Viget, by: Tom Osborne

六. 其他設(shè)計(jì)點(diǎn)

1.Input 要有清晰的邊界

△ 一個(gè)不錯(cuò)的input 輸入?yún)^(qū)域。

輸入框有明確的邊界，這對(duì)舉措/認(rèn)知停滯的用戶很緊張。

清晰的邊界，可以讓用戶明確知道點(diǎn)擊目標(biāo)的位置和大小。假如沒有清晰的邊框，認(rèn)知停滯用戶可能很難找到輸入框在哪。

上圖是 Medium 寫文章的網(wǎng)頁(yè)，沒有任何線索告訴人點(diǎn)擊區(qū)域在哪。

而事實(shí)上，可點(diǎn)區(qū)域只有籃框內(nèi)一小部分。

上圖2個(gè)寫文章的截面，雖然也沒使用傳統(tǒng)的輸入框情勢(shì)，但是它們給用戶提供更多的信息和線索。

在這兩個(gè)界面，用戶可以點(diǎn)擊下面空白區(qū)域的任意位置開始輸入筆記；

而且，note-taking 筆記的題目位于兩條水平線之間，視覺線索更顯明一點(diǎn)。

2. 確定輸入控件邊框顏色時(shí)，要考慮到不同狀況

文本輸入框，文本輸入?yún)^(qū)域，radio-button ，都必要充足高的對(duì)比度以知足可見性和可用性。 控件的邊框顏色特別很是緊張，不能和背景色過(guò)于接近。

重要考慮幾種狀況：獲得焦點(diǎn)狀況、默認(rèn)狀況、禁用狀況、錯(cuò)誤狀況。

△ from：Light & Dark Color Systems，by: Nathan Curtis

3. 假如表單沒有固定標(biāo)簽，那么占位符就要知足最低對(duì)比度要求。（對(duì)比度＞4.5）

△ from:7 Things Every Designer Needs to Know about Accessibility, by: Jesse Hausler

但其實(shí)右下角 價(jià)格input那個(gè)，更好的做法，是將標(biāo)簽?zāi)玫奖砻鎭?lái)：

△ from:7 Things Every Designer Needs to Know about Accessibility, by: Jesse Hausler

4. 另外，還要細(xì)致「背景色A」放到「背景色B」上的情況

比如，一張card，本身有背景色 pale grey，放到了一張大背景 cream 色上。這時(shí)要細(xì)致，2個(gè)顏色組合起來(lái)是否仍有充足高對(duì)比度。

用一些裝飾手法可以緩解薄弱的對(duì)比，比如加邊框，加陰影。

△ from：Light & Dark Color Systems，by: Nathan Curtis

七. 最后

筆墨寫出來(lái)不就是為了給人看的么，寫上去又有心不讓人看清，多難堪。

對(duì)比度充足高的字不僅能讓人看得更清楚，還會(huì)讓人讀起來(lái)更快更順暢。

在產(chǎn)品設(shè)計(jì)的過(guò)程中，給推敲顏色留出應(yīng)有的、充足的時(shí)間。

別再讓用戶的眼睛受克制了，別再讓用戶分外費(fèi)勁地看東西了，別再給我們本忙碌的生活增長(zhǎng)壓力了——在設(shè)計(jì)中使用知足 WCAG 充足高的對(duì)比度吧，力求給用戶的生活中，增長(zhǎng)一些恬逸的、合適的、愉悅的體驗(yàn)。