很久很久以前，在一个很远很远的地方......
我所说的 "很久以前 "是指大约1924年，而我所说的 "很远 "是指英国伦敦，科学家W.D.Wright和J.Guild进行了色彩匹配实验，测量人类色彩视觉的界限。他们的工作被国际照明委员会（CIE）纳入了1931年的CIE*"标准观测器"，*一种 "数学眼球"，模拟我们如何看待颜色。就这样，现代测色学诞生了。
色度学是使彩色电视成为可能的基础科学，当然还有我们的现代显示器和智能手机--我们所有的现代电子色彩技术都可以追溯到1931年的CIE色彩空间。
这个色彩斑斓的肾形图形代表了人类色彩视觉的极限--里面较小的三角形标志着可以在标准sRGB显示器上显示的颜色，较大的三角形代表P3显示器。
三角形的每个角都是光的三种*"原色 "*之一：红、绿、蓝。三角形内的区域表示这三种颜色以不同的组合加在一起后的效果，因此称为 "加色模型"。
不过，使用 "原色 "这个术语有点名不副实，因为现实世界中没有一组可以混合生成所有其他颜色的三种真实颜色。只有一个颜色的子集，正如这些三角形所定义的那样。
是在看者的眼里还是在心里？
人类视觉的简单概述
光线由眼睛的晶状体聚焦到眼睛后面的感光细胞上，即视网膜。我们最感兴趣的细胞被称为锥体，它负责我们的日光和色彩视觉。另一种细胞叫杆状细胞，给我们带来夜视能力，但杆状细胞对阅读等任务没有特别的帮助，而且杆状细胞在日光条件下基本上是关闭的。
标准或 "正常 "视觉使用三种锥体类型。它们有时被称为 "红"、"绿 "和 "蓝 "锥体，但这个故事还有很多内容。
颜色是不真实的
颜色不是真的吗？对于一篇关于颜色和对比度的文章来说，这是一个挑衅性的声明。但现实是，"颜色 "和 "对比度 "在绝对意义上并不严格真实。"有色 "的光只是不同波长或频率的光，就像钢琴上的不同音符。事实上，我们眼睛里的锥体细胞的科学名称是L、M和S锥体，它们代表了 长, 中和 短它们分别代表了它们最敏感的光的波长。
L锥体实际上有一个接近黄色/绿色的灵敏度峰值。但是它的反应曲线延伸到了深红色，这就与M锥体有了区别，使人类能够将 "红色 "感知为一种独特的色调。正如你从图中看到的，锥体的反应都有很大的重叠。
L锥体被认为是 "红色锥体 "的一个原因是，显示器或电视的原生红光旨在尽可能多地刺激L锥体，而不刺激M锥体。因此，显示器中使用的颜色不是在L锥体的峰值反应，而是在一个更长的波长，以减少对M锥体的 "串扰"。
然而，这并不是色彩感觉真正发生的地方--那个兔子洞只是更深一点。
视觉皮层的第一阶段位于大脑后部，首先观察明暗对比，发现边缘和精细的细节。后期阶段分别处理颜色信息，即色调和色度（色度是指 "色彩丰富"，与 "饱和度 "有关）。我们的大脑有20%以上是专门用于视觉处理的，总共有62%的大脑涉及视觉，通常与其他感官如触摸或听觉共享。
一些视觉信息可能被 "引导 "到视觉字形区（VWFA），在那里字母对和整个单词被识别并被送到语言中心。其他信息可能被发送到大脑中专门用于运动检测或物体识别的区域。被 "引导 "到VWFA的信息基本上只有亮度，也就是没有颜色，而物体识别区则更多地依靠颜色来辨别。
知觉的虚幻现实
从以上对我们视觉机制的讨论中可能看不出来的是，颜色只是一种感知，而作为感知，它们在很大程度上受到背景的影响。换句话说，周围视觉材料的性质对我们感知的颜色和对比度以及我们的感知方式有很大影响。
在这个图形中，两个黄点从你的显示器上发出的 "颜色 "完全相同，但它们看起来却截然不同。虽然这样的图像通常被称为视错觉，但像这样的图像实际上是神经系统的错觉--它们是你大脑的臆想，无论我们多么想相信它是现实。
监视器向我们展示的只是幻觉。在你的电脑显示屏上，你感知到的 "黄色 "只是独立的红色和绿色，红色和绿色的数量创造了黄色的感知。红色和绿色并不像油漆那样在空气中混合--红色和绿色在视觉系统的神经系统中 "混合 "了。
向你抛出一个曲线（眼睛）球
再补充一点，我们的感知是你所说的非线性的，而现实世界中的光是 "线性的"，我的意思是如果你有100个光子，再加上三倍的光子，那么你就有300个光子。但我们的视觉并不把这种变化看作是 "三倍"--我们只把它看作是一种适度的增加。这对于理解对比度的感知特别重要。
为了提供帮助，当我们谈论光或亮度时，我们谈论的是线性、相加的数量。但是，当我们谈论亮度/黑暗/明亮时，我们谈论的是一种定性的和依赖环境的感知。史蒂文斯等人发现，我们可以用功率曲线对我们的感知进行有用的建模。
你能看到我所看到的吗？
答案是可能，但也可能不是。首先，你自己的视觉感知会随着年龄的增长而变化。在生命的头20年里，对比度的敏感度会发展到一个峰值。而随着年龄的增长，你衰老的眼睛会失去敏感度，特别是在蓝色方面，因为眼睛的光学系统变得更黄。
对比度、焦点和其他视觉问题
视觉敏锐度（VA）与我们的眼睛对所见事物的专注程度有关，这对于阅读显然相当重要。字母的小而薄的性质使阅读成为大多数人最需要的视觉任务。我们使用视力表来测量视力，正常视力被定义为20/20（美国）或6/6（欧盟）。
20/20意味着*"有视力的人站在20英尺外能看到的大小**标准20/20指的是 "有视力的人站在20英尺外能看到的大小"*，6/6也是如此，但指的是6米而不是20英尺。
在这两种情况下，它指的是投射到眼睛视网膜上的眼图20/20（或6/6）线的大写E的尺寸。视觉科学将20/20E的 "视网膜图像 "的大小测量为5角分的视觉角度。
20/20（或6/6）并不是完美的视觉--但它被称为 "标准 "视觉。人类的 "完美视力 "更接近于20/12到20/16，而20/09是这里的世界纪录。相比之下，老鹰的视力大约是20/04。
对比敏感度（CS）是衡量我们视觉系统健康和福祉的另一个非常重要的指标，也是最常被误解的一个方面。事实上，我们对对比度敏感度的理解真正发展起来只是在过去几十年的视觉研究中，而且与我们的对比度感知有关的研究仍在积极进行。
色觉不足（CVD） 世界上大约有5%的人对某些颜色不敏感，这种情况被不准确地称为 "色盲"。在最常见的情况下，其中一种锥体类型不是不能正常工作就是完全缺失。Deutan型的M/Green锥体有问题或缺失，而protan型的L/Red锥体缺失或有问题。还有一些非常罕见的类型，如特里坦型，有S/蓝色锥体的问题，甚至还有非彩色（消色）的视觉形式，缺少两个或所有三个锥体。
非色觉类型极为罕见，是唯一可以被描述为真正 "色盲 "的类型。他们通常面临其他视力问题，包括视力低下（聚焦力差）和严重的畏光症，即比黄昏更亮的光线超过了杆状细胞，而杆状细胞在标准视力中只用于夜视。这些实际上是色盲的用户通常即使在室内也要戴深色眼镜，并使用辅助技术进行阅读。
颜色不敏感和可读性：虽然CVD损害了区分某些颜色的能力，但对于常见的CVD类型，亮度感知与标准视力相同。因此，就可读性而言，deutan、protan、tritan类型对亮度对比的需求与标准视觉相同。唯一的例外是当红色和黑色配对时，因为那些有protan形式的CVD的人对红色不敏感。因此，红色对黑色的对比度对原生型的人来说大大降低了，对于文本或语义不明确的文本，应避免使用红色/黑色作为一对。
在这个基本层面上理解视觉有助于理解颜色和对比度的重要设计选择。作者主持了一个颜色视觉模拟器，模拟了其中一些类型的颜色不敏感的视觉，以便进一步演示。
揭示反差的意义
对比的形式有很多，例如大小、形状或位置的对比，内容、主题或情感的对比。但在本文的大部分内容中，我们将重点讨论*"感知的亮度对比"。这与亮度对比密切相关，因为亮度是对光的测量，我们将其感知为亮度/黑暗/明亮*。换句话说，亮度是现实世界中的一个物理量，但亮度是我们人类对它的感知，而我们的感知又受到背景的影响。
像亮度和颜色一样，对比度也是人类的感知，所以有时把它看作是*"亮度对比 "更正确。重要的是，我们考虑颜色*的对比意味着色调和饱和度，与亮度分开。
在我们的设计工作中，明度/暗度和色调/色彩的作用是不同的。此外，亮度和颜色在我们的大脑中是分开处理的，对于我们如何感知周围的世界的认知来说，它们的使用是不同的。
阅读和可读性主要关注亮度/暗度的差异--字体的精细细节需要充足的亮度对比来被大脑的视觉字形区（VWFA）"解码 "为整个单词或字母对。另一方面，颜色的对比对物体的识别和分类等方面很重要。
空间案例
对比度感知的一个方面可能并不直观，那就是对比度更多的是由*"空间频率 "驱动，而不是由两种颜色之间的差异或比例驱动。对于设计师来说，空间频率与字体重量和字体大小或线条粗细有关。较高的空间频率意味着较小、较细的*字体或线条，它们之间的距离较近。较低的空间频率与较大的元素有关，它们之间的距离较大。
这张图显示了人类的对比敏感度曲线。当曲线向右移动时，我们正在定义更小、更薄的项目。曲线周围显示的每个样本字体都使用完全相同的灰色。但是，正如你所看到的，大而粗的标题的感知对比度和可读性要比正文的小样本高得多。
让事情变得更复杂的是，考虑抗锯齿或字体平滑技术的影响。当一个字体被光栅化到屏幕上时，少量的模糊会被加入以减少锯齿状的外观。下面是将文字栅格化到标准sRGB显示器上的放大屏幕截图。请注意，由于典型的抗锯齿效果，18px或更小的正常重量字体会被背景淹没。
这也是你，设计师，如何预览图形或网页的问题。两倍或三倍于标准分辨率的视网膜屏幕可以呈现出更清晰的文字，并减少混杂。有些系统或设备设置了一种叫做sub-pixel的抗锯齿，它可以更清晰，但如果设计使用-webkit-font-smoothing:antialiased; ，就会覆盖显示器的默认抗锯齿，用一种软的混合来代替它，进一步破坏对比度和清晰度。苹果公司推出了-webkit-font-smoothing ，以配合视网膜显示器，但它对标准分辨率的显示器和小字体造成了严重的破坏。任何对-webkit-font-smoothing 的使用都应该在分辨率媒体查询的后面，并谨慎实施。
为了补偿这些因素，小而薄的正文需要一个 很多更大的明暗差异。另外，与正文的柱子有关，文字的密度会导致进一步的对比度降低。对于大多数正文来说，接近最大的对比度是好的。其他瘦字体的例子也有字体平滑的问题。例如，一些重量为100的字体非常薄，需要大于42px甚至更大，才能安全地采用字体平滑技术。
这也意味着你的设计需要经过测试，并在以下设备上查看 标准分辨率显示器.在漂亮的P3视网膜显示器上做出的设计决定，在标准分辨率的sRGB设备上观看时，可能会出现意想不到的设计问题，包括可读性差。
预测对比度
对于设计指导，我们需要一种方法来预测对比度。一些年来，WCAG 2的对比度方法被使用。不幸的是，WCAG 2的对比度数学并没有按照人类的感觉来预测文字的对比度，这一点在深色的颜色对中特别明显。其结果是，WCAG 2对比度对深色模式不太有用，更不用说饱和色上的浅色文字和其他一些异常情况。
作者的新方法是未来WCAG 3指南的候选对比度方法。这个新方法直接考虑了文字在背景下的感知性明暗差异，并产生了一个 "明度对比 "值，记为Lc。从这里，我们可以确定能够流畅阅读的字体的最小尺寸和重量，而这些计算出来的预测值可以指导我们的设计选择。
可读性对比
这就把我们引向了 "可读性对比 "的概念--一个特定的用例所需要的对比和所需要的可读性水平。S.Whittaker和J.Lovie-Kitchin的开创性的可读性研究给我们带来了 "临界对比 "和 "临界尺寸 "的概念。
所谓临界，我们指的是增加尺寸或对比度不会进一步提高阅读速度和理解力的那一点。他们的研究还引入了*"对比度储备 "*的概念，并定义了亚流利水平的对比度需求，即文本仍然可以阅读，但不是最高速度或理解力。最后这一部分很重要，因为在设计层次中，不是所有的东西都可以达到最大的对比度。
例如，一列正文需要最高的对比度以确保最佳的流畅可读性。但是在另一端，非内容性的文字，例如图片边上的版权错误，不需要接近那种高对比度的水平。事实上，为了保持设计的简洁，并使人们的注意力集中在实际的内容上，像版权窃听器这样的东西可以说应该有更低的对比度--高到可以在集中注意力的情况下阅读，但低到不会分散注意力或把注意力从主要主题上移开。
题外话：不是尺寸......是x-size
CSS属性font-size:很容易使用......而且不准确。通过指定字体的主体高度来设置字体大小，会产生明显不同的结果，这取决于字体家族。因此，重要的是要确定设计中使用的字体的x-高度，然后根据需要设置字体大小的偏移量，以达到理想的渲染尺寸。
对比度的冲突
人类经验的光谱是广泛而多样的。这种多样性的现实是，对一个人最好的东西，可能会给另一个人带来问题。这对于视觉可及性来说尤其如此。对一个用户来说，理想的文字大小对另一个用户来说可能太大或者太小。一个用户喜欢的信息颜色编码可能会让另一个用户觉得同样的信息很模糊。
我们的视觉感知和认知可能会受到损害，而这些损害对于有损害的人来说甚至都不明显。我们的大脑会适应或试图适应我们当前的情况。例如，视觉皮层有一个 "锐化过滤器 "来提高感知的敏锐度，所以一个有敏锐度问题的用户，如果习惯于不加矫正的视力，可能不会意识到他们可以从眼镜中受益。
而且，潜在的视觉障碍并不停留在眼睛的晶状体和基本的焦点上，这就是视力的定义。视觉障碍超越了视网膜和视神经，延伸到我们大脑的神经系统和认知过程。而个人用户的需求与我们受损的多种方式一样多种多样。
这所指出的是用户对视觉偏好的选择的重要性，这也是一个新兴技术的领域。内容创建者有责任提供一个无障碍设计的基线，并确保用户不被阻止做出他们需要的调整，例如通过放大文字大小，改变为黑暗模式，或特殊的调色板。这在很大程度上是响应式设计的一个功能部分。
灵活的基础
一个清晰的视觉层次也是一个重要的可及性特征，特别是出于认知和神经系统的原因，如阅读障碍和多动症。好的设计可以引导我们的视觉通过内容，使用多种类型的对比：不仅仅是亮度对比，还有大小、重量、颜色、位置和距离的对比，这些不同的对比在内容中形成了一种语义的流动。
HTML文档的结构有支持语义标记的内置标签，而这些标签的CSS样式应该遵循其语义结构的含义。语义标记对所有有视力和无视力的用户都很重要。盲人的屏幕阅读器系统依靠语义标记来浏览内容。有视力的用户需要一个视觉语义层次，以一种逻辑的方式安排内容和视觉流程，以帮助理解和减少疲劳。
对于所有视力正常的用户来说，有一些基本的最低视觉对比度，基于元素的预期用例，并允许用户调整的变化。使用情况也会影响到视觉尺寸的最低要求，这也需要考虑预期的屏幕分辨率和字体的字形设计，因为在较小的尺寸下，这些都会受到抗锯齿的影响。
通往未来的桥梁
WCAG 2对比度指南建议，对于小于24px、400重量（正常）或18.8px、700重量（粗体）的字体，比例为4.5:1，其他对比度为3:1。虽然这个准则实施起来很简单，但这些最低限度在某些情况下可能是非常不够的，但矛盾的是，在其他一些情况下却超过了需要。这些指导原则可以追溯到20世纪80年代的标准，并将在不久的将来被取代。
一个正在开发的未来标准是WCAG 3，对比度的候选方法是APCA（可访问的感知对比度算法），目前正在作为公共测试版进行评估。完全公开地说，这位作者是作为万维网联盟无障碍指南工作组的银色（WCAG 3）工作组的视觉对比度分组的研究负责人而创建APCA的，该工作组正在开发WCAG 3作为下一代的网络内容标准。
APCA遵循人类对文字和非文字元素对比度的视觉感知，源自数十年的同行评议的视觉科学，专门针对自发光显示器上的文字可读性进行调整。涵盖文字大小和亮度对比的相关可读性指南是基于Whittaker, Bailey, Lovie-Kitchin, G. Legge等人的开创性的同行评议研究。
APCA相关的指南与较早的WCAG 2不同，APCA考虑了人类的视觉感知、使用情况和空间特征（重量和大小），并提供了一套全面有用的设计指导。WCAG 3的实际符合性规范正在制定中，所以与其大谈特谈那些可能会改变的规范，不如看看"为什么是APCA "来进一步阅读。
一个经常被问到的问题是APCA现在是否可以使用，答案是 "这取决于"。APCA是可以作为公共测试版使用的，强烈鼓励测试版用户在APCA GitHub repo提交问题和讨论。也就是说，人们需要确定他们是否有任何合同或其他法律要求来遵循旧的WCAG 2，而不考虑WCAG 2的缺陷，例如对于一些政府网站。
在这期间，有一种完全向后兼容WCAG 2的方法，被称为"Bridge-PCA"，旨在为黑暗模式提供更好的可读性和计算，但仍遵循旧的WCAG 2成功标准。虽然Bridge PCA解决了一些问题，但失去的是完整的APCA实现所提供的更大的设计灵活性。
实用指南
在这个过渡时期，我们知道现有的指南预计将被修改或取代，看到未来的道路是很有帮助的。这里有一些设计者现在可以做的事情，以提高可读性、合规性和实际的可及性，同时更好地适应未来的指导方针。
尺寸、重量和抗锯齿
为了强调这一点，我将重申，在我们讨论亮度和颜色的差异或比例之前，重量和大小对可读性对比是最重要的。在这个例子中，所有轮廓的颜色都是一样的，对比度为3：1。首先是薄薄的1px轮廓，接下来是2px轮廓，然后正如你在3px轮廓中看到的那样，笔画正在侵占字母，所以在最后一个例子中，在4px轮廓中，我们只将笔画设置在外面，这也增加了内部的字体重量。
在每一种情况下，使用的颜色都是完全相同的，但是每一行的空间频率随着它的变厚而变低，因此变得更有对比性，比上面那个更容易阅读。
让我们再试一次，但这一次，我们将使用对比度更高的颜色，即7:1。
请注意，尽管使用了7:1的颜色，这些行只比3:1的行多了一点对比度。从对比度上看，最大的变化还是让轮廓笔画变粗的空间变化。
现实情况是，我们需要花更多的时间来考虑改善重量和尺寸，并记住不是每个人都能使用超高分辨率的视网膜型显示器。低分辨率显示器上的抗锯齿有效地降低了色彩对比度，会使薄的字体看起来更薄。
题外话：权重决定
请注意，不同字体系列之间的CSS权重值（即300、400、700）并不一致。例如，"Arial Black "被表示为正常（400重量），尽管它显然是超粗的。而Courier New则表示为400重量，尽管它显然是超轻的。
此外，介于两者之间的重量，如500或600，只有在该重量被特别导入（或被支持的可变重量字体）时，才会以该重量呈现。而默认字体的回退通常不支持400（正常）和700（粗体）以外的任何字体。在这种情况下，500会呈现为400，而600会呈现为700。
因为字体重量是感知对比度的主要因素，所以在规划你的页面设计时，由于缺少字体、回退以及在如何定义重量方面没有 "标准 "这一事实而导致的意外重量变化的影响是重要的考虑因素。
改进的对比度值
以下建议是基于文本的使用情况；文本对内容的可理解性的重要性告诉我们需要的可读性对比度。按重要性排序。
- 主体文字：可读的主体文字的列或块。(见侧记：身体的双重性)
- 其他流畅的文字：标题、菜单项目、主导航、工具提示和照片说明，这些都是理解所需的。
- 次流畅的文本：彩色代码块、DataViz呼出、信息占位符、子文本、与内容文本重复或不需要理解的照片说明。
- 非文本：图标、象形图、按钮、控制。
- 所显示的WCAG 2值仅用于浅色模式，这意味着背景的颜色永远不会超过相当于大约
#aaa。 - 另外，这里列出的WCAG 2值比官方WCAG 2指南中列出的值要高，以帮助弥补旧的数学/方法中的某些缺陷。
- APCA和WCAG 3仍在发展中，还不是W3C的官方建议。
- APCA对大于
24px的字体的最大推荐对比度是Lc 90。更多并不总是更好。
