色彩对比度检查器

什么是色彩对比度？为什么它对 SEO 和体验至关重要？

色彩对比度是指两种颜色之间亮度的差异。在网页设计中，这通常指文字与其背景之间的对比。良好的对比度不仅是无障碍设计（Accessibility）的核心，更是解决“内容难以阅读”和“用户流失率高”等具体问题的关键。搜索引擎（如 Google）也将无障碍性作为衡量网页质量的一个重要指标。

WCAG 2.1 标准解析

Web 内容无障碍指南 (WCAG) 定义了两个级别的对比度要求：

• AA 级 (中等)： 这是大多数现代网站的基准要求。普通文本的对比度应至少为 4.5:1，大号文本（18pt 或 14pt 加粗）应至少为 3:1。
• AAA 级 (极高)： 针对具有更高无障碍要求的网站。普通文本对比度需达到 7:1，大号文本需达到 4.5:1。

如何使用本工具优化您的配色？

1. 输入颜色： 使用拾色器或直接输入 HEX 代码。
2. 观察数值： 对比率会自动更新。如果数值过低，请尝试调深文字或调浅背景。
3. 检查反馈： 查看下方的 AA/AAA 级检查结果，确保至少通过 AA 级验证。
4. 实时预览： 预览框会同步更新，让您直观感受阅读的舒适度。

常见问题 (FAQ)

Q: 什么样的文字算“大号文字”？
A: WCAG 定义大号文字为 18pt (约 24px) 或更大，或者 14pt (约 18.66px) 的加粗文字。

Q: 低对比度会影响 Google 排名吗？
A: 会的。Google 的 Lighthouse 工具和 PageSpeed Insights 都会检测无障碍性。如果对比度过低，可能会导致页面评分下降，进而间接影响搜索排名。

Q: 除了文字，图标也需要检查对比度吗？
A: 是的。根据 WCAG 2.1 的更新，关键的图形组件和界面元素（如输入框边框、功能图标）也应满足至少 3:1 的对比度。