颜色对比度检查器
免费在线颜色对比度检查工具,免安装。检查 WCAG 颜色对比度是否符合无障碍标准
什么是颜色对比度和 WCAG?
颜色对比度测量前景(文本)颜色和背景颜色之间的亮度差异。Web 内容无障碍指南 (WCAG) 2.1 为可读性设置了最低对比度要求。WCAG AA 要求普通文本的对比度为 4.5:1,大文本(18pt+ 或 14pt+ 粗体)为 3:1。WCAG AAA 的要求更严格:普通文本为 7:1,大文本为 4.5:1。更高的对比度使文本更易于阅读,尤其是对于有视觉障碍的用户。
如何使用颜色对比度检查器
输入或选择前景颜色(文本颜色)和背景颜色。该工具计算对比度比率,并显示其是否符合普通文本和大文本的 WCAG AA 和 AAA 标准。使用「交换」按钮快速交换颜色。「视觉预览」显示具有颜色组合的示例文本,帮助您评估可读性。启用「色盲模拟」以查看您的颜色对患有不同类型色觉缺陷的用户的外观。
了解色盲模拟
约 8% 的男性和 0.5% 的女性患有某种形式的色觉缺陷。红色盲影响红色感知(红色看起来很暗)。绿色盲影响绿色感知(绿色和红色看起来相似)。蓝色盲影响蓝色感知(蓝色看起来像绿色)。全色盲是完全色盲(只有灰色阴影)。使用这些模拟测试您的设计有助于确保所有用户的可访问性。
▶我的项目需要什么对比度比率?
对于大多数面向公众的网站,目标是 WCAG AA(普通文本 4.5:1,大文本 3:1)。对于政府、教育或专注于可访问性的项目,目标是 WCAG AAA(普通文本 7:1,大文本 4.5:1)。更高的对比度总是有利于可读性。
▶为什么我的设计不符合对比度要求?
常见问题包括白色背景上的浅灰色文本、低对比度颜色(如白色上的黄色)或仅使用颜色作为视觉区别。解决方案:加深文本、使用较深的背景、增加字体大小或添加除颜色之外的额外视觉提示(下划线、图标)。
▶此工具可以检查 UI 元素的对比度吗?
此工具专注于文本对比度。对于图形对象和 UI 组件(图标、边框),WCAG 要求与相邻颜色的对比度为 3:1。使用相同的原则,但对于非文本内容的要求略有不同。
▶我可以将其用于暗模式设计吗?
可以。颜色对比度要求同样适用于浅色深色和深色浅色组合。暗模式设计可能会在纯白 (#FFFFFF) 和纯黑 (#000000) 上失败,这可能会导致眼睛疲劳。轻微调整(深灰色上的白色)可以在保持可访问性的同时改善舒适度。
如果这个工具帮到了你,可以请作者喝杯咖啡。
请我喝杯咖啡