颜色对比度检测器
根据 WCAG 2.1 无障碍指南检测颜色对比度。测试普通文本和大文本的 AA 和 AAA 合规性。网页无障碍 (a11y) 合规的必备工具。
参数
文本或元素颜色。
对比的背景色。
结果
两种颜色之间的对比度
其他结果 (6)
普通文本（18pt 或 14pt 粗体以下）符合 WCAG AA 要求
大文本（18pt+ 或 14pt+ 粗体）符合 WCAG AA 要求
普通文本满足更严格的 WCAG AAA 要求
大文本满足更严格的 WCAG AAA 要求
Relative luminance of #000000
Relative luminance of #FFFFFF
为什么选择 颜色对比度检测器
颜色对比度检查器根据 WCAG 2.1 准则测试前景色和背景色之间的对比度。立即查看您的颜色组合是否通过普通文本和大文本的 AA 和 AAA 合规性。
- ✓使用 WCAG 2.1 相对亮度公式计算对比度
- ✓测试所有四个 WCAG 合规性级别：AA/AAA（适用于普通文本和大文本）
- ✓显示两种颜色的相对亮度值
- ✓使用颜色选择器输入轻松选择颜色
使用步骤
- 1使用颜色选择器选择前景色（文本）颜色
- 2使用颜色选择器选择背景颜色
- 3查看立即显示的对比度
- 4检查正常文本和大文本的 WCAG AA 和 AAA 通过/失败结果
- 5调整颜色，直到您的组合达到所需的水平
常见问题 (FAQ)
对于网页可访问性来说，什么是良好的对比度？
WCAG 2.1 要求普通文本（AA 级）的最小对比度为 4.5:1，大文本的最小对比度为 3:1。对于 AAA 合规性，普通文本需要 7:1，大文本需要 4.5:1。白底黑字 (21:1) 是最大可能的对比度。
WCAG 中什么算作“大文本”？
WCAG 将大文本定义为至少 18pt (24px) 或 14pt (18.66px) 粗体。大文本的对比度要求较低，因为在较低的对比度下更容易阅读。
对比度是如何计算的？
The contrast ratio uses relative luminance values: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color luminance and L2 is the darker. Luminance is calculated using the WCAG formula: L = 0.2126 × R + 0.7152 × G + 0.0722 × B, with each channel linearized from sRGB.
这个工具可以检查色盲的可访问性吗？
该工具检查基于亮度的对比度，这有利于所有用户，包括色觉缺陷的用户。但是，它并不模拟特定类型的色盲。对于色盲测试，请使用专用的色盲模拟器。
法律要求的最低对比度是多少？
许多无障碍法规（ADA、第 508 节、EN 301 549）引用 WCAG 2.1 AA 级作为标准，该标准要求普通文本为 4.5:1。许多国家的政府和教育网站都被法律要求达到这一水平。
权威参考资料
相关工具
继续探索同一场景下的实用工具。