🎨 在线颜色对比度检查器

使用教程

颜色对比度检查器是一个帮助设计师和开发者确保网页可访问性的实用工具。以下是详细的使用指南：

选择颜色：在工具顶部，你可以看到两个颜色选择区域——「前景色（文字）」和「背景色」。点击颜色选择器可以直接从调色板中选取颜色，或在旁边的输入框中输入颜色代码（支持HEX、RGB、HSL格式）。选择颜色后，工具会实时计算对比度比率并更新WCAG合规性检测结果。

解读对比度比率：对比度比率越大，表示两种颜色之间的明暗差异越大，可读性越好。例如黑色文字配白色背景对比度为21:1，而浅灰色文字配白色背景可能只有2:1。WCAG标准规定：AA级小号文本需要≥4.5:1，AAA级小号文本需要≥7:1。工具会在结果区域用✅/❌直观显示是否达标。

使用预设方案：如果你不确定选择什么颜色，可以点击下方的「预设配色方案」区域，这里提供了多种经过验证的安全配色组合。点击任意方案即可自动应用到工具中。你也可以使用「随机颜色」按钮快速生成配色灵感，或使用「交换颜色」和「反转颜色」功能快速测试不同组合。

应用场景

颜色对比度检查器在网页设计、UI设计和无障碍开发中有广泛应用：

网页无障碍检测：在开发网站时，确保文字与背景之间有足够的对比度是无障碍设计的基本要求。使用本工具可以实时检测你的设计是否符合WCAG AA或AAA标准，帮助色弱、色盲和老年用户也能清晰阅读内容。许多国家的法律法规（如美国ADA、欧盟EN 301 549）都要求网站满足WCAG标准。

UI设计审核：在设计系统或组件库时，需要确保所有文本在不同背景色上的可读性。设计师可以使用本工具批量检查按钮、卡片、弹窗等组件的颜色组合，提前发现对比度不足的问题，避免设计返工。结合设计工具（如Figma、Sketch）的插件使用效果更佳。

品牌配色优化：企业在制定品牌色时，往往需要确保主色调与各种背景色的对比度达标。使用本工具可以验证品牌色在不同场景下的可用性，确保从宣传物料到网站设计的视觉一致性。例如，验证LOGO在深色和浅色背景上的显示效果，或检查产品界面中的信息层级。

扩展知识

对比度计算公式：WCAG对比度比率基于颜色的相对亮度（Relative Luminance）计算。首先将sRGB值（范围0-255）归一化，然后计算每个通道的线性值，最后组合得到相对亮度L。公式为：L = 0.2126 * R + 0.7152 * G + 0.0722 * B。对比度比率 = (L1 + 0.05) / (L2 + 0.05)，其中L1为较亮的颜色，L2为较暗的颜色。

色觉缺陷模拟：约8%的男性和0.5%的女性存在某种形式的色觉缺陷（色盲）。最常见的类型是红绿色盲（Deuteranopia和Protanopia），其次是蓝黄色盲（Tritanopia）。高对比度不仅帮助色觉缺陷用户，还能在强光环境、低亮度屏幕或投影演示等场景下提升可读性。

相关标准与法规：除了WCAG，还有许多与颜色对比度相关的标准和指南。例如ISO 9241-307（办公设备的图像质量标准）、Section 508（美国联邦政府IT无障碍标准）以及WAI-ARIA规范。了解这些标准有助于构建真正包容的Web体验。