对比度
对比度检测器
检查文字与背景的对比度是否达到无障碍标准，并获得自动修正建议。
一键修正
在保持色相不变的前提下，自动调整明度直到达标。
对比度
—
| 类型 | AA | AAA |
|---|
APCA (WCAG 3 草案)
—APCA（无障碍感知对比度算法）按人眼实际感知计算对比度 Lc 值，区分浅底深字与深底浅字，比 WCAG 2.1 比值更贴近真实可读性。
| 用途 | 建议 Lc | 结果 |
|---|
预览
大标题示例文字
设计的一半是取舍，另一半是让人看得清。
这是一段 14px 的正文示例，用来直观检查小字号在当前配色下的可读性表现。
按钮示例
这是一个链接
WCAG 标准速查
| 类型 | 对比度 | |
|---|---|---|
| AA 正文 | ≥ 4.5 : 1 | 常规字号（小于 18pt / 14pt 粗体）的最低要求，绝大多数网站的合规底线。 |
| AA 大字 | ≥ 3 : 1 | 18pt（约 24px）以上，或 14pt（约 18.66px）粗体文字的最低要求。 |
| AAA 正文 | ≥ 7 : 1 | 增强级别，适用于面向视力障碍用户的公共服务类网站。 |
| AAA 大字 | ≥ 4.5 : 1 | 大号文字的增强级别要求。 |
| 非文本元素 | ≥ 3 : 1 | 按钮边框、图标、图表等界面元素与相邻颜色的最低对比要求。 |
工具介绍与使用说明
📘对比度检测按 WCAG 2.1 标准计算前景色与背景色的对比度，给出 AA/AAA 等级与修正建议，保障文字可读性。
- 分别选前景色与背景色，右侧实时显示对比度数值与达标等级（正文 ≥ 4.5:1，大文字 ≥ 3:1）。
- 不达标时直接换一个相近但对比更强的颜色；关键按钮边框也要 ≥ 3:1。
- 红绿色盲难以区分红绿配色，提交前用「色盲模拟」再确认一遍可读性。
使用提示
💡- 分别选前景色与背景色，右侧实时显示对比度与 WCAG 等级（AA/AAA）。
- 正文至少达到 4.5:1（AA），大号文字 3:1 即可，关键按钮边框也要 ≥ 3:1。
- 红绿色盲难以区分红绿配色，提交前用「色盲模拟」再确认一遍可读性。