WCAG 对比度检查器 检查前景色和背景色的WCAG对比度。
对比度检查器
检查前景色和背景色的WCAG对比度。
设置颜色
输入前景（文本）和背景颜色。
检查合规性
查看对比度比率和WCAG AA/AAA通过/失败结果。
调整与交换
修改颜色，直到达到目标的合规级别。
What Is 对比度检查器?
WCAG 对比度检查器通过计算前景（文本）和背景颜色之间的对比度来评估颜色组合的可访问性，按照 Web 内容无障碍指南（WCAG）2.1 计算。该工具计算基于亮度的对比度，并将其与四个 WCAG 阈值进行测试：正常文本的 AA（≥4.5:1）、大文本的 AA（≥3.0:1）、正常文本的 AAA（≥7.0:1）和大文本的 AAA（≥4.5:1）。通过这些阈值可以确保文本对具有不同视觉障碍水平的用户（包括低视力和色盲）可读。该工具提供实时文本预览，显示颜色组合在不同大小下的实际效果，以及每个 WCAG 级别的明确通过/失败指标。这是任何致力于创建无障碍、包容性数字体验的 Web 开发人员或设计师必备的工具。
Why Use 对比度检查器?
-
即时WCAG AA和AAA合规性检查
-
多种尺寸的视觉文本预览显示了实际的可读性
-
清晰的通过/失败指标，带有所需的比率阈值
-
交换按钮，用于快速测试反转颜色组合
-
测试四个合规级别：AA/AAA适用于普通和大文本
Common Use Cases
网页无障碍
验证文本/背景组合是否满足WCAG 2.1要求，达到ADA和AODA合规性。
设计系统审计
测试设计系统中的所有颜色组合，以确保无障碍合规性。
品牌色彩评估
检查是否可以使用品牌色彩作为文本/背景组合，通过无障碍标准。
法律合规
确保数字内容满足引用WCAG标准的无障碍法规。
Technical Guide
对比度使用 WCAG 2.1 相对亮度公式计算。首先，每个颜色通道被线性化：如果 sRGB ≤ 0.03928，则 linear = sRGB/12.92；否则 linear = ((sRGB + 0.055)/1.055)^2.4。相对亮度 L = 0.2126×R + 0.7152×G + 0.0722×B。对比度 = (L_lighter + 0.05) / (L_darker + 0.05)。该比例范围从 1:1（无对比度，相同颜色）到 21:1（黑色在白色上）。WCAG 2.1 定义了四个阈值：AA 级别要求正常文本（<18pt 或 <14pt 粗体）≥4.5:1 和大文本（≥18pt 或 ≥14pt 粗体）≥3:1。AAA 级别要求正常文本 ≥7:1 和大文本 ≥4.5:1。这些阈值基于视觉敏锐度的研究，确保对具有 20/40 视力或中等低视力的用户可读。
Tips & Best Practices
-
1目标是至少4.5:1的对比度，用于正文文本--这是WCAG AA的最低要求
-
2大型文本（18px+或14px+粗体）有一个较低的3:1要求，适用于AA
-
3AAA合规性（7:1）确保了用户具有更严重视觉障碍的可读性
-
4使用交换按钮测试颜色是否在两种方向上都有效
-
5暗黑模式设计需要相同的对比度比率--同时测试两个模式
Related Tools
Frequently Asked Questions
Q 什么是WCAG对比度比率？
Q AA和AAA有什么区别？
Q 什么算作大型文本？
Q 颜色是否是唯一决定无障碍性的因素？
About This Tool
对比度检查器 is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.