颜色对比度检查器
免费在线颜色对比度检查工具，免安装。检查 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) 上失败，这可能会导致眼睛疲劳。轻微调整（深灰色上的白色）可以在保持可访问性的同时改善舒适度。
如果这个工具帮到了你，可以请作者喝杯咖啡。
请我喝杯咖啡