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

實現(xiàn)與顏色的正確對比是具有挑戰(zhàn)性的，特別是因為顏色是非常主觀的，對產(chǎn)品的美學(xué)有很大的影響。我們想創(chuàng)建一個顏色系統(tǒng)，用手工挑選的，充滿活力的顏色，同時滿足可訪問性和對比度的標(biāo)準(zhǔn)。

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

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

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

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

背景

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

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

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

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

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

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

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

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

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

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

色彩空間的一個小插曲

為了解釋我們是如何做到這一點的，我們需要對顏色有點書呆子氣。

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

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

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

它是什么顏色的？

色度：它有多鮮艷？

亮度：有多亮？

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

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

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

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

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

可視化的顏色

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

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

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

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

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

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

大多數(shù)混合顏色的工具允許你設(shè)置值在每個參數(shù)的全系列，就夾的顏色或返回最近的合適的顏色并不代表參數(shù)設(shè)置?？梢暬瘜崟r可用顏色空間作為我們允許我們改變迭代快得多，因為我們可以告訴什么改變是可能的，什么改變我們更接近我們的目標(biāo)：“明亮”，區(qū)分顏色符合適當(dāng)?shù)膶Ρ鹊闹笇?dǎo)方針。

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

結(jié)果

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

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

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

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

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

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

總結(jié)

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

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

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

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

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

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

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

分享文章：淺析設(shè)計可訪問的色彩系統(tǒng)
網(wǎng)站路徑：http://jinyejixie.com/news/52241.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計公司、網(wǎng)站制作、App開發(fā)、外貿(mào)網(wǎng)站建設(shè)、商城網(wǎng)站、網(wǎng)站維護(hù)

廣告

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