无需登录 数据私有 本地保存

随机配色对比度测试 - 随机生成检查

12
0
0
0
预览区域
标题文字示例

这是一段正文文字，用于测试正常文本大小的对比度效果。文字应清晰可辨，阅读舒适。

● 徽章组件
对比度比率
--
AA 正文 AA 大文本 AAA 正文 AAA 大文本
#1A1A2E
#F8F9FA
提示：锁定一个颜色后，随机按钮只改变另一个颜色
WCAG 2.1 标准速查
级别 正常文本 大文本
AA ≥ 4.5:1 ≥ 3:1
AAA ≥ 7:1 ≥ 4.5:1

* 大文本：≥18pt (约24px) 或 ≥14pt (约19px) 加粗

最近配色记录
点击随机生成来记录配色
常见问题与知识点
什么是WCAG颜色对比度？
WCAG（Web Content Accessibility Guidelines，网页内容无障碍指南）是由W3C制定的国际标准。颜色对比度是指前景色（如文字）与背景色之间的亮度差异比率。对比度越高，文字越容易辨认。WCAG 2.1规定了不同级别的最低对比度要求，以确保视觉障碍用户也能清晰阅读网页内容。对比度范围从1:1（完全相同）到21:1（纯黑对纯白）。
AA和AAA级别有什么区别？
AA级（最低合规）：正常文本对比度需达到4.5:1，大文本需达到3:1。这是大多数网站应达到的基本无障碍标准。
AAA级（增强合规）：正常文本对比度需达到7:1，大文本需达到4.5:1。这是最高级别的无障碍标准，适用于需要服务特殊人群的场景。AAA级对设计限制较大，不是所有网站都必须达到。
什么算"大文本"？
根据WCAG定义，大文本指：18pt（约24px）及以上的常规字体，或14pt（约18.7px）及以上的粗体字体。大文本由于笔画更粗、尺寸更大，在较低对比度下仍然可辨，因此WCAG对大文本的对比度要求相对宽松（AA级仅需3:1）。
对比度是如何计算的？
对比度计算基于sRGB色彩空间中的相对亮度（Relative Luminance）。首先将RGB值进行gamma校正转换为线性值，然后通过公式计算亮度：
L = 0.2126×R + 0.7152×G + 0.0722×B
最后对比度 = (L_亮 + 0.05) / (L_暗 + 0.05)。这个公式考虑了人眼对不同颜色敏感度的差异（绿色最敏感，蓝色最不敏感）。
如何快速选择无障碍友好的配色？
1. 避免纯黑纯白：纯黑(#000)文字在纯白(#FFF)背景上对比度为21:1，有时过于刺眼，可使用深灰(#1a1a2e)替代。
2. 优先测试正文：正文通常是正常文本大小，需要4.5:1的对比度。
3. 注意色彩饱和度：高饱和度的浅色文字（如亮黄、浅绿）在白色背景上对比度往往不足。
4. 使用本工具：随机生成配色并立即查看WCAG评级，快速找到合规的配色方案。
移动端和桌面端的对比度要求一样吗？
是的，WCAG标准是跨平台的。无论移动端还是桌面端，都需要满足相同的对比度要求。实际上，移动设备由于屏幕更小、户外使用场景更多（强光环境），高对比度在移动端更为重要。建议移动端优先确保AA级合规。
🔧 相关工具