網頁無障礙：理解顏色和亮度

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

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

概述

顏色的選擇及其使用是無障礙的重要組成部分。表面上，這個主題似乎很簡單。然而，它是一個複雜的主題，因為顏色感知與眼睛的生理機能和人腦的處理過程一樣重要，也與計算機螢幕發出的光一樣重要。

環境和感知

環境很重要。在光線充足的房間中感知顏色與在黑暗房間中在同一臺計算機螢幕上感知相同顏色會有所不同。關於無障礙，使用某些顏色組合的影響大於其他組合。字型大小、字型樣式（某些字型非常細或花哨，本身就存在無障礙問題）、背景顏色、文本週圍背景空間的大小，甚至畫素密度等等都會影響顏色從螢幕上的傳遞方式。

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

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

亮度和感知

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

必須先確定亮度，然後才能確定對比度。在談論顏色對比度時，W3C 公式包含亮度，而不僅僅是顏色本身（“色調”）。

術語可能令人困惑，因為不同的術語通常描述相同的事物。“亮度”和“飽和度”尤其需要注意。例如，“飽和度”在某些情況下被稱為“色度”。在其他情況下，“色度”和“飽和度”是兩個不同的概念。HSL 色彩空間中的“L”有時被稱為“亮度”，有時被稱為“明度”。甚至看似簡單的事情，比如命名常見顏色，也可能存在爭議。例如，顏色“猩紅色”可能被一些人用十六進位制值#990000表示，而另一些人則用#DC143C表示。對於本文件，我們將使用 W3C 中定義的術語，在CSS 顏色模組級別 4中。

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

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

目前，RGB 色彩空間是網頁開發者主要使用的色彩空間。雖然 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 */
oklch(0.7 0.32 328.37);
oklch(0.7 0.32 328.37 / 1);

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

第一個示例使用一個定義的命名顏色。

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

接下來是十六進位制顏色值。十六進位制是一種以 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 通道，則在 alpha 通道之前加斜槓。現代語法允許混合數字和百分比，並支援 none 關鍵字；逗號分隔的傳統語法不支援。

以下示例顯示了“HSL”，代表色相、飽和度和亮度。許多人認為 HSL 顏色值比 RGB 顏色值更直觀。從設定生成的顏色仍然在 sRGB 色彩空間中，但 hsl() 對於許多人來說是一種直觀的語法。色相以角度調整，並且可以使用旋鈕或圓形控制元件輕鬆建立使用者介面以調整色相。請注意，HSL 顏色包含亮度，而不是亮度，這是一個重要的考慮因素。

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

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

轉換

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

RGB 面向硬體，反映了 CRT 的使用。許多開發人員和設計師更喜歡 hsl() 表示法的直觀性。從 RGB 轉換為 HSL 不是一個簡單的方程式。幸運的是，瀏覽器會自動執行此操作，並且在瀏覽器開發者工具中單擊顏色會提供轉換功能。

除了開發者工具之外，許多工具還可以為您將 RGB 轉換為 HSL，並提供 RGB 十六進位制和 CSS 函式語法。一個將顏色轉換為您的工具的絕佳示例是 Tom Jewett 的“迷你顏色選擇器”，它具有 HSL、RGB 和 Hex 選項，用於在瀏覽器中檢查對比度。請注意，開發者工具顏色拾取器和此工具都提供了 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: #ff0000 的 <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 時，閱讀速度會降低。此外，當頁面上最小和最大字型大小之間存在較大差異時，如果使用者放大頁面上的較小文字，則較大文字的可讀性會降低，因為大多數瀏覽器會隨著使用者縮放而縮放所有文字。

一般來說，出於可訪問性的目的，對比度越高越好。但這會隨著動畫而改變。“更安全的”動畫意味著對比度較低的影像，而不是更高的影像。有關動畫中顏色對比度的更多資訊，請參閱三個或以下閃爍或低於閾值理解 SC 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.

左邊是標準視力的中央視錐細胞鑲嵌圖，右邊是患有原色盲（一種色覺缺陷形式）的人的中央視錐細胞鑲嵌圖，他們缺少紅色視錐細胞。（羅切斯特理工學院馬克·費爾柴爾德的插圖，維基百科共享資源）

紅色和綠色視錐細胞結合在一起產生亮度，我們可以將其視為不考慮色調的明暗。單獨地，紅色、綠色和藍色視錐細胞使標準視力能夠感知數百萬種顏色。為了實現可訪問性，重要的是要知道我們的大腦將亮度與顏色（色調和色彩）分開處理。

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

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

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

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

此影像中的黃色圓點在您的顯示器上顏色相同，但由於上下文而顯得不同。（影像來源：D.Lyon）

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

總而言之，顏色與人類生理學和大腦感知一樣重要，也與測量電腦螢幕發出的光一樣重要。同樣重要的是要了解環境光環境會影響感知顏色和對比度的能力。光及其測量是線性的，但人類視覺和感知並非如此。

適應

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

區域性適應發生在讀者正在檢視的“頁面”上。例如，如果您在灰色“突出顯示”區域內有藍色文字，那麼如果它位於黑色<div>或白色中，您的眼睛會以不同的方式感知該確切的藍色文字及其灰色高亮顯示。這稱為區域性適應。即使房間的環境光線沒有改變，感知文字的能力也會受到這種差異的影響。

這意味著尋求提高文字在背景中易讀性的網頁開發人員可以利用區域性適應的原理。

對低亮度的暗適應速度很慢。當您從陽光明媚的戶外進入昏暗的房間時，您正在經歷暗適應。可能需要幾分鐘才能適應這種情況。

光適應是相反的。從昏暗的房間走到強烈的陽光下會更快，但也可能造成傷害。

這意味著尋求提高文字易讀性的網頁開發人員，在房間的環境條件發生變化時，可以利用AmbientLightSensor介面和prefers-contrast媒體查詢。

飽和度

在關於顏色（“色調”）和可訪問性的討論中，飽和度值得特別提及。一般來說，在試圖確保文字與其背景之間有足夠的對比度或評估誘發對光敏感性癲癇發作的人群發生癲癇發作的可能性時，大多數人都會關注亮度。與亮度無關的顏色（“色調”）的一個方面值得特別注意，因為它適用於可訪問性：飽和度的概念。這是由於它能夠引起易受光敏感性癲癇發作影響的人群發生癲癇發作，無論顏色的亮度如何。正如在紅色特殊情況中所討論的那樣，癲癇基金會指出，無論亮度如何，向飽和紅色過渡或從飽和紅色過渡也被認為是一種風險。

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

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

在討論光敏性時，最常考慮的顏色空間是 RGB、HSL 和 HSV（也稱為 HSB）顏色空間。HSV 顏色空間代表色調、飽和度和值，同義詞 HSB 代表色調、飽和度和亮度，在 CSS 中表示為hwb()，代表色調、白色和黑色。

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

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

飽和度和亮度

在亮度的極值以及黑色和白色的極值處，飽和度會降低。在 NASA 的亮度對飽和度的影響中，他們指出在低亮度下飽和度會降低，並且，“……在高亮度下飽和度會降低——顏色會收斂到白色”。

顏色組合

在可訪問性方面，僅靠對比度是不夠的。在動畫的情況下，某些顏色組合比其他顏色組合更容易導致易感人群發生光敏性癲癇發作。例如，紅色和藍色之間的交替閃爍比綠色和藍色之間的交替閃爍更成問題。據推測，這是因為我們眼睛的“紅色”敏感視錐細胞（往往聚集在中央凹附近）的物理位置與我們眼睛的“藍色”敏感視錐細胞（位於中央凹之外並朝向邊緣）的物理位置不同。從眼睛到大腦的電訊號在處理過程中需要解決很多問題。

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

某些顏色組合在電腦顯示器或移動裝置上可能非常成問題，並且某些顏色組合會干擾某些損傷。紅色/藍色的組合就是一個例子。

切勿僅依賴色調來區分細節。需要足夠的亮度對比度。
顯示器中的綠色佔亮度（光）的大部分，因此它通常會成為較淺顏色的重要組成部分。

使用藍色

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

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

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

藍光的天性導致它在視網膜上的焦點位置與紅色不同，因此緊密相鄰且相互接觸的純紅色和純藍色在彼此旁邊時可能會“閃爍”。

紅色的特殊情況

並非所有顏色（“色相”）都以相同的方式被我們的大腦處理。一般來說，人類生理和心理受到紅色的影響，其方式不同於其他顏色。我們對顏色會產生生理和心理上的反應。例如，已經證明某些顏色比其他顏色更容易導致癲癇發作。一些裝置提供“灰度”設定作為輔助功能選項，這可以幫助對光敏感的人。要模擬灰度設定，請使用 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 值只是一個較差的近似值。