是什么 WCAG Color Contrast Checker?
▾
WCAG 颜色对比度计算器检查前景色和背景色之间的对比度是否足以支持可读、可访问的文本和界面元素。这很重要，因为在现代屏幕上看起来很有吸引力的视觉设计选择对于视力低下、眼睛老化、眩光或某些显示条件的用户来说仍然无法阅读。网页内容可访问性指南 (WCAG) 提供了对比度阈值，帮助团队测试文本和某些非文本界面元素是否具有足够的可区分性，以便让更多人舒适地使用。计算器很有用，因为对比度不能仅凭直觉来判断。结果取决于相对亮度，该相对亮度是在得出对比度之前根据基础颜色值计算得出的。设计人员和开发人员使用计算器检查正文、按钮、链接、表单标签、图标和主题调色板。该工具在设计系统中特别有用，在这种系统中，一种品牌颜色可能在多种环境中使用，并且需要针对浅色和深色表面进行验证。结果仍应在上下文中解释。通过比率要求并不能自动保证良好的可用性，而少量失败并不能解释所有阅读困难。但计算器是视觉界面工作中最快、最重要的可访问性检查之一，因为它将模糊的设计判断转变为与包容性使用相关的可衡量标准。
PrimeCalcPro provides professional-grade tools trusted by businesses and academics.
公式
▾
对比度 = (L_lighter + 0.05) / (L_darker + 0.05)，其中 L 是相对亮度。示例：如果较亮的亮度为 1.0，较暗的亮度为 0.1，则对比度 = (1.0 + 0.05) / (0.1 + 0.05) = 7.0。变量说明
▾
| 符号 | 名称 | 单位 | 描述 |
|---|---|---|---|
| L | 相对亮度 | 0 to 1 | 相对亮度值，作为颜色对比度wcag计算中的关键输入参数，直接影响计算输出结果的大小和准确性 |
| R,G,B | 线性化 RGB 分量 | 0 to 1 | 线性化的RGB分量值，作为颜色对比度wcag计算中的关键输入参数，直接影响计算输出结果的大小和准确性 |
| x3 | 输出结果 | — | 颜色对比度 wcag 计算中的关键数值参数，表示影响最终结果的可测量输入或计算输出 |
如何 WCAG Color Contrast Checker
▾
- 1输入要比较的前景色和背景色，通常采用十六进制、RGB 或其他数字颜色格式。
- 2使用线性化 RGB 分量的 WCAG 亮度方法将颜色值转换为相对亮度。
- 3根据亮度结果识别哪种颜色较浅，哪种颜色较深。
- 4使用比较较亮和较暗亮度值的 WCAG 公式计算对比度。
- 5将该比率与普通文本、大文本和任何其他适用用例的相关 WCAG 阈值进行比较。
例题解析
▾
白底深灰色通常比对比度较低的柔和组合更容易阅读。
由于前景比背景暗得多，因此亮度差异较大。这会产生更强的比率并且通常更舒适的阅读。
色彩丰富并不能保证可读性。
饱和颜色的亮度仍然可能太接近白色，无法产生足够的对比度。这是适应 UI 文本的营销调色板中的常见问题。
阈值因文本大小和粗细条件而异。
与小正文文本相比，较大文本可以在较低对比度水平下保持可读性。该计算器有助于阐明哪个阈值与设计环境相关。
深色模式仍然需要仔细测试，尤其是柔和的灰色。
当亮度差距足够大时，深色主题可以轻松访问。当两种颜色在同一中暗范围内过于紧密地聚集时，通常会出现问题。
实际应用
▾
检查文本和 UI 控件是否满足可访问性期望。此应用程序通常由需要精确定量分析以支持各自领域的决策、预算和战略规划的专业人士使用
验证浅色和深色主题的设计系统调色板。行业从业者依靠此计算来对绩效进行基准测试、比较替代方案并确保符合既定标准和监管要求，从而帮助分析师生成准确的结果，以支持跨组织的战略规划、资源分配和绩效基准测试
在实施之前防止出现不可读的组合 - 学术研究人员和学生使用此计算来验证理论模型、完成课程作业并加深对基础数学原理的理解
研究人员使用颜色对比度 wcag 计算来处理实验数据、验证理论模型并生成定量结果以在同行评审的研究中发表，支持数据驱动的评估过程，其中数值精度对于合规性、报告和优化目标至关重要
特殊情况
▾
透明层
{'title': '透明图层', 'body': '如果文本或 UI 颜色使用透明度，则真实对比度取决于实际背景的最终合成颜色，而不仅仅是标称前景色。'} 在颜色对比度 wcag 计算中遇到这种情况时，用户应验证其输入值是否在公式的预期范围内，以产生有意义的结果。超出范围的输入可能会导致数学上有效但实际上毫无意义的输出，这些输出不反映现实世界的条件。
图像背景
{'title': '图像背景', 'body': '在图像的一个部分上传递的文本颜色可能在另一部分上传递失败，因此图像上的对比度通常需要覆盖或仔细控制位置。'} 这种边缘情况经常出现在涉及边界条件或极值的颜色对比度 wcag 的专业应用中。从业者应记录这种情况何时发生，并考虑替代计算方法或调整因子是否更适合其特定用例。
负输入值对于颜色对比度 wcag 可能有效，也可能无效，具体取决于域上下文。
有些公式接受负数（例如温度、变化率），而其他公式则需要严格的正数输入。用户在依赖输出之前应检查其特定场景是否允许负值。使用色彩对比度 wcag 的专业人员应特别注意这种情况，因为如果处理不当，可能会导致误导性结果。当实践中出现这种情况时，请务必验证边界条件并使用独立方法进行交叉检查。
常见 WCAG 对比目标
▾
| 使用案例 | 防空目标 | AAA 目标 |
|---|---|---|
| 普通文本 | 4.5:1 | 7:1 |
| 大文本 | 3:1 | 4.5:1 |
| 仅装饰性非文本 | 依赖于上下文 | 依赖于上下文 |
| 关键 UI 标签 | 使用最强的实际对比 | 使用最强的实际对比 |
常见问题
▾
什么是 WCAG 对比度？
它是浅色和深色的相对亮度之间的数值比较。该比率有助于确定文本或界面元素在 WCAG 指导下是否具有足够的可读性。实际上，这个概念是颜色对比度 wcag 的核心，因为它决定了输入变量之间的核心关系。了解这一点有助于用户更准确地解释结果并将其应用于特定环境中的现实场景。
普通文本需要多少对比度？
在 WCAG 2.x 下，普通文本一般至少需要 4.5:1 才能达到 AA 级别。较大的文本具有较低的最小阈值。在实际应用中进行颜色对比度 wcag 计算时，这是一个重要的考虑因素。答案取决于具体的输入值和应用计算的上下文。为了获得最佳结果，用户应考虑他们的具体要求，并根据已知基准或专业标准验证输出。
为什么明亮的颜色仍然无法形成对比？
因为对比度取决于亮度差异，而不取决于颜色的鲜艳度或饱和度。看起来明亮的口音在亮度上仍然可能离背景太近。这很重要，因为准确的色彩对比度 wcag 计算直接影响专业和个人环境中的决策。如果没有适当的计算，用户就有可能根据不完整或不正确的定量分析做出决策。行业标准和最佳实践强调精确计算的重要性，以避免代价高昂的错误。
通过对比是否能保证良好的可访问性？
不。它是一个重要的基线，但可用性还取决于字体大小、粗细、间距、层次结构以及颜色是否是唯一使用的提示。在实际应用中进行颜色对比度 wcag 计算时，这是一个重要的考虑因素。答案取决于具体的输入值和应用计算的上下文。为了获得最佳结果，用户应考虑他们的具体要求，并根据已知基准或专业标准验证输出。
AA 和 AAA 对比预期有什么区别？
AAA 更严格，通常比 AA 要求更高的对比度。当团队想要更强的可读性时，它通常被用作更雄心勃勃的目标。实际上，这个概念是颜色对比度 wcag 的核心，因为它决定了输入变量之间的核心关系。了解这一点有助于用户更准确地解释结果并将其应用于特定环境中的现实场景。
应多久重新计算一次对比度？
每当颜色、主题、不透明度、文本大小或背景发生变化时重新计算。在一种状态下工作的颜色对一旦叠加在不同的表面或透明效果上可能会失败。该过程涉及将基本公式系统地应用于给定的输入。计算中的每个变量都会影响最终结果，了解它们各自的作用有助于确保准确的应用。
对比检查中最大的错误是什么？
一个常见的错误是假设视觉直觉就足够了。另一种方法是仅检查一个屏幕状态，而忘记悬停、禁用、焦点、深色模式或图像覆盖情况。实际上，这个概念是颜色对比度 wcag 的核心，因为它决定了输入变量之间的核心关系。了解这一点有助于用户更准确地解释结果并将其应用于特定环境中的现实场景。
常见错误注意事项
▾
- !使用不正确的输入单位
- !忘记考虑边缘情况
- !过早舍入中间值
专业提示
切勿仅依靠颜色来传达状态或含义，因为即使是强烈的对比度本身也无法解决所有可访问性需求。
你知道吗？
调色板在模型中看起来很时尚，但一旦将真实的正文文本放置在其顶部，仍然会严重失败可访问性检查。
Regional Guides
▾
🇺🇸 US▾
🇬🇧 UK▾
🇪🇺 EU▾
获取每周数学提示
加入 12,000+ 订阅者，每周都会获得计算器提示。