超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

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

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

一. 為什么要讓對(duì)比度滿足「色彩無障礙設(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è)例子,一般的門,都需要自己推開或者拉開,但美國一款為殘障人士設(shè)計(jì)的門開關(guān),可以一按下門自動(dòng)打開。

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

△ from:Power Door Openers - Access and Mobility

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

這同時(shí)也方便了捧著許多東西的人、抱小孩的人,或者人們干脆都去按它開門——因?yàn)樗娴谋茸约喝ネ崎_/拉開大門方便多了。

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

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

1.面向大眾的產(chǎn)品,要盡量滿足「有視覺障礙的用戶」

Salesforce 的無障礙設(shè)計(jì)顧問 Cathy O' Connor 經(jīng)常被問到「你們產(chǎn)品究竟有多少殘障人士在使用?」他想說的是,殘障人士的數(shù)量并不少,具體數(shù)據(jù)如下:

  • 世界人口的15%,有著不同程度的殘疾,包括視力、聽覺、行動(dòng)及認(rèn)知障礙。
  • 約有4%的人口視力低下,0.6%視盲。這些用戶可能需要借助屏幕閱讀器/盲文閱讀器的幫助。
  • 7-12% 的男性有不同形式的色覺缺陷(如色盲),不到1%的女性這樣。他們難以區(qū)分某些特定顏色組合。
  • 低視力狀況隨著年齡的增長而增加,50歲以上的一半人有一定程度的低視力低狀況。
  • 全球增長最快的人群是60歲以上的人。
  • 過了40歲,大多數(shù)人都需要老花鏡,才能清楚地看到小物體或文字。

△ from:Color Contrast And Why You Should Rethink It ,by: Cathy O' Connor

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

也許你覺得你的設(shè)計(jì)在 Mac 上看起來很完美??!

但也許你的用戶中一部分人,用的是老舊、性能差的設(shè)備/ 顯示器;也許有人會(huì)在強(qiáng)烈的陽光下、在交通工具上,在昏暗的環(huán)境中使用你的產(chǎn)品。如果沒做可用性測(cè)試,很可能在真正的「主要使用場(chǎng)景」中,你的產(chǎn)品是幾乎沒法用。

為了讓使用條件不是很好的用戶仍然能正常使用你的產(chǎn)品,也為了更多有視覺障礙的人能用好你的產(chǎn)品,將「無障礙設(shè)計(jì)」考慮到產(chǎn)品設(shè)計(jì)中,是一件非常有必要的事。

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

二. 「Color Accessibility」是什么?

WCAG 2.0 (Web Content Accessibility Guideline,Web內(nèi)容無障礙指南)就是為了幫助設(shè)計(jì)師創(chuàng)造良好用戶體驗(yàn)的。

WCAG 中提到的主要的四種類型的殘疾是:

  • 視力障礙(Visual impairments)
  • 聽力障礙(Hearing impairments)
  • 運(yùn)動(dòng)障礙(Motor impairments)
  • 智力障礙(Intellectual disabilities)

基于此,提出了「POUR無障礙原則」:

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

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

顏色對(duì)比度無障礙標(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é)成表格:

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

△ ?from:Making Bootstrap a Little More Accessible — SitePoint, by:Rhiana Heath

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

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

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

△?當(dāng)字號(hào)< 24px normal / 19px bold,白色背景上可以用的最淺純灰色是#767676。(如果在灰色背景上,文字顏色應(yīng)該更深)

另外,以下情況的文本,無最低對(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ì)比度色彩組合的過程中發(fā)現(xiàn),他們自己越來越喜歡高對(duì)比度的設(shè)計(jì)。我相信你也會(huì)發(fā)現(xiàn),使用滿足標(biāo)準(zhǔn)對(duì)比度標(biāo)準(zhǔn)的顏色,并不會(huì)影響你產(chǎn)品的美觀。

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

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

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

時(shí)刻記得問問你自己,頁面上的 CTA ( call to action ) 是否「看上去」是頁面中的主要元素。

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

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

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

WebAIM’s Color Contrast Checker

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

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

?? Tanaguru Contrast-Finder

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

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

Easily calculate color contrast ratios

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

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

Color Safe

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

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

Color tool

另外推薦一款 Google 的配色工具,可直接檢測(cè)顏色的accessibility。

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

Color Oracle

檢測(cè)不同類型色盲、色弱患者,看到屏幕的效果。

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

四. 大廠案例

看完了規(guī)范,仍有些困惑未能解決,比如 :

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

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

黃色橙色這種,無論如何在白背景也不可能滿足對(duì)比度 > 3的顏色,如何處理?

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

Google Chrome

「無障礙設(shè)計(jì)」已經(jīng)是 Google Chrome DNA 的一部分。過去的兩年中,這方面做了尤其多的努力。新的配色方案符合 WCAG 2.0 規(guī)范,有足夠高的對(duì)比度。所有的 text、icongraphy,都盡量滿足 WCAG 2.0 AAA 標(biāo)準(zhǔn)。

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

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

超全面!色彩無障礙設(shè)計(jì)之「對(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 拿過來就用,而是根據(jù)不同背景調(diào)整后的顏色。

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

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

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

Material Design

Material Dsign 官方說明:

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ì)比度。

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

△ Material Design

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

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

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

  • 黑/白色、深灰色,危險(xiǎn)色的顏色,都> 4.5,滿足 AAA 標(biāo)準(zhǔn)。
  • 白背景的「綠色」?jié)M足 AA 標(biāo)準(zhǔn)。
  • 文字 disabled color 對(duì)比度分別是2.6、2.5。
  • 看起來,深色背景下的灰色系對(duì)比度,比淺色背景下更容易達(dá)到 3。

iOS

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

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, 也是出于提高對(duì)比度、讓更多人能看清的初衷吧。

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

△ from:iOS 10 vs 11:完整 UI 比較分析,by:Taylor Hu

Medium

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

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

如今的 Medium ,色彩對(duì)比度都 ≥ 3.0。

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

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

  • 黑色、深灰色,危險(xiǎn)色,都滿足對(duì)比度> 4.5。
  • 某些地方的灰色文字(如未激活的Tab文字),對(duì)比度 > 3。
  • 寫文章的 Placeholder 對(duì)比度為2.1。
  • 禁用控件對(duì)比度為1.2(那個(gè)右側(cè)淡淡的on/off radio-button)。
  • 綠色文字較難滿足;作為大面積顏色時(shí),綠色更淺。
  • 深淺背景下,用的不同綠色。

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

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

Twitter

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

  • 黑色、深灰色,危險(xiǎn)色,都滿足對(duì)比度> 4.5。
  • Disabled color 對(duì)比度是1.9,接近2。

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

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

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

  • 黑/白色、深灰色、危險(xiǎn)色,都盡量滿足對(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,為了滿足無障礙色彩對(duì)比要求,一般不直接使用 brand color,而是加深/變淺后再用。
  • 如果主要背景是白色,brand color 和白色的對(duì)比度盡量滿足 ≥ 3。(黃色、橙色、綠色較難滿足,酌情處理)。
  • 深色背景的對(duì)比度,比淺色背景的容易滿足一些。(即便如此,謹(jǐn)慎在產(chǎn)品中使用深色調(diào),研究表明散光的人在黑色上閱讀白色文字比在白色黑色文字更難。Bauer和Cavonius 在 發(fā)現(xiàn),在淺色背景上用黑色字符閱讀時(shí),比在深色底閱讀淺色字的準(zhǔn)確率,高出26%。參考:Why light text on dark background is a bad idea

五. 滿足「無障礙色彩標(biāo)準(zhǔn)」的配色流程

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

1.?先確定各顏色的深淺

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

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

△ Colllor 網(wǎng)站截圖

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

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

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

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

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

每個(gè)顏色 4-6 個(gè)深淺度比較合適,不同深淺的顏色別太接近,互相和諧。

如果自己創(chuàng)建變化規(guī)則也可以,如「疊加5%的黑色」或者「透明度變?yōu)?0%」等等。無論采用哪種方法,確保所有顏色的深淺變化,都遵循統(tǒng)一的規(guī)則。

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

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

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

Zack Gehin 利用 Colllor 創(chuàng)建的色板示例:

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

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

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

2. 確定文字顏色

這是一個(gè)系統(tǒng)化的工作,可以先從幾個(gè)基本文本類型開始:

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

確保至少包含:主要,次要,鏈接和錯(cuò)誤4種文本顏色。謹(jǐn)慎添加新的顏色,如三級(jí)文字顏色(teriary text color)、圖標(biāo)填充顏色。

圖標(biāo)顏色一般可以直接沿用已設(shè)置好的 primary, secondary, interactive,error 的顏色。

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

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

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

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

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

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

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

△ 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ì)比度是否滿足要求。

不要忘記交互式狀態(tài),例如按鈕,選項(xiàng)卡,列表組和鏈接的 hover,active 和 selected 狀態(tài)。

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

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

將文字放在每一種背景色上測(cè)試文字對(duì)比度。可以用 EightShapes Contrast Grid 實(shí)時(shí)測(cè)量兩兩顏色的對(duì)比度是否達(dá)標(biāo)。

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

來回測(cè)試的同時(shí),反復(fù)優(yōu)化色板。

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

△ from:Light & Dark Color Systems,by: Nathan Curtis

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

這是設(shè)計(jì)過程中最重要的步驟之一。

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

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

如果有些地方不好用,重新做。

  • 在不同顯示器上測(cè)試你的色板

雖然我們很多人都非常幸運(yùn),可以用很好的設(shè)備工作,但是世界上的很多人沒有這么好的條件。我們很容易就習(xí)慣 Retina 或者 5k 的顯示器,但如果用回老舊的低質(zhì)量顯示器,我們一定會(huì)驚奇自己用的是啥,圖紙?jiān)趺茨茱@示成這樣。

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

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

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

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

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

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

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

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

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

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

1.Input 要有清晰的邊界

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

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

輸入框有明確的邊界,這對(duì)行動(dòng)/認(rèn)知障礙的用戶很重要。

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

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

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

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

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

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

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

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

2. 確定輸入控件邊框顏色時(shí),要考慮到不同狀態(tài)

文本輸入框,文本輸入?yún)^(qū)域,radio-button ,都需要足夠高的對(duì)比度以滿足可見性和可用性。 控件的邊框顏色非常重要,不能和背景色過于接近。

主要考慮幾種狀態(tài):獲得焦點(diǎn)狀態(tài)、默認(rèn)狀態(tài)、禁用狀態(tài)、錯(cuò)誤狀態(tài)。

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

△ from:Light & Dark Color Systems,by: Nathan Curtis

3. 如果表單沒有固定標(biāo)簽,那么占位符就要滿足最低對(duì)比度要求。(對(duì)比度>4.5)

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

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

但其實(shí)右下角 價(jià)格input那個(gè),更好的做法,是將標(biāo)簽?zāi)玫酵饷鎭恚?/p>

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

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

4. 另外,還要注意「背景色A」放到「背景色B」上的情況

比如,一張card,自己有背景色 pale grey,放到了一張大背景 cream 色上。這時(shí)要注意,2個(gè)顏色組合起來是否仍有足夠高對(duì)比度。

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

超全面!色彩無障礙設(shè)計(jì)之「對(duì)比度」的探索

△ from:Light & Dark Color Systems,by: Nathan Curtis

七. 最后

文字寫出來不就是為了給人看的么,寫上去又故意不讓人看清,多尷尬。

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

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

別再讓用戶的眼睛受壓迫了,別再讓用戶特別費(fèi)勁地看東西了,別再給我們本忙碌的生活增加壓力了——在設(shè)計(jì)中使用滿足 WCAG 足夠高的對(duì)比度吧,力求給用戶的生活中,增加一些舒服的、合適的、愉悅的體驗(yàn)。

「服務(wù)至上!如何為弱勢(shì)群體做設(shè)計(jì)」


【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱:yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng) UiiiUiii.com是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站,分享了大量PS、AE、AI、C4D等中文教程,為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識(shí)樹專欄。開啟免費(fèi)自學(xué)新篇章,按照我們的專欄一步步學(xué)習(xí),一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航:國內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航,設(shè)計(jì)師必備:http://hao.uisdc.com

收藏 206
點(diǎn)贊 29

復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場(chǎng),未經(jīng)允許不得轉(zhuǎn)載。