Web 可訪問性：理解顏色和亮度

雖然理解顏色、亮度和飽和度對所有有視力使用者的設計和可讀性都很重要，但它們對於視力受損、色覺缺陷以及有特定神經、認知和其他障礙的人來說至關重要。

可訪問性指南為有視力受損的使用者定義了足夠的顏色對比度，以及旨在幫助色覺不敏感使用者（通常稱為“色盲”）的指南。理解顏色對於預防患有前庭功能障礙或其他神經系統疾病的人發生癲癇發作和其他身體反應也很重要。

概述

顏色的選擇和使用是可訪問性的一個重要組成部分。表面上看，這個主題很簡單。然而，這是一個複雜的主題，因為顏色感知既關乎眼睛的生理和人腦的處理，也關乎計算機螢幕發出的光線。

環境與感知

環境很重要。在光線充足的房間裡對顏色的感知，會與在黑暗房間裡同一臺電腦螢幕上對相同顏色的感知不同。關於可訪問性，使用某些顏色組合比其他顏色組合影響更大。字型大小、字型樣式（有些字型太細或太花哨，本身就存在可訪問性問題）、背景顏色、文本週圍背景空間的尺寸，甚至畫素密度等，都會影響顏色從螢幕上的呈現方式。

觀看者與螢幕的距離、環境背景、眼睛的健康狀況等等，都會影響觀看者如何接收該顏色。顏色進入眼睛後，觀看者如何感知它又是另一回事，並且會受到整體健康狀況的影響。幸運的是，有媒體查詢可以使開發人員根據使用者偏好提供樣式，包括對比度和顏色方案偏好。

如果支援，環境光感測器介面會返回主機裝置周圍環境光的當前光照水平或照度，使網頁能夠感知光強度的任何變化，並相應地調整文字。此外，上述媒體查詢允許開發人員在使用者偏好指示首選對比度級別時提供替代使用者體驗，根據使用者的位置和他們使用的螢幕型別自動調整級別。

亮度與感知

顏色、對比度和亮度是建立具有顏色的可訪問 Web 內容最核心和最關鍵的概念。然而，亮度尤為重要，因為理解它是什麼以及如何使用它，可以為色盲患者以及能感知顏色的人提供可訪問性。亮度對比度使色盲患者能夠區分深色和淺色。

亮度必須在對比度之前確定。在談論顏色對比度時，W3C 公式中包含了亮度，而不僅僅是顏色（“色相”）本身。

術語可能會令人困惑，因為不同的術語通常描述同一事物。“亮度”和“飽和度”尤其需要準確理解。例如，“飽和度”在某些圈子中被稱為“色度”。而在另一些圈子中，“色度”和“飽和度”是兩個不同的概念。HSL 顏色空間中的“L”有時被稱為“亮度”，有時被稱為“明度”。即使是像命名常用顏色這樣看似簡單的事情，也可能引起爭議。例如，顏色“深紅色”可能被某些人描述為十六進位制值#990000，而被另一些人描述為#DC143C。對於本文件，我們將使用 CSS <named-color> 頁面上定義的術語。

使用顏色時，瞭解您正在使用的“色彩空間”很重要，因為不同的色彩空間對映到不同的測量系統。

在彩色列印中，您的印表機可能具有青色、品紅色、黃色和黑色 (CMYK) 墨盒。CMYK 是一種減色模型，其中四種墨水會去除特定波長的光，只反射與其相關的狹窄範圍。RGB 是一種加色模型，它新增不同比例的紅色、綠色和藍色光。

目前，RGB 顏色空間是 Web 開發人員工作的主導空間。雖然 HEX、RGB 和 HSL 顏色空間的表示方式不同，但瀏覽器會自動在這些顏色表示之間轉換值。CSS 顏色模組提供了額外的顏色空間。但是，由於 RGB 顏色空間目前在測量顏色輸出方面的統治地位，本文件中的大多數計算都被假定為在 RGB 顏色空間中，並且特別是在 sRGB 顏色空間中。

sRGB 顏色空間

顏色有多種定義方式，這在<color> 資料型別中顯而易見，其中包括 RGB、RGB 十進位制、RGB 百分比、HSL、HWB、LCH、Lab 和 CMYK 等。

對於數字領域，大部分技術歷來都存在於 RGB 顏色空間中。RGB 顏色模型擴充套件為包含“alpha”——RGBA——以允許指定顏色的不透明度。其他顏色測量方法涉及使用其他顏色空間進行測量，並受現代顯示器和瀏覽器的支援。然而，RGB 顏色空間中的顏色測量仍然占主導地位，包括在影片製作中。

諸如 OpenGL 和 Direct3D 等技術支援 sRGB 伽馬曲線，儘管一些 OpenGL 參考文章使用的是 RGBA 而非 sRGB。WebGL 通常採用 RGBA 格式；請參閱“用顏色清除”中如何使用的示例。

CSS 顏色值

重要的是要知道，即使在同一個顏色空間內，例如RGB顏色空間，也存在變體。例如，RGB 顏色空間的變體包括 RGB、sRGB、Adobe RGB、Adobe Wide Gamut RGB 和 RGBA 等。

這些是用於定義顏色的 CSS 表示法的示例。這裡每個示例顏色都是完全不透明的洋紅色。

css

/* named color */
color: magenta;

/* sRGB value with percentage values */
color: rgb(100% 0% 100%);
color: rgb(100% 0% 100% / 100%);

/* by sRGB numeric values */
color: rgb(255 0 255);
color: rgb(255 0 255 / 1);

/* legacy rgb and rgba notation */
color: rgb(100%, 0%, 100%);
color: rgba(255, 0, 255, 1);

/* by sRGB value in hex */
color: #f0f; /* #rgb, a shorthand for #rrggbb */
color: #ff00ff; /* #rrggbb */
color: #f0ff; /* #rgba */
color: #ff00ffff; /* #rrggbbaa */

/* by HSL representation of the sRGB value */
color: hsl(300 100% 50%);
color: hsl(300deg 100% 50% / 100%);

/* by HWB representation of the sRGB value */
color: hwb(300deg 0% 0%);
color: hwb(300 0% 0% / 1);

/* by Lab representation of the sRGB value */
color: lab(60 93.56 -60.5);
color: lab(60 93.56 -60.5 / 1);

/* representation in the CIELAB color spaces */
color: oklch(0.7 0.32 328.37);
color: oklch(0.7 0.32 328.37 / 1);

/* color() function in the XYZ color space */
color: color(xyz-d65 0.59 0.28 0.96);
color: color(xyz-d65 0.59 0.28 0.96 / 1);

第一個例子使用了其中一種已定義的命名顏色。

我們可以直接將 sRGB 值設定為百分比，其中 0% 為關閉（黑色），100% 為該顏色的完整值。這些值的順序是紅、綠、藍。我們也可以直接將 sRGB 值設定為 0 到 255 之間的一個數字。

之後顯示的是十六進位制顏色值。十六進位制是一種基數為 16 的計數系統，其中 0-255 的整數由兩個數字表示，範圍從 0-15，使用數字 0-9 和字母 a-f 表示 10-15。因此，ff = 255，00 = 0，d5 = 200。“#”符號在顏色前面表示該值是十六進位制。

如果所有值都是相同的數字對，則該值可以用單個數字表示，瀏覽器會將其複製。因此 f00 與 ff0000 相同。如果存在第四組數字，則該值是 RGBA 中的 A，即 alpha 通道，它根據顏色的不透明度值定義透明度。值越高，顏色越不透明，因此越不透明。在上面的示例中，alpha 值分別為 f、ff、1 和 100%，表示完全不透明。

該示例還展示了 rgb() 和 rgba() 的舊版語法。顏色函式的舊版語法是逗號分隔的，當包含 alpha 通道時有單獨的函式。新的顏色函式只有一種語法，使用空格分隔（而不是逗號分隔）的值，如果存在 alpha 通道，則在其前面加上斜槓。現代語法允許混合數字和百分比，並支援 none 關鍵字；逗號分隔的舊版語法不支援。

以下示例展示了“HSL”，它代表色相 (Hue)、飽和度 (Saturation) 和亮度 (Lightness)。許多人認為 HSL 顏色值比 RGB 值更直觀。設定後產生的顏色仍在 sRGB 色彩空間中，但對於許多人來說，hsl() 是一種直觀的語法。色相透過角度進行調整，並且很容易使用旋鈕或圓形控制元件建立使用者介面來調整色相。請注意，HSL 顏色包含亮度 (lightness)，而不是明度 (luminance)，這是一個重要的考慮因素。

接下來的示例展示了“HWB”，它代表色相 (Hue)、白色度 (Whiteness) 和黑色度 (Blackness)。對於 hsl() 和 hwb()，第一個值可以是<number>或<angle>值。當無單位時，該值被解釋為 deg 度。

還有其他幾種顏色函式和顏色空間。最後三個示例演示了使用 lab()、oklch() 和 color() 顏色函式表示洋紅色。

轉換

如我們所見，相同顏色空間中的一種顏色可以用多種方式表達。檢視 RGB 顏色空間如何用於描述顏色“洋紅色”，您可以看到相同的顏色可以用簡寫的三位十六進位制數字表示，該數字轉換為六位十六進位制數字的 rgb 值，該數字也轉換為相同的 rgb 值，或者用百分比表示的 rgba 值。

RGB 是面向硬體的，反映了 CRT 的使用。許多開發人員和設計師更喜歡 hsl() 表示法的直觀性。幸運的是，瀏覽器會自動從 RGB 轉換為 HSL，並且在瀏覽器開發者工具中按住 Shift 鍵單擊顏色即可提供轉換功能。

除了開發者工具，許多工具還可以為您將 RGB 轉換為 HSL，並提供 RGB 十六進位制和 CSS 函式語法。一個將顏色為您轉換的絕佳工具是 Tom Jewett 的“迷你顏色選擇器”，它具有 HSL、RGB 和十六進位制選項，用於在瀏覽器中檢查對比度。請注意，開發者工具顏色選擇器和此工具都提供了 WCAG 顏色對比度值。

Color picker with HSL and RGB, with color contrast values.

如前所述，CSS 顏色模組包括新增額外的顏色空間，包括 lch() 和 oklch() 函式顏色表示法，以及 lab() 和 oklab() 顏色座標系統，它們可以指定任何可見顏色。儘管如此，sRGB 仍然是可訪問性的預設和首選顏色空間，因為它無處不在。

然而，就可訪問性而言，目前的標準和指南主要使用 sRGB 顏色空間編寫，尤其是在顏色對比度方面。

注意：目前幾乎所有用於檢視 Web 內容的系統都假定 sRGB 編碼。除非已知將使用其他顏色空間來處理和顯示內容，否則作者應評估使用 sRGB 顏色空間。如果使用其他顏色空間，請應用最小對比度的原則。

查詢顏色值

Window.getComputedStyle() 方法使用 RGB 十進位制參考比例或透過 color(srgb...) 返回值。例如，在一個設定了 background-color: red 的 <div> 上呼叫 Window.getComputedStyle() 會返回計算出的背景顏色為 rgb(255, 0, 0) — RGB 十進位制參考。然而，當使用相對顏色時（例如 background-color: rgb(from blue 255 0 0)），呼叫 Window.getComputedStyle() 返回計算出的背景顏色為 color(srgb 1 0 0)。由於與計算機硬體相關聯，Window.getComputedStyle() 以 RGB 衡量顏色，而不是人眼感知顏色的方式。

紅/綠色盲

紅色盲是一種色覺缺陷，眼睛中沒有紅色錐體細胞；儘管比正常視力更暗，但 sRGB 仍可透過綠色錐體細胞感知。紅色盲（紅色缺陷）和綠色盲（綠色缺陷）都會導致難以區分紅色和綠色。

開發者工具可以幫助您直接在瀏覽器中模擬色覺差異。例如，Firefox 的輔助功能檢查器可以在輔助功能面板中直接模擬紅色盲、綠色盲、藍色盲、全色盲和對比度喪失。

Snippet of Firefox developer tools showing the simulate popup

亮度與對比度

對比度

顏色（“色相”）之間的對比度是關鍵組成部分，但僅使用顏色（“色相”）不足以建立可訪問的內容。如前所述，任何對比度計算都必須包含亮度。

此外，文字本身的“形狀”也很重要。細長的字母比粗大的字母更難閱讀；所有字型都需要“呼吸空間”才能被人眼感知。

對比度與字型大小

WCAG 對比度指南將“大”文字定義為 font-weight 為 normal 時 18pt（約 24px）或更大的文字，以及 bold 文字的 14pt（約 18.7px）。說明如下：

字型更大、筆畫更寬的文字在較低對比度下更容易閱讀。因此，較大文字的對比度要求較低。這允許作者為大文字使用更廣泛的顏色選擇，這有助於頁面的設計，尤其是標題。

雖然大文字不需要像小文字那樣與其背景有很強的顏色對比，但增加字型大小並非萬能。

“正常”字型通常被認為是 11.5pt 到 12pt，相當於螢幕上的 16px。雖然較小的字型可能清晰可辨——使用者可以辨認出字母的準確率約為 70%——但這並不易讀。16px 的字型大小通常對視力正常的人來說是可讀的。視力為 20/40 的人需要兩倍的字型大小，大約 31px。這就是 WCAG 指南要求使用者能夠放大任何文字的原因。

文字顯示太小難以閱讀，文字太大也是如此。對於視力為 20/20 的使用者，文字大小超過約 96px 時，閱讀速度會降低。此外，當頁面上最小和最大字型大小之間存在巨大差異時，如果使用者放大頁面上的較小文字，較大文字的可讀性會降低，因為大多數瀏覽器會隨著使用者縮放而縮放所有文字。

一般來說，出於可訪問性目的，對比度越高越好。動畫則有所不同。“更安全”的動畫意味著影像對比度更低，而不是更高。有關動畫中顏色對比度的更多資訊，請參閱瞭解成功標準 2.3.1：三次閃爍或低於閾值

另請注意，圖示需要足夠的對比度才能被感知。請參閱 WCAG 2.1 技術 G207

亮度

正是顏色亮度的差異使我們能夠看到對比度。相對亮度在 WCAG 中定義為“色彩空間中任意點的相對亮度，歸一化為最暗黑色為 0，最亮白色為 1。”

這個說法當然是準確的，但在引用 RGB 顏色空間時可能會令人困惑，因為 RGB 顏色空間是一個介於 0 到 255 之間的整數。白色具有 100% 的相對亮度，黑色具有 0% 的相對亮度（在大多數但並非所有文獻中）。根據上述 W3C 標準解釋，這意味著白色（歸一化為 1）將具有 rgb(255 255 255) 的 RGB 值，而黑色（歸一化為 0）將具有 rgb(0 0 0) 的 RGB 值。請注意，黑色和白色也可以分別寫為 rgb(100% 100% 100%) 和 rgb(0% 0% 0%)，這可能更直觀。

那麼，這些 0 到 255 的數字是從哪裡來的呢？歷史上，圖形引擎將顏色通道儲存為單個位元組，這意味著整數範圍在 0 到 255 之間。

原色的亮度是不同的。例如，黃色的亮度比藍色大。根據美國宇航局的文件《彩色圖形中的亮度對比度》所述，這是透過設計實現的，以實現顯示器的白點對齊。

沒有亮度成分，顏色對比度是毫無意義的；一旦亮度確定，顏色對比度就可以確定。

就人類感知而言，亮度的差異比顏色的差異更重要。這很重要，因為亮度對比度使得即使是色盲患者也能看到內容。有了這種理解，亮度可以被操縱，使得由於低亮度而難以看到的顏色可以透過將其放置在具有對比亮度的另一種顏色上來提高可讀性。例如，美國宇航局對藍色的一項有趣研究指出，這種亮度低的顏色，如果注意實現足夠的亮度對比度，就可以使其清晰可讀（摘自文章《使用藍色設計》）。

相對亮度的計算並非隨意。幸運的是，有線上亮度和對比度檢查器可用，甚至還有關於如何計算相對亮度的說明。

感知顏色

顏色是我們對從紅色經過黃色、綠色到藍色的可見光窄帶的感知。我們對這些各種顏色的敏感度並不相同。我們眼睛中感光的細胞，稱為視錐細胞，被調節成比其他顏色更能感知某些顏色。大約 65% 的視錐細胞對黃/綠色最敏感，但也對紅色有反應（我們稱之為“紅色”視錐細胞）。30% 對綠色敏感，只有5% 對藍色敏感。雖然對藍色敏感的視錐細胞比其他兩種型別少得多，但這些視錐細胞非常敏感，這部分彌補了它們數量較少的問題。

深純藍色與其他顏色的感知方式不同，因為藍色錐體細胞不參與亮度，而且我們擁有的藍色錐體細胞比紅色或綠色少得多。

On the left is a cone mosaic of standard vision, and on the right is that of someone with protanopia where they are missing the red cones.

左側是標準視力的中央視錐細胞鑲嵌，右側是紅色盲患者的視錐細胞鑲嵌，紅色盲是一種色覺缺陷，他們缺少紅色視錐細胞。（RIT 的 Mark Fairchild 繪製的插圖，維基共享資源）

紅色和綠色視錐細胞共同產生亮度，我們可以將其視為與色相無關的明暗。單獨來看，紅色、綠色和藍色視錐細胞使得標準視力能夠感知數百萬種顏色。對於可訪問性而言，重要的是要知道我們的大腦將亮度與顏色（色相和鮮豔度）分開處理。

亮度提供精細的視覺細節，包括區分邊緣和文字。色相和色彩飽和度攜帶的細節只有亮度的三分之一。影像資料壓縮利用了這一事實。例如，h.264 影片編解碼器以亮度四分之一的解析度對顏色進行取樣。

對於可訪問性而言，這意味著亮度對比度對於文字至關重要。顏色，如色相和飽和度，對於區分地圖上不同的線或圖表中的條形等專案很重要。

另一個需要考慮的重要點是顏色周圍的顏色或亮度。顏色會根據周圍環境而顯得不同。在下圖中，黃色點和灰色方塊都是相同的 sRGB 顏色。上下文敏感的顏色感知使它們看起來不同；您的大腦影像處理會根據它認為是否在陰影中來調整感知。

An image of a checkerboard, where identical colors look different if they are in shadow

此圖片中的黃色點在您的顯示器上顏色相同，但由於上下文不同，它們看起來有所不同。（圖片 D.Lyon）

我們的對比度、明度和顏色感知會受到附近顏色以及設計或影像其他特徵的影響。這使得預測對比度變得具有挑戰性。它不僅僅是兩種顏色之間的數學比率。

總而言之，顏色既關乎人體的生理和大腦感知，也關乎測量計算機螢幕發出的光線。瞭解環境光環境如何影響感知顏色和對比度的能力也很重要。光線及其測量是線性的，但人類視覺和感知不是。

適應

我們的眼睛從亮區到暗區，以及反之，不會以相同的方式均勻適應。這是由於我們眼睛的生理構造方式造成的。這會影響使用者在背景下閱讀文字的能力。至少有兩種適應發生：區域性適應和對環境的適應。

區域性適應發生在讀者正在閱讀的“頁面”上。例如，如果灰色“高亮”區域內有藍色文字，那麼如果該區域位於黑色<div>中，或者白色<div>中，您的眼睛對該藍色文字與灰色高亮的感知會不同。這被稱為區域性適應。即使房間的環境光照沒有改變，這種感知文字能力的差異也會受到影響。

其含義是，尋求改善文字在背景下可讀性的 Web 開發人員可以利用區域性適應的原則。

對低亮度的暗適應是緩慢的。當你從陽光明媚的室外走進一個黑暗的房間時，你正在經歷暗適應。這可能需要幾分鐘來調整。

光適應則相反。從黑暗的房間走到明亮的陽光下更快，但也可能感到刺眼。

其含義是，尋求改善文字可讀性的 Web 開發人員，在房間環境條件發生變化時，可以利用 AmbientLightSensor 介面和 prefers-contrast 媒體查詢。

飽和度

在關於顏色（“色相”）和可訪問性的討論中，飽和度值得特別提及。一般來說，在試圖確保文字與其背景之間有足夠的對比度或評估誘發光敏性癲癇患者癲癇發作的可能性時，大多數關注點都在亮度上。然而，顏色（“色相”）的一個方面，獨立於亮度，在應用於可訪問性時值得特別關注：飽和度概念。這是因為它能夠引起對光敏性癲癇敏感的人的癲癇發作，而與顏色的亮度無關。正如在紅色特殊情況中討論的，Harding 等人 2005 年指出，無論亮度如何，向或從飽和紅色過渡也被認為是風險。

飽和度有時被描述為顏色的“純度”或“強度”。雖然這些對於藝術家顏料盒中的“顏料”來說是很好的定義，但它們不如計算機螢幕上的顏色定義準確。

在顯示器上的顏色方面，飽和顏色具有特定的波長。儘管每個色彩空間的飽和度定義可能不同，但飽和度很容易測量。關鍵是知道您正在使用的色彩空間，並準備好在必要時進行轉換。

在討論光敏性時，最常考慮的色彩空間是 RGB、HSL 和 HSV（也稱為 HSB）色彩空間。HSV 色彩空間，代表色相 (hue)、飽和度 (saturation) 和值 (value)，以及同義詞 HSB，代表色相 (hue)、飽和度 (saturation) 和亮度 (brightness)，在 CSS 中表示為 hwb()，代表色相 (hue)、白度 (whiteness) 和黑度 (blackness)。

瞭解您正在使用的色彩空間很重要。例如，HSL 中飽和顏色的亮度為 0.5，而 HWB 中其值為 1。RGB 顏色空間中的飽和度通常由所討論顏色的 RGB 值為 255 或 100% 表示。例如，十六進位制值為 #ff0000 的飽和紅色具有 rgb(255 0 0) 的 RGB 值和 hsl(0 100% 50%) 的 HSL 值。另一個十六進位制值為 #ff3300 的飽和紅色具有 rgb(255 51 0) 的 RGB 值和 hsl(12 100% 50%) 的 HSL 值。兩者都是“飽和”的紅色。它們是兩種不同的“色相”，但都被認為是飽和色。

飽和度不是亮度。亮度指的是顏色中混入多少白色或黑色。可以透過新增白色、黑色或灰色來降低飽和度；進一步舉例來說，透過新增白色可以增加亮度，從而降低飽和度。一個典型的例子是向紅色中新增白色以獲得粉色。粉色被認為是一種去飽和的紅色。

飽和度與亮度

在亮度極端和黑白極端處都會發生飽和度損失。在美國宇航局的亮度對飽和度的影響一文中，他們指出在低亮度下會發生飽和度損失，並且“……在高亮度下也會發生飽和度損失——顏色會趨於白色。”

顏色組合

就可訪問性而言，僅靠對比度是不夠的。在動畫中，某些顏色組合比其他顏色組合更容易引起光敏性癲癇患者的癲癇發作。例如，紅藍交替閃爍比綠藍交替閃爍問題更大。有人推測，這是因為我們眼睛中對“紅色”敏感的視錐細胞傾向於聚集在中央凹周圍（靠近中心），而對“藍色”敏感的視錐細胞則位於中央凹之外，朝向邊緣。當資訊在大腦中處理時，眼睛到大腦的電訊號之間有許多需要解決的問題。

有些顏色更有可能導致癲癇發作。某些顏色組合比其他顏色組合更能調節大腦動力學下的複雜性。例如，紅藍色閃爍刺激比紅綠色或藍綠色刺激引起更大的皮層興奮。

某些顏色組合在電腦顯示器或移動裝置上可能會非常麻煩，而有些顏色組合可能會干擾某些障礙。紅/藍組合就是其中一個例子。

切勿僅依賴色相來區分細節。需要足夠的亮度對比度。
顯示器中的綠色構成了絕大部分亮度（光線），因此它通常是淺色中很重要的一部分。

使用藍色

有些人無法區分所有顏色。有些顏色，例如純藍色，亮度較低。亮度較低的顏色應該是對比色中較暗的顏色。藍色解析度也很低。藍色錐體細胞少得多，它們分散在我們的周邊視覺中，並且不存在於我們的中央視覺中。人眼對藍色的解析度低於綠色和紅色。

這導致了一些藍色使用指南

純藍色通常應是兩種顏色中較深的一種。
當使用藍色作為兩種顏色中較淺的一種時，新增綠色以增加對比度並提高可讀性。

藍光的特性使其在視網膜上的焦點位置與紅光不同，因此純紅色和純藍色如果緊密相鄰並接觸，可能會在彼此旁邊“閃爍”。

紅色的特殊情況

並非所有顏色（“色相”）都被我們的大腦以類似的方式處理。一般來說，人類的生理和心理受紅色影響的方式不同於其他顏色。我們對顏色產生生理和心理反應。例如，已證明有些顏色比其他顏色更容易引起癲癇發作。某些裝置提供“灰度設定作為可訪問性選項”，這可以幫助對光敏感的人。要模擬灰度設定，請使用 CSS filter 屬性，並結合 grayscale() 或 saturate() <filter-function>。

飽和紅

“飽和紅”是一個特殊且危險的情況，對此有專門的測試。

僅僅透過數字和術語很難理解顏色飽和度這個概念，所以請看下圖來闡釋顏色的飽和度概念。

Red Saturation from Wikimedia Commons svg saved as png Attribution: Datumizer [CC0]

相同的“顏色”從左側飽和度最低到右側飽和度最高。

不止一種“紅色”可以被認為是“飽和”的紅色。例如，顏色 #990000 在 hsl(0 100% 30%) 處是完全飽和的，但比上述顏色亮度低。類似地，顏色 #8b0000 的飽和度也為 100%。

並非所有飽和紅色都能在 RGB 光譜或網路開發中常用的其他光譜中很好地表示。根據維基百科關於“紅色色調”的頁面，顏色“胭脂紅”是一種飽和紅色，其顏料形式主要包含波長大於 600nm 的紅光；文章特別指出，“胭脂紅”接近極端光譜。這使得它遠遠超出標準色域（RGB 和 CMYK），其給出的 RGB 值只是一個糟糕的近似值。”