颜色对比度检测
输入文字颜色和背景颜色,按 WCAG 2.x 标准检查可读性。不达标时,工具会在保持色相的前提下给出最接近的合格颜色。
文字颜色
背景颜色
建议的文字颜色
大号标题文字
这是一段正文示例,用来检查在当前配色下长时间阅读是否吃力。
这是一段 13px 的小字注释。
界面按钮使用步骤
- 分别设置文字色和背景色,可以用“交换”快速对调。
- 查看五项检测结果:绿色为通过,红色为不通过。
- 不通过时,点击建议色即可替换文字色。
常见问题
对比度标准是多少?
WCAG 2.x 规定:正文 AA 级至少 4.5:1,AAA 级至少 7:1;大号文字(约 24px 常规或 18.5px 粗体以上)AA 级至少 3:1,AAA 级至少 4.5:1;图标、输入框边框等界面元素至少 3:1。
对比度是怎么计算的?
先算出两种颜色的相对亮度 L1(较亮)和 L2(较暗),对比度 = (L1 + 0.05) / (L2 + 0.05),范围从 1:1 到 21:1。
建议色是怎么来的?
工具在 OKLCH 空间里保持色相和彩度,只调整明度,找到刚好达标且改动最小的颜色,所以建议色和原色看起来是同一种颜色。