Color Contrast Checker
本地 color-contrast-checker 思路,在浏览器本地检查前景色与背景色的 WCAG 对比度,并判断普通文字和大号文字的 AA / AAA 通过情况。
Color Contrast Checker
Color Contrast Checker 可在浏览器本地检查前景色与背景色的 WCAG 对比度,实时显示 1:1 到 21:1 的对比度结果,并判断普通文字与大号文字的 AA / AAA 通过情况。
如何使用?
- 输入前景色和背景色,支持 HEX、RGB、HSL 和常见 CSS 颜色关键字。
- 查看实时对比度结果以及 AA / AAA 通过状态。
- 使用预览区域检查实际文字阅读效果。
- 复制检查报告用于设计交付、前端验收或可访问性记录。
工具特性
- 本地计算 WCAG 对比度
- 覆盖普通文字和大号文字的 AA / AAA 判定
- 透明色会先与白色画布合成后计算
为什么使用这个工具?
- 快速验证正文、按钮、链接和图标颜色是否可读
- 减少设计稿和前端实现之间的可访问性偏差
- 无需上传数据即可完成颜色校验