颜色对比度检查
按WCAG标准计算前景与背景的对比度，给出AA/AAA达标判定，并可自动调整到达标颜色
颜色
对比度
| 标准 | 要求 | 结果 | 适用范围 |
|---|---|---|---|
| AA 正文 | ≥ 4.5:1 | 通过 | 小于 18pt 的普通文字，最常用的达标线 |
| AA 大号文本 | ≥ 3:1 | 通过 | 18pt 以上，或 14pt 以上的粗体文字 |
| AAA 正文 | ≥ 7:1 | 不通过 | 更严格的等级，政务与无障碍要求高的场景 |
| AAA 大号文本 | ≥ 4.5:1 | 通过 | 大号文本的 AAA 要求 |
| AA 非文本元素 | ≥ 3:1 | 通过 | 图标、边框、图表等界面元素（WCAG 1.4.11） |
效果预览
12px 正文：这是一段用于观察实际阅读效果的示例文字 Sample Text 0123456789
16px 正文：这是一段用于观察实际阅读效果的示例文字 Sample Text
24px 加粗标题：示例标题 Sample Heading
WCAG 要点
- "大号文本"指 18pt（约 24px）以上，或 14pt（约 18.66px）以上且为粗体，其余按正文标准判定。
- 1.4.11 非文本对比度要求图标、输入框边框、图表等界面元素至少 3:1，容易被漏掉。
- 纯装饰性文字、logo 以及被禁用的控件不受对比度要求约束。
- 对比度计算基于不透明颜色。半透明前景需要先与背景合成，否则结果偏乐观。
- 对比度达标不等于可读：字重过细、字号过小、行距太紧同样会影响阅读。
把这次的结果存下来
结果是在你自己的浏览器里算出来的，关掉页面就没有了。保存后会留在「我的结果」里， 并生成一条链接——换设备、发给别人都能再打开（只存结果摘要，不存你填的原始数字）。
这是需求投票，不是邮件订阅：我们只统计有多少人想要这个工具做得更好， 用来排开发优先级，不会给你发通知邮件。邮箱只用于「一人一票」去重， 不发广告、不交给第三方；想删除记录，可通过页脚的联系方式告诉我们。
功能介绍
颜色对比度检查按WCAG 2.x的相对亮度公式计算前景色与背景色的对比度比值，并同时给出五行判定结果：AA级正文需达到4.5比1、AA级大号文字3比1、AAA级正文7比1、AAA级大号文字4.5比1、非文本元素（图标、表单边框、焦点指示）3比1，每行以通过或不通过的明确标识呈现。预览区用12px、16px、24px三种字号以及按钮与边框的真实样式展示实际观感，避免只看数字而忽略视觉效果。颜色输入支持十六进制、rgb与rgba函数写法以及常见颜色名。当对比度不足时可点击自动修正，工具会在HSL空间保持色相与饱和度不变、仅沿明度方向逼近4.5比1，优先朝远离背景亮度的方向调整，因此修正结果与原设计的色调保持一致而不是简单变成黑白。所有计算在本地完成。
使用说明
1. 分别填写前景色（文字色）与背景色，支持十六进制、rgb函数与颜色名；2. 顶部显示对比度比值，下方五行给出AA、AAA与非文本元素的达标情况；3. 在预览区确认12px正文、24px标题与按钮的真实观感；4. 不达标时点击"自动修正"，工具会保持色相调整明度到刚好达标；5. 点击"交换"可快速检查反色方案（如深色模式）；6. 注意大号文字的标准是18pt常规或14pt粗体（约24px与18.5px粗体）以上，不要把小字按大号标准放宽；7. 文字压在图片或渐变上时需要按最不利的局部区域取色测量。