颜色对比度检查器(WCAG)
按照 WCAG AA 和 AAA 无障碍规则,检查文字颜色与背景是否有足够的对比度,并提供实时预览。
使用方法测试颜色对比度
–
大号示例文字
普通示例文字:无障碍设计能帮助所有人在任何屏幕上更好地阅读。
小号文字,如说明文字和页脚。
广告
颜色对比度检查器(WCAG): 用途
选择文字颜色和背景颜色,查看对比度比值,以及是否通过 WCAG 对普通文字、大号文字和图标的无障碍标准。预览会显示文字在多种尺寸下的效果。
支持十六进制颜色(#RRGGBB 或 #RGB),并提供交换颜色的按钮。
使用方法
- 选择或输入文字颜色。
- 选择背景颜色。
- 查看对比度以及 AA 和 AAA 级别。
使用场景
- 验证网站或应用的配色。
- 选择按钮和链接的颜色。
- 修复 Lighthouse 的无障碍警告。
常见问题
推荐的最低对比度是多少?
按 WCAG AA 级,普通文字至少需要 4.5:1,大号文字(24 px 及以上,或粗体 18.66 px)需要 3:1。AAA 级的最低要求提高到 7:1 和 4.5:1。
为什么对比度很重要?
对比度低的文字,对弱视、色盲的人或在阳光下使用手机的人来说很难阅读。此外,SEO 和无障碍工具也会指出这个问题。
真的免费吗?
是的,100%免费。无需注册,无需订阅,不限使用次数。所有工具:Tools123是免费的。