▲點(diǎn)擊"三分設(shè)"關(guān)注，回復(fù)"社群"加入我們

歡迎來到專業(yè)設(shè)計(jì)師學(xué)習(xí)交流社區(qū)

三分設(shè)｜連接知識(shí)，幫助全球 1 億設(shè)計(jì)師成長(zhǎng)

作者：劉昱茜

編輯：李凱悅

共 5778 字，預(yù)計(jì)閱讀 15 分鐘

色彩對(duì)于品牌視覺形象來說至關(guān)重要，對(duì)設(shè)計(jì)師來說掌控色彩也非常關(guān)鍵。在設(shè)計(jì)團(tuán)隊(duì)中構(gòu)建色彩系統(tǒng)，建立屬于產(chǎn)品的調(diào)色板，是每個(gè)團(tuán)隊(duì)必須做的一件事?，F(xiàn)有的方法大都是按照公式計(jì)算，得到邏輯上嚴(yán)謹(jǐn)?shù)纳?，但卻忽略了人眼才是色彩最終面向的對(duì)象，具備視覺感知均勻性的色彩，才是更好的選擇。作者通過文章一步步地教給我們?nèi)绾卫?HSLuv 來創(chuàng)建一個(gè)感知均勻地色彩系統(tǒng)，一起來學(xué)習(xí)一下吧！

眾所周知，顏色是比較難以把握的。我們通過肉眼觀察屏幕并使用數(shù)字設(shè)備，但在屏幕上的顏色體驗(yàn)常常很難把控。

我們一直在使用工具作為輔助，但效果并不是很好，而且我們經(jīng)常碰到一些未知的問題。例如，顏色的數(shù)值一樣，但看起來卻不一樣，這會(huì)非常令人苦惱。因此，如果我們的色彩系統(tǒng)崩潰了，還能創(chuàng)造出色的體驗(yàn)嗎？

HSLuv，你好！

HSLuv 顏色模型是在我的認(rèn)知中最好的解決方案。但是，要了解其全部潛力并不容易。盡管我們可以找到無數(shù)有關(guān)色彩理論、色輪和色彩搭配的文章資源，但與 HSLuv 相關(guān)的知識(shí)卻很少（尤其是在設(shè)計(jì)方面的應(yīng)用）。

1. 簡(jiǎn)要了解顏色模型

首先，我們必須深入研究常用的顏色模型以及如何使用它們。盡管我們不需要精通色彩理論，但了解最常用的色彩模型及其在工作流中扮演的角色將有助于我們理解 HSLuv 為何會(huì)從其他顏色模型中脫穎而出。

理想情況下，色彩工具應(yīng)該是直觀的、簡(jiǎn)單的，它可以提高我們的工作效率，并可以任意調(diào)整，使我們能夠直觀地了解改變數(shù)值與顯示顏色之間的聯(lián)系。

1）RGB 和 HSL

RGB 模型有一個(gè)最大缺點(diǎn)：RGB 不僅不能反映真實(shí)的色彩空間，而且使用起來也不直觀 —— 基于紅、綠、藍(lán)三個(gè)坐標(biāo)混合來創(chuàng)建的顏色，并不能清楚地展示我們?cè)谧鍪裁础?/span>

你可能熟悉 HSL 顏色模型，該模型將色彩值轉(zhuǎn)化為更易于理解的色相、飽和度 和亮度，解決了 RGB 缺乏直觀性的問題。它 在一個(gè)簡(jiǎn)單易用的 360 度色輪上顯示顏色（如果算上亮度這一維度，嚴(yán)格上來說是個(gè)圓柱體）。但是 HSL 只是簡(jiǎn)化了使用該顏色模型的過程，仍然忽略了顏色外觀的整體復(fù)雜性，HSL 顏色模型的結(jié)果是否準(zhǔn)確是存疑的。

2）CIELUV 和 HSLuv

對(duì)我們來說幸運(yùn)的是，在 1976 年，我們有了 CIELUV 色彩模型，它通過與人眼感知顏色的方式相匹配的 亮度成分 來設(shè)置顏色，解決了這個(gè)問題。除了亮度成分，U 和 V 代表顏色的色度坐標(biāo)。

但是由于輸入值的原因，CIELUV 使用起來不是很直觀。好消息是，Alexei Boronine 于 2012 年創(chuàng)建了 HSLuv 模型，該模型結(jié)合了兩個(gè)方面的優(yōu)點(diǎn)來解決了這些問題 —— 它 使用 CIELUV 的亮度成分，并將其與色相和飽和度配對(duì)，使其成為易使用、易理解的色彩工具。

2. 真實(shí)顏色測(cè)試

在下面的圖片中，我們可以看到第一列中 HSLuv 顏色的 感知均勻性[1]與第二列中 HSL 顏色的感知均勻性存在明顯差異。

（[1]感知均勻性：在感知均勻的色彩空間中相同的視覺間隔應(yīng)該能夠用相同的顏色差來表示，即更接近人眼的視覺效果。）

HSL 的顏色在與 HSLuv 有相同的亮度值時(shí)，不僅在感知均勻方面有如此大的差異，而且觀察右邊的灰度范圍時(shí)，很明顯 HSL 在對(duì)比度上也嚴(yán)重不足。

簡(jiǎn)而言之，使用 HSLuv，我們可以控制對(duì)比度，同時(shí)保證在整個(gè)調(diào)色板中顏色的外觀和感覺一致。

3. 設(shè)計(jì)你的調(diào)色板

我認(rèn)為，任何強(qiáng)大的系統(tǒng)都需要一個(gè)好的設(shè)計(jì)方案。因此，在進(jìn)入創(chuàng)造色彩系統(tǒng)之前，我們應(yīng)該考慮要實(shí)現(xiàn)的三個(gè)重要目標(biāo)。

可接近性
靈活性
統(tǒng)一生態(tài)型

1）可接近性

在我們的案例中，目標(biāo)是達(dá)到 WCAG[2] 標(biāo)準(zhǔn)中色彩對(duì)比度的 AA 級(jí)水平。這意味著對(duì)于指定的圖形元素，其需要至少具備 3.0：1 的對(duì)比度，而對(duì)于文本，需要具備至 4.5：1 的對(duì)比度。

（[2]Web內(nèi)容無障礙指南（WCAG）涵蓋范圍廣泛，涉及了一些建議，這些建議可使網(wǎng)站內(nèi)容更容易訪問。遵循這些原則，web內(nèi)容更易為廣大殘疾人士所接受，這些包括盲人和低視患者、聾人和重聽人、學(xué)習(xí)障礙、認(rèn)知障礙、行動(dòng)不便、言語殘疾、光過敏患者和這些病癥的復(fù)合患者。）

提醒一下，上述對(duì)比度的數(shù)值是基于白色的背景色，但是 我們的顏色也應(yīng)該在其他背景顏色上達(dá)到最小對(duì)比度的標(biāo)準(zhǔn)。

2）靈活性

如果要考慮可訪問性，就需要先考慮色彩范圍的靈活性。靈活性意味著一種色彩變化的步驟數(shù)及其在設(shè)計(jì)系統(tǒng)中的應(yīng)用。

為了簡(jiǎn)化有關(guān)范圍的概念，我們可以從傳達(dá)信息和功能的角度來思考顏色，如下圖所示。該圖對(duì)于如何分配顏色僅提出了一個(gè)非常粗略的想法，即根據(jù)所需的對(duì)比度及其目的將元素放置在何處。

可以將這些步驟想象成你的產(chǎn)品體驗(yàn)和層級(jí)結(jié)構(gòu)的組成部分，例如按鈕及其狀態(tài)、UI 元素（輔助線、卡片輪廓、背景、圖標(biāo)），或者為文本提供所需的顏色范圍（涵蓋從標(biāo)題到微文案的所有內(nèi)容）。

我們顏色的靈活性不僅限于組件，還可以是顏色的交叉組合，尤其是在你準(zhǔn)備使用非白色或深色的主題時(shí)。

3）統(tǒng)一生態(tài)性

請(qǐng)記住，色彩方案不僅對(duì)你的產(chǎn)品很重要。它們還可以用于插畫或品牌創(chuàng)意，統(tǒng)一的顏色可以幫助你建立一個(gè)強(qiáng)大的生態(tài)系統(tǒng)，該生態(tài)系統(tǒng)具有相似的視覺樣式，從而有助于加強(qiáng)品牌的形象識(shí)別。

4. 了解色彩成分

有了計(jì)劃之后，讓我們看一下創(chuàng)建色彩需要哪些數(shù)值。

1）色相

色相用 0 到 360 之間的數(shù)值表示顏色范圍介于 0 到 360 之間。我們可以看到，除了顏色外觀以外，色相不會(huì)影響其他內(nèi)容。其他值是相似的，包括對(duì)比度。

2）飽和度

飽和度是我們色彩的鮮艷度和強(qiáng)度 —— 它會(huì)使色彩變得明亮或暗淡。我們將使用 100％的飽和度進(jìn)行工作，最終調(diào)整顏色以獲得可感知的一致性。同樣，飽和度不會(huì)影響任何值（在某些情況下，它會(huì)改變對(duì)比度，但變化非常小，如下所示）。

3）亮度

亮度是直接影響對(duì)比度的關(guān)鍵組成部分 —— 它使顏色更淺或更深。我們將其作為創(chuàng)建色彩范圍的第一步。

5. 建立色階

色階是表示圖像亮度強(qiáng)弱的指數(shù)標(biāo)準(zhǔn)，也就是我們說的色彩指數(shù)，指的是 灰度分辨率（又稱為灰度級(jí)分辨率或者幅度分辨率）。圖像的色彩豐滿度和精細(xì)度是由色階決定的，色階指亮度，在黑色（ 0％亮度）和白色（ 100％亮度）之間按照亮度遞進(jìn)的組成顏色組合，這一步驟將幫助我們構(gòu)建感知上統(tǒng)一且靈活的系統(tǒng)。

每種顏色理想的色階數(shù)是多少？大概是 10 階，我將在本文后面對(duì)此進(jìn)行解釋。但是，為了演示，我將減少一個(gè)色階，決定建立一個(gè) 9 階的色彩范圍。

開始時(shí)，第一個(gè)應(yīng)該建立的色階是灰色，這不僅是因?yàn)槲覀兺ǔＴ?UI 中使用灰色作為默認(rèn)顏色，來創(chuàng)建可視層次結(jié)構(gòu)和組件，還因?yàn)槲覀儗⑦M(jìn)行一些調(diào)整，這些調(diào)整只在沒有色相的情況下才可能實(shí)現(xiàn)。

p.s.我不會(huì)在最終的調(diào)色板中加入純黑色，因?yàn)槠渑c白色形成強(qiáng)烈的對(duì)比色會(huì)造成視覺問題。

1）線性色彩范圍

我們知道亮度影響對(duì)比度，因此也會(huì)影響到每個(gè)色階。我們采用一種簡(jiǎn)單的方法，用線性的方式定義色階，使每一個(gè)色塊亮度差距為 10％。

這看起來不錯(cuò)，但這其實(shí)離理想的色彩方案還差很遠(yuǎn)。

6. 學(xué)習(xí) IBM 的流程

IBM 是一個(gè)設(shè)計(jì)和可訪問性很強(qiáng)的企業(yè)。他們要求在完全靈活的條件下測(cè)試色彩系統(tǒng)，基于 HSLuv 顏色模型創(chuàng)建的調(diào)色板反映了這一點(diǎn)。那么，我們可以從他們的經(jīng)驗(yàn)中學(xué)到什么，并將其應(yīng)用于我們創(chuàng)建的線性色階？

1）光能和人眼

我們面臨的第一個(gè)問題是，與亮色調(diào)（高能量光）相比，人眼對(duì)暗色調(diào)（低能量光）之間的變化更敏感。簡(jiǎn)而言之，與深灰色之間的顏色相比，我們更容易區(qū)分淺灰色之間顏色的轉(zhuǎn)變。但現(xiàn)在我們的線性色階并不能反映這一點(diǎn)。

2）與其他顏色結(jié)合

第二個(gè)問題來自人眼對(duì)色板對(duì)比度的需求。如果最終目的是足夠靈活，那么我們必須尋求一個(gè)色階，給我們足夠的選擇能與背景色相結(jié)合，線性色階也沒有滿足這一點(diǎn)。

3）讓顏色講故事

上面提到的兩個(gè)問題都將揭示另一個(gè)重要點(diǎn)，驅(qū)動(dòng)我們產(chǎn)品的品牌和視覺體驗(yàn)的元素（主要的 CTA、圖標(biāo)），都應(yīng)該使用調(diào)色板色階里中間的那個(gè)顏色。

這是為什么？在色階中間的顏色，接近達(dá)到所需的最低對(duì)比度的顏色，在視覺上它們具有足夠的亮度，因此這些顏色脫穎而出，它們將推動(dòng)構(gòu)建產(chǎn)品的層次結(jié)構(gòu)和品牌體驗(yàn)。

7. 讓色階派上用場(chǎng)

根據(jù)上面的推理，我們必須開始嘗試線性色階內(nèi)的所有亮度值。我認(rèn)為要真正理解值之間的所有關(guān)系，應(yīng)該花一些時(shí)間來創(chuàng)建屬于自己的而不是采用已經(jīng)眾所周知的色彩范圍。

1）對(duì)比度鐘形圖

我發(fā)現(xiàn) IBM 有一個(gè)工具在調(diào)整色階過程中非常有用 —— 如下圖網(wǎng)格，用于比較整個(gè)范圍內(nèi)每個(gè)顏色之間的對(duì)比度數(shù)值，以此我們可以優(yōu)化此色階。

1 - 分析曲線

在網(wǎng)格上放下我們的色階之間的對(duì)比度關(guān)系的值之后，我們可以發(fā)現(xiàn)一些問題：

該范圍在中間部分存在非常相似的對(duì)比度值，這不利于在彼此之間的色階之間創(chuàng)建足夠的對(duì)比度靈活性
深灰色的對(duì)比關(guān)系低于淺灰色，因此肉眼很難區(qū)分

2 - 手動(dòng)調(diào)整曲線

我們必須 更新兩端的曲線，使深灰色之間的對(duì)比度更高，同時(shí)保持淺灰色之間的對(duì)比度更低，從而實(shí)現(xiàn)兩端的肉眼感知平衡。

除此之外，我們還要 注意一下中間顏色的對(duì)比度，嘗試讓它比兩邊的顏色對(duì)比度更高，通過增加暗色之間的對(duì)比度即可達(dá)到這一效果。

我發(fā)現(xiàn)從深灰色開始，沿峰頂建立曲線（顏色階躍為 600、500），然后繼續(xù)下降為白色，這樣的曲線范圍效果很好。

在這里有幾件事要注意：

隨著亮度值的變化，我們不僅要改變周圍色塊之間的對(duì)比度，還要改變色彩與白色背景之間的對(duì)比度。這意味著，你有可能確實(shí)修復(fù)了曲線，但是顏色仍然不具有組合的靈活性。
每一個(gè)小變化都很重要。通常，我們不會(huì)將亮度值大幅度地從 80 移到 70，而是通過微小范圍梯度（例如 69.5 vs 70）來實(shí)現(xiàn)，因?yàn)榻橛趦烧咧g的兩個(gè)十六進(jìn)制代碼可以輕松地改善或者破壞對(duì)比度曲線。
還記得我們的靈活性示意圖嗎，打算要在系統(tǒng)中使用一些主題 —— 使用非白色的背景。因此，我們并不是只通過最小的對(duì)比度建立峰值步幅（600，500），而是增加了一點(diǎn)對(duì)比度，因此可以與非白色背景（100）結(jié)合使用。

我個(gè)人是在 Figma 中完成的，純粹使用 HEX 代碼（忘記 HSL 吧?。?/span>，在 HSLuve 插件上更改亮度，然后切換回 Contrast 插件以查看產(chǎn)生的變化。同時(shí)，我將這些新值放在關(guān)系網(wǎng)格上，這樣我便知道要移動(dòng)的位置。

p.s. 我希望能夠在 Figma 中同時(shí)運(yùn)行兩個(gè)插件。

3 - 檢查新色階

現(xiàn)在，通過調(diào)整色階，我們可以觀察到平滑曲線的對(duì)比度變化，特別是在從白色開始以及中間色階附近之間的變化。

在此階段，我還在中間步驟中添加了一個(gè)色相組件，表明這些顏色可以在視覺外觀上有更多的可能，同時(shí)又保持在計(jì)劃的最小可訪問性之內(nèi)。

8. 靈活性才是力量

在靈活性方面，通過調(diào)整后的 9 階色階，我們獲得了 4 種可以達(dá)到至少 4.5：1 對(duì)比度的眼啊色，可以用于白色背景。

我們同樣為靈活性提供了三個(gè)主題選項(xiàng)：

我們的 light and light II 主題使用相同的色階，以幫助我們加強(qiáng)用戶和品牌統(tǒng)一體驗(yàn)。
所有這三個(gè)主題都具有我們計(jì)劃用于主要 CTA（主要行動(dòng)按鈕）和圖標(biāo)的相同的顏色

你可能會(huì)注意到，深色主題多了一個(gè)可用顏色。發(fā)生這種情況的原因是在 9 階色階中，基于淺色和深色背景無法獲得相同數(shù)量的顏色。

最后，一旦我們將這些顏色放入系統(tǒng)中，它們應(yīng)用至與目的相匹配的位置，以在我們的產(chǎn)品中建立體驗(yàn)，就可以看到我們創(chuàng)建的色板發(fā)揮真正的靈活性。

9. 添加額外的色階

如果你想知道 10 階色階和 9 階色階哪個(gè)更好，以及它是如何跨主題分配顏色的，我以 IBM 的色階為依據(jù)創(chuàng)建了一個(gè)樣本進(jìn)行對(duì)比。

色階加入額外一階后，我們可以將中間色的對(duì)比度調(diào)低一些，使中間色階梯度更加突出，同時(shí)仍然滿足所有最低的對(duì)比度要求。

不僅如此，另一個(gè)步驟是可以通過 4.5：1 的對(duì)比度為文本提供一種額外的顏色，而且這一步可以使主題顏色板更多，這對(duì)于像 IBM 這樣的擁有數(shù)百種產(chǎn)品和豐富經(jīng)驗(yàn)的公司來說至關(guān)重要。

10. 更多顏色，更多調(diào)整

我還沒有介紹流程的最后一步，因?yàn)檫@會(huì)使之前的部分變得更加復(fù)雜。但是，這一步很重要，因?yàn)樗忉屃藶槭裁次覀冮_始要向調(diào)色板中添加色相成分時(shí)，要對(duì)飽和度進(jìn)行調(diào)整。

下面，我使用原始線性色階調(diào)色板中相同亮度數(shù)值而顏色，向其中添加了 100％飽和度的色相，對(duì)三種不同的顏色進(jìn)行了采樣。

我們可以看到幾種顏色的視覺峰值，主要分布在在較淺的地方或中間梯度處。這些不一致或多或少地取決于色調(diào)。這完全沒問題，因?yàn)槲覀兛梢栽趯?duì)比度沒有明顯變化或?yàn)榱愕那闆r下解決此問題。

尤其是紫色亮度為 600 時(shí)稍微有些偏離，類似于亮度為 300、200、100 的黃色和 300、200 中的綠色。我們將僅僅調(diào)整飽和度，而不調(diào)整其他數(shù)值。

現(xiàn)在，顏色似乎更加整齊，但是，為了真正測(cè)試感知均勻性，我們必須將這些顏色翻轉(zhuǎn)為灰度，以勘查整個(gè)調(diào)色板中的不一致的地方。

最后的話

本文的目的是真正地展示 HSLuv 顏色模型的優(yōu)勢(shì)，不僅能制作與人眼感知一致的顏色，而且還提供了可以供我們舒適地使用的過程和組件。

希望可以在你創(chuàng)建的過程中看到 HSLuv 的其他優(yōu)勢(shì)，從而我們不僅可以用它構(gòu)建對(duì)人眼友好的產(chǎn)品體驗(yàn)，而且可以讓這個(gè)過程更簡(jiǎn)單易操作。

我會(huì)鼓勵(lì)你從 0 色階開始，就像我一開始所做的那樣。通過不斷嘗試而探求合適的亮度值和組合，你將會(huì)學(xué)到很多知識(shí)，為你學(xué)習(xí)和了解顏色的其他重要方向的知識(shí)（例如可接近性或視覺層次結(jié)構(gòu)）打開大門。

原文：https://uxdesign.cc/creating-accessible-colors-for-human-eyes-66ed6a083230

作者：Frantisek Kusovsky

譯者：劉昱倩

審核：吳鵬飛、李澤慧、張聿彤