当您收到有关网页设计中颜色对比度的投诉时，您应该怎么办？ 它可能对您来说看起来很完美，因为您可以阅读整个网站的内容，但对其他人来说，这可能是一种完全不同的体验。 如何设身处地地为他们改善体验？
有一些相对容易的方法来测试对比度。 例如，您可以在阳光明媚的情况下（不可靠*）在手机或平板电脑上检查网站，或者添加一个 模拟灰度视图的 CSS 过滤器）。 但… 您不必相信自己的眼睛。 毕竟不是每个人都拥有您一样的眼睛，所以您的主观意见可能会导致错误的测量结果。
您可以数学地知道两种颜色之间是否有足够的对比度。
W3C 有一份名为 Web 内容无障碍指南 (WCAG) 2.1 的文档，其中涵盖了 成功的对比度指南。 在进入数学计算之前，我们需要了解要达到或超过的对比度比率分数。 要获得及格分数（AA），大多数正文的对比度比率为 4.5:1，较大的文本的对比度比率为 3:1。
W3C 是如何得出这些比率的？
这些指南是为任何使用标准浏览器且没有额外辅助技术的人创建的。 WCAG 建议的对比度比率最初基于早期的对比度标准，并进行了调整以适应更新的显示技术（如抗锯齿文本），以便内容可以被具有各种视觉或认知障碍的人阅读，无论是因为年龄、疾病还是其他视觉敏锐度下降。
我们基本上是想让 20/40 视力的人也能阅读文本，这相当于 80 岁的人的视力。 20/40 的视力意味着你只能在 20 英尺外阅读 20/20 视力的人在 40 英尺外才能阅读的东西。
所以，假设您的设计需要抗锯齿文本，因为它在屏幕上看起来更平滑。 它实际上牺牲了一点对比度并降低了您的比率。 WCAG 对 评分机制进行了更详细的介绍。
还有其他标准将对比度考虑在内，WCAG 使用其中一些考虑因素来制定其评分。 其中一项被称为 计算机工作站的人机工程学 (ANSI/HFES 100-2007) 出版于 2007 年，被指定为人体工程学方面的美国标准。 它合并并取代了两个由不同委员会创建的早期标准。 合并标准的目标是适应 90% 的计算机用户，并涵盖计算机使用和人体工程学的许多方面，包括视觉显示和对比度。 所以，这意味着我们在设计中要考虑物理屏幕。
比率意味着什么？
对比度比率解释了给定范围内最亮颜色亮度与最暗颜色亮度之间的差异。 它是 每种颜色的相对亮度。
让我们从一个鲜明的例子开始，比如在浅灰色背景上显示青绿色文本。
<h1>Title of Your Awesome Site</h1>h1 {
background-color: #888888;
color: #1ABC9C;
}
值得注意的是，某些工具（如 WordPress）会在文本和背景组合对比度较差时提供有用的警告。 在 WordPress 的情况下，您会在侧边栏中收到通知。
“好的，”你说。“也许你觉得青绿色和灰色这种颜色组合并不理想，但我仍然可以辨认出内容。”（我很高兴我们中有人可以，因为对我来说，这简直是一团模糊的灰色。）
这段超文本的对比度比率为1.47:1。
我想更好地理解对比度分数实际上检查了什么，发现它需要使用数学…以及了解人眼和计算机视觉之间的差异。 这段旅程让我了解了 计算机视觉的历史以及一些生物学知识，并让我回顾了自大学以来一直没碰过的 一些数学概念。
这是公式
(L1 + 0.05) / (L2 + 0.05)L1是两种颜色中较浅颜色的相对亮度。L2是两种颜色中较深颜色的相对亮度。
看起来很简单，对吧？ 但首先我们需要确定每种颜色的相对亮度才能得到这些变量。
好的，回到相对亮度
我们之前提到了它，但值得深入了解一下相对亮度，也就是任何颜色的相对亮度，表示为 0（黑色）到 1（白色）之间的光谱。
要确定每种颜色的相对亮度，我们首先需要获得颜色的 RGB 表示。 有时我们会使用十六进制颜色值，需要将其转换为 RGB。 网上有一些计算器可以帮助我们完成这项工作，但 背后存在着严谨的数学运算。 我们的青绿色十六进制颜色 #1ABC9C 转换为 RGB 26, 188, 156。
接下来，我们将 RGB 颜色的每个值除以 255（RGB 值的最大整数）以获得 0 到 1 之间的线性值。
所以现在我们青绿色的颜色看起来像这样
| 组成部分 | 公式 | 值 |
|---|---|---|
| 红色 | 26/255 | 0.10196078 |
| 绿色 | 188/255 | 0.73725490 |
| 蓝色 | 156/255 | 0.61176471 |
然后我们应用伽马校正，它 定义了像素数值与其实际亮度之间的关系，应用于 RGB 颜色的每个组成部分。 如果组件的线性值小于 .03938，则将其除以 12.92。 否则，我们将 .055 加到它上面，然后将总和除以 1.055，并将结果取 2.4 次方。
我们青绿色的颜色经过伽马校正后的颜色组成部分如下
| 组成部分 | 公式 | 值 |
|---|---|---|
| 红色 | ((0.10196078 +.055)/1.055) ^ 2.4 | 0.01032982 |
| 绿色 | ((0.73725490 +.055)/1.055) ^ 2.4 | 0.50288646 |
| 蓝色 | ((0.61176471 +.055)/1.055) ^ 2.4 | 0.33245154 |
我们方程式中的这部分来自 确定相对亮度的公式。
我们刚才只是快速地提到了伽马校正，而没有过多地谈论它以及它所做的工作。 简而言之，它将计算机“看到”的东西转换为人眼对亮度的感知。 计算机直接记录光线，光子数量的两倍意味着亮度的两倍。 人眼在昏暗的环境中感知到更多的光线级别，而在明亮的环境中感知到更少的光线级别。 我们周围的数字设备一直在进行伽马编码和解码计算。 它被用来向我们展示屏幕上的东西，这些东西与我们对事物在眼睛中的感知相符。
最后，我们将不同的颜色乘以代表这些颜色对人眼看起来有多亮度的数字。 这意味着我们通过将红色成分值乘以 .2126、将绿色成分值乘以 .7152、将蓝色成分值乘以 .0722 来确定每种颜色的亮度，然后将这三个结果加在一起。 您会注意到，这里绿色得到了最高的数值，
所以，最后再看一下青绿色
| 组成部分 | 公式 | 值 |
|---|---|---|
| 红色 | 0.01032982 X 0.2126 | 0.00219611973 |
| 绿色 | 0.50288646 X 0.7152 | 0.35966439619 |
| 蓝色 | 0.33245154 X 0.0722 | 0.02400300118 |
…然后将它们加在一起得到亮度！
L1 = 0.00219611973 + 0.35966439619 + 0.02400300118 = 0.38586352如果我们用同样的方法得到 L2 值，那么我们会得到 0.24620133。
我们终于得到了计算对比度所需的 L1 和 L2 值。 为了确定哪个值是 L1，哪个值是 L2，我们需要确保较大的数字（表示较浅的颜色）始终是 L1，并且除以较小的/较深的数字作为 L2。
现在将结果与 WCAG 成功标准进行比较。 对于标准的文本大小（18 到 22 点），最小值为 4.5 将以 AA 等级通过。 如果我们的文本更大，那么稍低的分数 3 就可以了。 但要获得最高的 WCAG 等级（AAA），我们必须拥有至少 7 的对比度比率结果。 我们可爱的组合未能通过所有测试，远低于标准文本的 4.5 或标题式文本的 3。 是时候选择一些更好的颜色了！
我很高兴我们有计算机和在线工具来帮助我们完成这项工作！ 尝试在纸上一步一步地计算细节让我沮丧了好几个星期。 我在将结果与自动对比度检查器的结果进行比较时，错误百出。
还记得学校里的老师总是希望你展示你的数学作业，证明你是如何得到答案的吗？ 我做了一些东西来帮助我们。
如果您使用打开的控制台查看此演示，您将看到计算中每一步的数学运算。 试试我们的两个示例颜色，比如 #1ABC9C 和 #888888。
我只想要我的页面有合适的对比度，该怎么办？！
您可以使用各种无障碍资源来审核您的网站。 这是我整理的一个列表， 还有 另一个列表 在CSS-Tricks上。
但以下是一些入门提示。
首先，确定哪些区域没有满足您的无障碍需求。
the WAVE 无障碍工具 是一个不错的起点。 将您的网站运行到其中，它会为您提供对比度结果并帮助识别问题区域。
遵循审核建议
使用最佳实践来提高您的分数，并消除错误。一旦您确定对比度错误，您就可以在 WAVE 工具中尝试一些不同的选项。 点击颜色框打开颜色选择器。 然后随意调整，直到错误消失，您就会知道可以在代码中替换什么。
重新运行测试
这样，您可以确保您的更改改善了问题。 恭喜！您刚刚让您的产品对所有用户都更好，而不仅仅是受无障碍错误影响的用户！
接下来要做什么取决于您！
您可以让事情变得更轻松，从一开始就以无障碍为目标创建所有新产品。 将无障碍指南作为您的要求，用于技术和设计。 您将节省数百个小时的潜在修复时间，以及潜在的法律诉讼。 美国政府和教育网站必须遵守这些要求，但其他行业经常因为没有让其网站对所有人平等可用而受到指责。
如果您有选择，请考虑使用已建立和经过测试的框架和 Web 库（如 Bootstrap 或 Google 的 Material Design），这些库已经确定了最佳对比度主题颜色。 在很多情况下，您可以只取您需要的内容（例如，只有 CSS），或者至少查看它们的调色板以获得启发。 您仍然应该检查对比度，因为虽然框架中的大多数标准文本选项可能遵循对比度比率 WCAG 建议，但像警报和消息样式这样的东西可能不符合建议。 （我指的是你，Bootstrap！)
Derek Kay 已经回顾了一个 Web 框架列表，重点关注无障碍性，如果您正在寻找更多选项，建议您阅读。 the 美国 Web 设计系统 展示了一种使用其 CSS token 系统来解决颜色/对比度难题的方法（该系统将颜色标记为超级清晰的对比度差异），但它们还链接到几个非常好的资源，用于改善和理解对比度。
我们在本文中深入探讨了可能比您真正需要了解的内容更深入，但了解对比度比率是什么以及它实际上意味着什么应该可以帮助您记住在设计未来的网站、Web 应用程序和其他软件时牢记对比度。
更清楚地了解对比度比率意味着什么可以帮助我记住对比度差会影响谁，以及如何改进 Web 和移动产品。
我不是对比度的最终专家，只是一个非常、非常好奇的女孩，有时在 Web 上阅读对比度低的文字时会遇到困难。
如果您有任何其他想法、更正或要分享的进一步研究，请留言，我会修改这篇文章！ 我们对网站需求和要求的了解越全面，我们就越能更好地规划改进，并最终满足我们受众的需求。
进一步阅读和参考资料
- Web 如何变得难以阅读 – Kevin Marks
- 了解伽马校正 – 剑桥颜色
- 了解更多关于伽马校正 – Science Direct
- 相对亮度 – 维基百科
- 1. 人类视觉敏感度的最大波长 Susan Zhao 2007
文章开头建议您可以使用设计的灰度版本快速视觉检查对比度，以发现容易被忽视的问题。
但这在实践中行不通。
例如，绿色比蓝色具有高得多的亮度（约 10 倍），但当两者都转换为灰色时，它们看起来可能相同，从而对它们的相对对比度产生错误的印象。
您可以在用于查找 RGB 颜色空间中颜色亮度 (
Y) 的数学公式中看到这一点：Y = 0.2126R + 0.7152G + 0.0722B这与文章中稍后的公式相同，这意味着它与公式和周围的上下文相符。 但是，我认为仍然存在混淆的空间，我想强调一点，使用灰度作为代理不会起作用。
很好的观点！
我绝对同意您的观点。 对于视力需求不同的用户来说，简单的灰度查看无法/不能发现所有问题。 该方法已在 Web 上作为一个建议出现，但我个人始终相信使用对比度检查器进行实际点检查比这种方法更可靠。
就我个人而言，我无法相信我的眼睛，因为我的视力需要配眼镜，但我确实发现对比度问题更容易，因为我确实很难阅读它们。 这可能使我个人的对比度需求比当前的最佳实践更极端。 （所以我们显然不能选择我面前的葡萄酒。;)）只要文本通过了指标，我就不会再管它了。
网站的灰度版本是可用的，但灰度必须正确创建。 您不能简单地将 RGB 分量加在一起并取平均值，例如 (R+G+B)/3。
必须首先将 sRGB 值转换为相对亮度，首先线性化，然后应用 sRGB 系数 R0.2126、G0.7152、B*0.0722，然后将它们加在一起得到相对亮度 Y。
接下来，必须对该 Y 应用 sRGB 伽马。 “不精确”的方法是应用 ^0.455 的幂曲线指数，然后乘以 255 并舍入为整数，然后将该整数值用于所有三个颜色 RʹGʹBʹ。
sRGBgrey = round(Y^0.455 * 255);
这将是一个有用且准确的灰度。 顺便说一下，我有一个 CVD 模拟器，可以显示色觉缺陷视觉，以及一个正确的灰度，您可以在 https://www.myndex.com/CVD/ 上处理您内容的屏幕截图。
不幸的是，WCAG 评级没有考虑环境光和字重。
“调整直到刚好在阈值内”的方法往往会导致许多情况下的对比度过低。
一个更好的方法是从黑底白字文本开始（或在深色模式下反之亦然），并且只有在文本用于传达特定信息时才对其进行着色。
委托框架并不总是有效 – 例如，Bootstrap 的默认蓝色链接颜色对比度过低。
我在此详细介绍了这一点：https://www.wired.com/2016/10/how-the-web-became-unreadable/
我同意您的观点，凯文，我也读过您优秀的文章。 :D 事实上，当我与 Chris 谈论这篇文章时，我还提到了您的具体文章。
我认为，一般来说，环境光大部分都不在开发人员的责任范围内，除非他们完全控制/了解输出将被广播的位置。
电视、投影仪、手持设备、渔船或体育场接吻摄像头，都会有很大的对比度要求差异，这超出了基本标准。
有时，与幻灯片演示文稿对比度过低（太薄/太浅）的演示者进行简短交流，可以使未来的演示更容易阅读。希望，如果开发者在不同的环境光照条件下收到有关其作品的反馈，他们会进行调整。
我确实稍微批评了一下 Bootstrap，因为它确实并非所有部分都符合要求，或者可读性高。其他框架也可能存在同样的部分符合性问题。我们不能将此责任推卸出去。
同样，并非所有自动测试工具都能理解文本区域后面的不透明度叠加层和背景图片，这意味着某些东西可能最初会符合要求，但实际上不可读。我们在开发和测试时需要批判性地考虑所有产品，以确保我们能接触到所有受众。
但是！如果我们从一个没有对比度调节的网站到一个经过对比度测试的网站，并且开发者开始将对比度考虑在内……在大多数情况下，我会将其称为改进。
感觉对比度是我们必须反复教授的课程。
嗨，Keven，你提到这一点很有趣——WCAG 3 的新对比度方法是 APCA，字体粗细和字号是新指南的重要组成部分。
APCA 数学本身在感知上也是一致的。
请解释使用 #2e2f3e 而不是黑色作为此页面上文本的背后确切逻辑和计算！
小细节：在相对亮度计算中，你使用 0.03938 作为伽马校正的截止值。而 W3C 公式指定为 0.03928。
实际上两个都错了。IEC 标准指定 0.04045 作为阈值。众所周知，它在 WCAG 2 规范中已经错误多年了。它没有被改变，因为在 8 位 sRGB 中，在比率数学的背景下，亮度几乎没有区别。旧 WCAG 2 数学的问题是由其他因素造成的。