1. 网页正文配色验证
UI 设计师背景
正在为新项目设计深色模式,需要确保浅灰色文字在深色背景下具备足够的辨识度。
问题
担心选用的浅灰色文字对比度不足,导致视力不佳的用户难以阅读。
如何使用
输入深色背景色 #1A1A1A 和浅灰色文字 #A0A0A0 进行对比度测试。
结果
工具显示对比度为 6.2:1,符合 WCAG AA 级标准,确认该配色方案安全可用。
Elysia Tools
导航
Design
检查颜色对比度是否符合 WCAG 标准
执行
填写表单、运行工具,并在同一页面查看结果。
案例
相关内容
等待运行
工具使用指南
颜色无障碍检查工具可快速评估前景色与背景色的对比度,确保您的设计符合 WCAG 无障碍标准,为视障用户提供清晰易读的视觉体验。
背景
正在为新项目设计深色模式,需要确保浅灰色文字在深色背景下具备足够的辨识度。
问题
担心选用的浅灰色文字对比度不足,导致视力不佳的用户难以阅读。
如何使用
输入深色背景色 #1A1A1A 和浅灰色文字 #A0A0A0 进行对比度测试。
结果
工具显示对比度为 6.2:1,符合 WCAG AA 级标准,确认该配色方案安全可用。
背景
公司要求将品牌亮黄色作为按钮背景,并使用白色文字。
问题
亮黄色背景上使用白色文字可能导致对比度过低,无法通过无障碍审计。
如何使用
输入背景色 #FFD700 和文字颜色 #FFFFFF 进行检测。
结果
工具提示对比度仅为 1.2:1,未通过测试,建议更换为深色文字以提升可读性。
WCAG 是 Web 内容无障碍指南,旨在确保互联网内容对残障人士(包括视力障碍者)友好且易于访问。
通常 AA 级标准要求普通文本对比度至少达到 4.5:1,大号文本至少达到 3:1。
支持标准的十六进制颜色代码(Hex),如 #FFFFFF 或 #333333。
良好的对比度能确保色盲或低视力用户能够清晰辨认页面上的文字和重要信息。
结果会显示具体的对比度比率,并明确标注该组合是否通过了 WCAG 的 AA 或 AAA 级合规性测试。