顏色對(duì)比度是可訪問(wèn)性的重要方面，良好的對(duì)比度使有視覺(jué)障礙的人更容易使用產(chǎn)品，并有助于在不好的條件下，如低光環(huán)境或舊屏幕。考慮到這一點(diǎn)，我們最近更新了用戶(hù)界面中的顏色，使其更易于訪問(wè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)，用手工挑選的，充滿(mǎn)活力的顏色，同時(shí)滿(mǎn)足可訪問(wèn)性和對(duì)比度的標(biāo)準(zhǔn)。

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

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

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

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

背景

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

它是什么顏色的？

色度：它有多鮮艷？

亮度：有多亮？

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

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

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

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

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

可視化的顏色

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

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

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

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

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

我們的新工具也向我們展示了什么是可能的，視覺(jué)化一個(gè)感知一致的顏色模型可以讓我們看到視覺(jué)感知的約束。圖表中的陰影部分代表了所謂的想象中的顏色，它們實(shí)際上是不可復(fù)制或不可感知的。原來(lái)“真正的深黃色”并不是一個(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è)地通過(guò)了可訪問(wèn)性指導(dǎo)方針，保持了它們清晰、充滿(mǎn)活力的色調(diào)，并保持了跨色調(diào)的一致的視覺(jué)權(quán)重。

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

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

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

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

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

總結(jié)

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

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

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

可訪問(wèn)并不意味著充滿(mǎn)活力

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

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

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

新聞名稱(chēng)：淺析設(shè)計(jì)可訪問(wèn)的色彩系統(tǒng)
本文路徑：http://jinyejixie.com/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)化、小程序開(kāi)發(fā)

廣告

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