CSS 与颜色
颜色对比度检查器
输入前景和背景颜色，即可查看 WCAG 2.1 AA / AAA 对比度达标情况。
浏览器内处理即时输出本地数据
对比度
17.35:1
正文 AA
通过
正文 AAA
通过
大号文字 AA
通过
大号文字 AAA
通过
UI 控件 AA
通过
为什么用这个工具
03按 WCAG 2.1 规范计算颜色对比度，同时给出正文、大号文字和 UI 控件的 AA / AAA 通过结果。
设计和前端常用工具：评估文字或 UI 元素在真实配色下的可读性。
对比度基于 sRGB 相对亮度计算，所有判定均在本地完成。
如何使用
03复制前快速检查
03先确认输入格式符合你的预期。
在把结果用于文档、链接、配置或消息前快速扫一眼。
只复制你真正需要的输出。
常见问题
03
AA 和 AAA 有什么区别？
AA 是大多数无障碍法规要求的基线：正文 4.5:1、大号文字 3:1。AAA 是更严格的增强等级：正文 7:1、大号文字 4.5:1。
什么样的文字算大号文字？
WCAG 规定字号不小于 18pt（约 24px）常规字重，或 14pt（约 18.66px）加粗字重。
对比度是怎么算出来的？
遵循 WCAG 2.1 公式：先把颜色转成 sRGB 相对亮度 L，再计算 (L_lighter + 0.05) / (L_darker + 0.05)，取值范围 1:1 到 21:1。
相关工具
01颜色格式转换→
在 Hex、RGB、HSL 和 OKLCH 之间互转颜色，实时预览色块。