时至今日，Web页面或Web应用上色彩都是很丰富的。一般情况之下，开发者给Web上色大多是根据视觉设计师提供的设计稿来定义。颜色除了能决定Web在视觉上的美观之外，还能直接影响Web可访问性。因为访问或使用你产品的用户可能会在较亮的环境下（比如阳光下），或设备陈旧上（比如低分辨率显式器），颜色可以直接决定用户能否较好的访问。除此之外，可能有一些视觉障碍的用户（比如视弱，色盲）使用你的产品，这群用户群体同样会受颜色影响。

事实上，不管是视觉设计师或者Web开发者，在颜色使用上都存有一定的误区。简单地说，Web上前景色（color）和背景色（background-color）两颜色对比度没有达到一定的程度，造成可访问性较差。而且这种现象在众多Web应用上都有，WebAIM的报告就能很好的说明这一现象：

颜色对比是Web可访问性（A11Y）的一个重要方面。良好的对比度使用有视觉障碍的人更容易使用产品，并有助于在不完美的条件下较好的使用产品。

考虑到这一点，不管是Web开发者还是视觉设计师都有必要掌握这方面的知识，只有这样才能构建出体验更好的Web。

用户体验和Web可访问性

我们就从大家常说的用户体验（UX）和Web可访问性（A11Y）开始吧。我知道这两者的定义都很复杂，而且专家们对这两者都有过相应的定义。这里我想说说我自己对这两者的理解。

用户体验是一个人对产品或服务的体验。根据你想要达到的目标，这种体验可以是好的也可以是坏的。通常情况下，设计师总是希望自己能提供一种令人难忘的体验，以一种好的方式让用户更易于理解、使用和喜爱你的产品或界面。要让产品界面可用，就需要了解特定的人群，这样才能帮助他们高效、有效、满意地完成精确的任务。

Web可访问性是让尽可能多的人使用Web网站或Web应用。我们通常认为它只适用于残疾人士（早期定义就是无障碍设计），但是在某些特定的情况或环境中对其他群体的人也有益。

当用户体验趋向于满足一个精确的人群时，Web可访问性趋向于在一个公共的良体验中包含尽可能多的人，但是两者并不相互排斥。

用户体验和Web可访问性都是较大的两个领域，各自领域都有着自己专业方面的知识和技能。但它们的目的都是为了给用户提供最好的产品。虽然两个领域有差异，但它们也有一些共同点，是相辅相成的。比如我们本文要说的颜色对比度就是一个很好的例子。

但不管是设计师还是Web开发者在使用颜色时都被一些“神话”给误导，却不能很好地理解在什么情况下使用颜色对比标准。不仅如此，他们还认为，当使用颜色对比来传达信息时，界面是不可访问的。

接下来的内容，可以帮助设计师和Web开发者打破这种神话，能更好的帮助大家理解颜色对比度和如何使用。

色彩理论和对比度

颜色的定义是个复杂的系统，平时我们描述一种颜色时总是喜欢和另一种颜色结合起来描述，比如同样是描述红色，你可能会说这种红色是砖红色还是消防车红色。这也是表达颜色的自然方式，但要准确定义某种颜色是什么，这几乎不太可能。从本质上讲，颜色是一种相对的个人体验。

每种颜色都有一个独特的波长。我们的眼睛接收和处理这些波长并将它们转换成颜色。

这是个复杂的体系，我也整不明白，就不误人子弟了。咱们就了解一点基础的理论知识，有助于后面更好的理解。

虽然颜色是相对的，但在组织颜色方面已经有了大量的研究和实战。在《图解CSS: CSS 颜色》和《JavaScript中的颜色转换》中也提到一些色彩空间和色彩模式。特别是@jlfwong的《Color: From Hexcodes to Eyeballs》一文，对这方面做了详细的阐述。这里我们主要来了解一下颜色感知方面。

我们平时所说的颜色，也被称为色调（也有人称为色相）。每一种颜色都对应色谱上的一个点：

如果你接触过HSL颜色模式的话，它指的就是色盘轮上的每个角度：

要使用颜色，需要了解以下不同的属性。

值（Value）：从黑色到白色的范围。

如果色调被认为是一个维度围绕着的一个轮子，那么值就是一个通过轮子中间的线性轴：

对比度（Contrast）：值之间的分离程度：

亮度（Brightness）：指颜色的亮度，不同的颜色具有不同的明度，比如图像缺乏亮度会使图像色调变淡：

明度（Lightness）：在色彩理论中也称为值或色调，是对颜色或色彩空间亮度知变化的一种表示：

饱和度（Saturation）：根据一个区域的亮度比例来判断该区域的色彩，它实际上是来自该区域的光线的白色度的感知自由。缺少饱和度的颜色变得更灰。

色度（Chroma）：指的是“一个区域的色度，根据亮度与白色或高透射率区域的亮度之比来判断”。因此，色度大多只取决于光谱性质，并以此来描述物体的颜色。

上面几个属性对颜色有着直接影响。

另外颜色和颜色混合在一起会生成新的一种颜色：

目前颜色的混合主要有两种方式：加色法和减色法。

减色法是青色（cyan）、品红（magenta）和黄色（yellow）混合在一起，就得到一种近似黑色的颜色。这是因为这种方法使用反射色。这些颜色是使用一种特理物质，就像油漆中的颜料，可以将波长反射到眼睛里。去掉这些颜色或它们的缺失，就只剩下白色（或画布上的任何颜色）。

加色法是红色（red）、绿色（green）和蓝色（blue）三种基色的叠加。当这些颜色以不同的组合方式组合在一起时，就会产生其他颜色。这三种颜色组合在一起就会产生白光。简而言之，这就是如何在你的智能设备或电脑显示器上实现颜色。

我们这里重点关注的是颜色对比度，即Contrast。

什么是颜色对比度

对比度最简单的描述就是两种颜色在亮度（Brightness）上的差别。理解对比度的一个好方法是比较色调相同的颜色。他们越接近，他们之间的对比度越低：

除了在灰色调做对比之外，还可以在不同色调的颜色之间做对比：

简单地说，对比度解释了在给定范围内最亮颜色亮度和最暗颜色亮度之间差异。它是每种颜色的相对亮度（Relative Luminance），是标准化的值，从最黑的0值到最亮的1值。

要想更好的理解颜色对比度是需要使用一些数学知识。庆幸的是，W3C规范已经为社区提供了帮助分析同时使用的两种颜色的公式。规则中提供的将RGB值转换为相对亮度的公式如下所示：

简单地解释一下。

对于sRGB颜色空间，颜色的相对亮度（Luma）的计算公式：

Luma = 0.2126 * R + 0.7152 * G + 0.0722 * B

其中R、G和B通道值的校正细节：

最终得到sRGB颜色空间中的R、G和B的值：

有了一种确定颜色相对亮度的方法，就可以用所谓的颜色对比度来比较它们：

我们来看一个简单的示例：

比如上图中的按钮，背景色颜色值是#ff4400，文本颜色值是#ffffff。如果要计算出这两种颜色的相对亮度，首先要得到颜色的RGB表示法。取出对应颜色的R、G和B颜色通道的值：

#ff4400  ❯❯❯ rgb(255 68 0)    ❯❯❯ R = 255, G = 68, B = 0
#ffffff  ❯❯❯ rgb(255 255 255) ❯❯❯ R = 255, G = 255, B = 255

有关于颜色转换的具体方法可以阅读《JavaScript中的颜色转换》一文。也可以直接使用拾色器直接取出颜色RGB的值。

接下来将R、G和B各通道的值除以255，就可以得到对应的线性值：

#ff4400  ❯❯❯ rgb(255 68 0)
|  
| ❯ R = 255 ❯❯❯ 255 / 255 = 1 
| ❯ G = 68  ❯❯❯ 68  / 255 = 0.26666667
| ❯ B = 0   ❯❯❯ 0   / 255 = 0

#ffffff  ❯❯❯ rgb(255 255 255)
|  
| ❯ R = 255 ❯❯❯ 255 / 255 = 1 
| ❯ G = 255 ❯❯❯ 255 / 255 = 1
| ❯ B = 255 ❯❯❯ 255 / 255 = 1

然后，需要对RGB颜色各通道的值进行校正，一般采用伽玛校正（它定义了像素的数值和它的实际亮度之间的关系）。

伽玛校正的作用简单地说，它将计算机“看到”的东西转化为人类对亮度的感知。计算机直接记录光，其中两倍的光子等于两倍的亮度。人的眼睛在昏暗的条件下会感知到更多的光线，而在明亮的条件下则会感知到更少的光线。我们周围的数字设备一直在进行伽玛编码和解码计算。它被用来在屏幕上向我们展示与我们对事物在我们眼中的感觉相匹配的东西。

不了解伽玛校正也不用担心，我们可以直接按照下面的公式来对R、G和B值进行校正：

先来看#ff4400颜色：

R = 1 ❯❯❯ R > 0.03928 ❯❯❯ ((R + 0.055) / 1.055)^2.4 = ((1 + 0.055) / 1.055) ** 2.4 = 1
G = 0.26666667 / 12.92 ❯❯❯ G > 0.03928 ❯❯❯ ((R + 0.055) / 1.055)^2.4 = ((0.26666667 + 0.055) / 1.055)^2.4 = 0.05780543
B = 0 ❯❯❯ B <= 0.03928 ❯❯❯ B / 12.92 = 0 / 12.92 = 0

#ffffff颜色的R、G和B正好都相等，值为1