颜色对比度检查
输入前景色和背景色，计算 WCAG 对比度比值，判断是否符合无障碍设计标准。
颜色对比度检查
示例文字 Aa
这是一段小号正文示例文本。
计算中...
颜色对比度检查工具使用指南
📌 简介
颜色对比度检查工具是一款面向设计师和前端开发者的在线工具，可以快速计算前景色和背景色的对比度比值，并根据 WCAG（Web Content Accessibility Guidelines）标准判断是否达标。良好的颜色对比度是网站无障碍设计的基础，能帮助视障用户、老年人、在强光下使用手机的用户更清晰地阅读内容。
📖 什么是 WCAG 对比度？
WCAG 是国际万维网联盟（W3C）发布的无障碍网页内容指南。其中规定：普通文字（小于 18pt 或 14pt 粗体）的对比度至少为 4.5:1（AA 级），大号文字至少为 3:1；最高等级 AAA 要求普通文字达到 7:1，大号文字达到 4.5:1。对比度计算公式基于相对亮度，范围从 1:1（同色）到 21:1（黑与白）。
💼 常见应用场景
- 网站设计： 确保正文、按钮、标题的对比度符合无障碍规范。
- 移动应用： 适配户外强光下的可读性需求。
- 品牌规范： 建立符合标准的配色方案。
- 政府项目： 满足政务网站的无障碍建设要求。
⚙️ 使用步骤
- 选择前景色（文字颜色）。
- 选择背景色。
- 工具会实时计算对比度比值并显示是否通过 WCAG 各级标准。
- 右侧预览区会展示实际显示效果。
⚠️ 注意事项
- 对比度计算基于 sRGB 色彩空间，实际显示效果可能因屏幕色差略有不同。
- 大号文字指 18pt（约 24px）以上或 14pt（约 18.67px）粗体以上。
- 通过 AA 级是最低要求，重要内容建议达到 AAA 级。
❓ 常见问题 (FAQ)
Q: 为什么 4.5:1 是标准？
A: 4.5:1 是 WCAG 经过大量研究后确定的阈值，能够保证大多数视力障碍用户在正常光照下清晰阅读文字。
Q: 深色模式也需要检查吗？
A: 需要。深色模式下的文字对比度同样重要，本工具对任何颜色组合都适用。
Q: 对比度越高越好吗？
A: 对于正文，建议至少 AA 级。过高的对比度（如纯黑纯白）可能造成视觉疲劳，可适度使用柔和的黑灰色。