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 颜色空间中的颜色测量仍然占主导地位,包括在视频制作中。

诸如 OpenGLDirect3D 等技术支持 sRGB 伽马曲线,尽管一些 OpenGL 参考文章使用的是 RGBA 而非 sRGB。WebGL 通常采用 RGBA 格式;请参阅“用颜色清除”中如何使用的示例。

CSS 颜色值

重要的是要知道,即使在同一个颜色空间内,例如RGB颜色空间,也存在变体。例如,RGB 颜色空间的变体包括 RGBsRGBAdobe RGBAdobe Wide Gamut RGBRGBA 等。

这些是用于定义颜色的 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 = 25500 = 0d5 = 200。“#”符号在颜色前面表示该值是十六进制。

如果所有值都是相同的数字对,则该值可以用单个数字表示,浏览器会将其复制。因此 f00ff0000 相同。如果存在第四组数字,则该值是 RGBA 中的 A,即 alpha 通道,它根据颜色的不透明度值定义透明度。值越高,颜色越不透明,因此越不透明。在上面的示例中,alpha 值分别为 fff1100%,表示完全不透明。

该示例还展示了 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-weightnormal18pt(约 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 值为 255100% 表示。例如,十六进制值为 #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]

相同的“颜色”从左侧饱和度最低到右侧饱和度最高。

不止一种“红色”可以被认为是“饱和”的红色。例如,颜色 #990000hsl(0 100% 30%) 处是完全饱和的,但比上述颜色亮度低。类似地,颜色 #8b0000 的饱和度也为 100%。

并非所有饱和红色都能在 RGB 光谱或网络开发中常用的其他光谱中很好地表示。根据维基百科关于“红色色调”的页面,颜色“胭脂红”是一种饱和红色,其颜料形式主要包含波长大于 600nm 的红光;文章特别指出,“胭脂红”接近极端光谱。这使得它远远超出标准色域(RGB 和 CMYK),其给出的 RGB 值只是一个糟糕的近似值。”

饱和红色闪烁

除了红色环境影响脑外伤患者的认知功能外,红色光谱波长中的颜色需要特别关注和测试。

格雷格·范德海登在测试光敏性癫痫分析工具时,注意到癫痫发作率远高于预期。他们发现我们对饱和红色闪烁更加敏感。(请参阅视频《光敏性癫痫分析工具》。)

闪烁与癫痫发作

持续闪烁亮度/暗度超过每秒三次,已被证明会在某些人身上诱发光敏性癫痫发作。还发现特定的、非常规则的、高对比度模式,例如平行黑白条纹,也可能诱发癫痫发作。

Harding 等人 (2005) 提出了几项基本准则

  1. 一秒钟内一次、两次或三次闪烁是可以接受的,但不建议在一秒钟内发生三次以上闪烁的序列。
  2. 当显示明暗条纹时,如果条纹改变方向、摆动、闪烁或对比度反转,模式不应显示超过五对明暗条纹;如果模式不变或持续平稳地向一个方向漂移,则不应显示超过八对明暗条纹。

有关更多建议,请参阅论文《光诱发和模式诱发癫痫发作:美国癫痫基金会工作组的专家共识》。

颜色的心理物理学方面

颜色,包括色相和饱和度,会影响我们的情绪,并增强或削弱我们的互动体验。

颜色对视觉以外的影响示例

另见