淺析設(shè)計(jì)可訪問的色彩系統(tǒng)

顏色對(duì)比度是可訪問性的重要方面，良好的對(duì)比度使有視覺障礙的人更容易使用產(chǎn)品，并有助于在不好的條件下，如低光環(huán)境或舊屏幕?？紤]到這一點(diǎn)，我們最近更新了用戶界面中的顏色，使其更易于訪問。文本和圖標(biāo)的顏色，現(xiàn)在可靠地有清晰的對(duì)比，整個(gè)條形儀表板和所有其他產(chǎn)品與我們的內(nèi)部接口庫(kù)構(gòu)建。

實(shí)現(xiàn)與顏色的正確對(duì)比是具有挑戰(zhàn)性的，特別是因?yàn)轭伾欠浅Ｖ饔^的，對(duì)產(chǎn)品的美學(xué)有很大的影響。我們想創(chuàng)建一個(gè)顏色系統(tǒng)，用手工挑選的，充滿活力的顏色，同時(shí)滿足可訪問性和對(duì)比度的標(biāo)準(zhǔn)。

當(dāng)我們?cè)u(píng)估外部工具以提高產(chǎn)品的顏色對(duì)比度和可讀性時(shí)，我們注意到解決這個(gè)問題的兩種常見方法：

1、手工挑選顏色，并與標(biāo)準(zhǔn)顏色進(jìn)行對(duì)比。我們的經(jīng)驗(yàn)告訴我們，這種方法使得選擇顏色過于依賴于反復(fù)試驗(yàn)。從一組基本顏色生成較亮和較暗的顏色。

2、不幸的是，簡(jiǎn)單的變暗或變亮可能會(huì)導(dǎo)致暗淡或柔和的顏色，這些顏色很難區(qū)分，而且往往看起來不太好。

使用我們發(fā)現(xiàn)的現(xiàn)有工具，很難創(chuàng)建一個(gè)顏色系統(tǒng)，使我們能夠在確?？稍L問性的同時(shí)挑選出好的顏色。我們決定創(chuàng)建一個(gè)新的工具，它使用感知顏色模型來提供關(guān)于可訪問性的實(shí)時(shí)反饋。這使我們能夠快速創(chuàng)建一個(gè)滿足我們需求的配色方案，并為我們提供一些可以在未來進(jìn)行迭代的內(nèi)容。

背景

我們?cè)诋a(chǎn)品界面中使用的顏色基于我們的品牌調(diào)色板，在我們的產(chǎn)品中使用這些顏色使我們能夠?qū)tripe的品牌特征帶入我們的界面。

不幸的是，很難滿足（并保持）這些顏色的對(duì)比度準(zhǔn)則，網(wǎng)頁(yè)易讀性指引建議小文本的最低對(duì)比度為4.5，大文本的最低對(duì)比度為3.0。當(dāng)我們檢查我們產(chǎn)品的顏色使用情況時(shí)，我們發(fā)現(xiàn)用于小文本（黑色除外）的默認(rèn)文本顏色都沒有達(dá)到對(duì)比度閾值。

選擇容易理解的顏色組合要求每個(gè)設(shè)計(jì)師或工程師理解指導(dǎo)方針，并在每種情況下選擇具有足夠?qū)Ρ榷鹊念伾珜?duì)。對(duì)于特定的顏色組合，選擇是有限的，可訪問的顏色組合只是看起來不太好。

當(dāng)我們第一次在我們的產(chǎn)品中尋找提高文本對(duì)比度的方法時(shí)，我們最初探索了將文本的默認(rèn)顏色在我們的比例上再深一步，如下面的左欄所示。

不幸的是，我們的一些顏色仍然沒有足夠的對(duì)比度下最暗的陰影。一旦我們?cè)诂F(xiàn)有的尺度（右欄）上獲得了一個(gè)具有足夠?qū)Ρ榷鹊纳龋覀兙褪チ嗽S多顏色的亮度和活力。這些顏色通過了白色背景的準(zhǔn)則，但它們是深色和混濁的，很難區(qū)分它們的色調(diào)。

不需要深入挖掘，就可以很容易地接受折衷方案，即您需要在可訪問的顏色和看起來不錯(cuò)的顏色之間進(jìn)行選擇。為了兩者兼得，我們需要從頭開始重新設(shè)計(jì)我們的顏色系統(tǒng)。

我們想設(shè)計(jì)一種新的顏色系統(tǒng)，它將提供三個(gè)開箱即用的主要好處：

1、可預(yù)測(cè)的可訪問性：顏色有足夠的對(duì)比度，以通過可訪問性指南。

2、清晰，充滿活力的色調(diào)：用戶可以很容易地區(qū)分不同的顏色。

3、一致的視覺重量：在每一層，沒有一種顏色優(yōu)先于另一種顏色。

色彩空間的一個(gè)小插曲

為了解釋我們是如何做到這一點(diǎn)的，我們需要對(duì)顏色有點(diǎn)書呆子氣。

我們習(xí)慣于在屏幕上使用RGB顏色空間中的顏色。顏色是根據(jù)屏幕上紅色、綠色和藍(lán)色光的混合程度來指定的。

不幸的是，雖然用這種方式來描述顏色對(duì)電腦來說很自然，但對(duì)用戶來說卻不自然。給定一個(gè)RGB顏色值，需要改變什么才能使它更亮？更豐富多彩的？添加更多的黃色？

我們更直觀地認(rèn)為顏色是由三個(gè)屬性組成的：

它是什么顏色的？

色度：它有多鮮艷？

亮度：有多亮？

支持以這種方式指定顏色的流行顏色空間是HSL，它在設(shè)計(jì)工具和流行的顏色操作代碼庫(kù)中得到了很好的支持。只有一個(gè)問題：HSL計(jì)算亮度的方法有缺陷。大多數(shù)色彩空間沒有考慮到的是，不同的色調(diào)在本質(zhì)上被人眼感知為不同程度的明度――在數(shù)學(xué)上明度相同的水平上，黃色比藍(lán)色更亮。

下圖是一組在顯示顏色空間中具有相同亮度和飽和度的顏色，雖然色彩空間聲稱飽和度和亮度都是一樣的，但我們的眼睛不同意。請(qǐng)注意，其中一些顏色看起來比其他顏色更淡或更飽和。例如，藍(lán)色顯得特別暗，而黃色和綠色顯得特別亮。

有些色彩空間試圖模擬人類對(duì)色彩的感知。感知上一致的顏色空間基于與人類視覺更相關(guān)的因素對(duì)顏色進(jìn)行建模，并執(zhí)行復(fù)雜的顏色轉(zhuǎn)換以確保這些維度反映了人類視覺的工作方式。

當(dāng)我們?cè)谝粋€(gè)感知上均勻的顏色空間中選取亮度和飽和度相同的顏色樣本時(shí)，我們可以觀察到明顯的差異。這些顏色混合在一起，每一種顏色都和其他顏色一樣輕，一樣飽和。這就是工作中的感知一致性。

令人驚訝的是，很少有工具支持感知上一致的顏色模型，而且沒有一個(gè)工具可以幫助我們?cè)O(shè)計(jì)調(diào)色板。所以我們建立了自己的公司。

可視化的顏色

我們構(gòu)建了一個(gè)web界面，允許我們使用感知一致的顏色模型來可視化和操作我們的顏色系統(tǒng)。當(dāng)我們對(duì)顏色進(jìn)行迭代時(shí)，這個(gè)工具給了我們一個(gè)即時(shí)的反饋循環(huán)――我們可以看到每個(gè)變化的效果。

上圖所示的顏色空間被親切地稱為CIELAB或Lab，Lab中的L代表亮度，但與HSL中的亮度不同，它的設(shè)計(jì)是感知上一致的。通過將我們的顏色比例轉(zhuǎn)換成實(shí)驗(yàn)室的顏色空間，我們可以根據(jù)它們的感知對(duì)比度調(diào)整我們的顏色，并在視覺上比較結(jié)果。

下圖顯示了顏色工具中顯示的先前調(diào)色板的亮度和對(duì)比度值。你可以看到，我們每一種顏色的感知亮度都遵循一條不同的曲線，黃色和綠色比藍(lán)色和紫色在同一點(diǎn)上淡得多。

通過在感知上一致的顏色空間中控制我們的顏色，我們能夠產(chǎn)生一組顏色，在所有色調(diào)中具有一致的對(duì)比度，并盡可能多地保留當(dāng)前顏色的預(yù)期色調(diào)和飽和度。在提議的顏色中，黃色和藍(lán)色有相同的對(duì)比度范圍，但它們看起來仍然像我們的顏色。

在下面的圖表中，您可以看到每種顏色的感知亮度遵循相同的曲線，這意味著每種顏色（左側(cè)的標(biāo)簽）在給定的級(jí)別上具有相同的對(duì)比度值（頂部的數(shù)字標(biāo)簽）。

我們的新工具也向我們展示了什么是可能的，視覺化一個(gè)感知一致的顏色模型可以讓我們看到視覺感知的約束。圖表中的陰影部分代表了所謂的想象中的顏色，它們實(shí)際上是不可復(fù)制或不可感知的。原來“真正的深黃色”并不是一個(gè)東西。

大多數(shù)混合顏色的工具允許你設(shè)置值在每個(gè)參數(shù)的全系列，就夾的顏色或返回最近的合適的顏色并不代表參數(shù)設(shè)置?？梢暬瘜?shí)時(shí)可用顏色空間作為我們?cè)试S我們改變迭代快得多，因?yàn)槲覀兛梢愿嬖V什么改變是可能的，什么改變我們更接近我們的目標(biāo)：“明亮”，區(qū)分顏色符合適當(dāng)?shù)膶?duì)比的指導(dǎo)方針。

在某些情況下，找到一組共同工作的顏色就像穿針一樣。在這里，陰影區(qū)域顯示了如何有限的空間，實(shí)際上是找到一個(gè)組合的價(jià)值觀，允許大致相同的亮度為所有色調(diào)。

結(jié)果

在使用真實(shí)的組件和界面進(jìn)行了大量的迭代和測(cè)試之后，我們得到了一個(gè)調(diào)色板，它實(shí)現(xiàn)了我們的目標(biāo)：我們的顏色可預(yù)測(cè)地通過了可訪問性指導(dǎo)方針，保持了它們清晰、充滿活力的色調(diào)，并保持了跨色調(diào)的一致的視覺權(quán)重。

文本和圖標(biāo)的新默認(rèn)顏色現(xiàn)在通過了WCAG 2.0指南中定義的可訪問性對(duì)比度閾值。

除了在白色背景上傳遞對(duì)比度準(zhǔn)則外，每種顏色在顯示在任何色調(diào)中最亮的顏色值之上時(shí)也會(huì)傳遞。由于我們通常使用這些淺色背景來抵消或突出顯示部分，這使得確保文本在我們的產(chǎn)品中有足夠的對(duì)比度變得簡(jiǎn)單和可預(yù)測(cè)。

由于新顏色是根據(jù)對(duì)比度統(tǒng)一組織的，所以我們還提供了簡(jiǎn)單的內(nèi)置指南，以便在不太常見的情況下選擇合適的對(duì)比度對(duì)。任何兩種顏色都保證對(duì)小文本有足夠的對(duì)比度，如果它們之間至少有五層的距離，而圖標(biāo)和大文本之間至少有四層的距離。

通過系統(tǒng)內(nèi)置的對(duì)比度指南，可以很容易地對(duì)不同組件的顏色對(duì)比度進(jìn)行調(diào)整，從而獲得可預(yù)測(cè)的結(jié)果。

例如，我們重新設(shè)計(jì)了我們的Badge組件，使用顏色背景來明確區(qū)分每種顏色。在可能的最輕的值，顏色太難區(qū)分彼此。通過將背景和文本顏色向上移動(dòng)一層，我們能夠保持所有標(biāo)記顏色之間的文本對(duì)比度，而不需要分別微調(diào)每個(gè)顏色組合。

總結(jié)

我們認(rèn)識(shí)到，設(shè)計(jì)易于理解的色彩系統(tǒng)并不意味著在黑暗中摸索。我們只是需要改變對(duì)顏色的看法：

使用感知上一致的顏色模型

在設(shè)計(jì)可訪問的顏色系統(tǒng)時(shí)，使用感知一致的顏色模型（如CIELAB）幫助我們了解每種顏色在眼睛中是如何呈現(xiàn)的，而不是在計(jì)算機(jī)中是如何呈現(xiàn)的。這使我們能夠驗(yàn)證我們的直覺，并使用數(shù)字來比較我們所有顏色的亮度和色彩。

可訪問并不意味著充滿活力

WCAG可訪問性標(biāo)準(zhǔn)有意只關(guān)注前景和背景顏色之間的對(duì)比，而不是它們看起來有多亮。了解每一種顏色的鮮明程度有助于區(qū)分不同的色調(diào)。

顏色很難講道理，工具可以幫忙

感知上一致的顏色模型的缺陷之一是不可能存在顏色――不存在“非常彩色的暗黃色”或“充滿活力的淡皇家藍(lán)色”之類的顏色。構(gòu)建我們自己的工具幫助我們準(zhǔn)確地查看哪些顏色是可能的，并允許我們快速地迭代我們的調(diào)色板，直到我們生成一個(gè)可訪問的、充滿活力的、仍然感覺像條紋的調(diào)色板。

新聞名稱：淺析設(shè)計(jì)可訪問的色彩系統(tǒng)
本文路徑：http://www.muchs.cn/news41/52241.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、靜態(tài)網(wǎng)站、面包屑導(dǎo)航、網(wǎng)站收錄、關(guān)鍵詞優(yōu)化、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)