Color Contrast Checker

色彩对比度检查器可分析两个颜色之间的对比度比值，并根据 WCAG（Web 内容无障碍指南）标准评估其可读性和无障碍合规性。工具支持 HEX、RGB、HSL 等多种颜色格式输入，自动计算相对亮度（Relative Luminance）和对比度比率，同时判断是否符合 AA 级和 AAA 级标准。你可以调整前景色和背景色实时预览文本在相应配色下的视觉效果，直观感受不同对比度对可读性的影响。

色彩对比度检查器是前端开发和无障碍设计的必备工具。在开发网页或应用界面时，开发者需要确保文本与背景之间有足够的对比度，以满足 WCAG 2.1 的无障碍标准。UI/UX 设计师使用它来验证设计方案中的配色是否合规，帮助视障用户也能正常浏览内容。产品经理和 QA 测试人员利用它对上线前的界面进行无障碍审查。

搭配 颜色选择器 可以精确获取网页元素的颜色值，或使用 调色板生成器 创建符合无障碍标准的配色方案。

WCAG 对比度计算基于两种颜色的相对亮度（Relative Luminance），公式如下：对于 sRGB 颜色空间中的每个通道，先做伽马校正（如果通道值 ≤ 0.04045，则除以 12.92；否则进行 ((v + 0.055) / 1.055) ^ 2.4 变换），然后加权求和：L = 0.2126 × R + 0.7152 × G + 0.0722 × B。对比度比率 = (L1 + 0.05) / (L2 + 0.05)，其中 L1 为较亮颜色的相对亮度。

• AA 级（正常文本）：对比度 ≥ 4.5:1（18px 以下文本）
• AA 级（大文本）：对比度 ≥ 3:1（18px 加粗或 24px 以上文本）
• AAA 级（正常文本）：对比度 ≥ 7:1
• AAA 级（大文本）：对比度 ≥ 4.5:1

• 图标和装饰元素：纯装饰性元素不受对比度要求限制，但功能性图标（如按钮图标）需要满足对比度要求。
• 渐变背景：文本在渐变背景上时，应在最不利的位置检查对比度，确保整个文本区域都可读。
• 暗色模式：深色背景上浅色文本的对比度同样需要满足标准，不要忽视暗色模式的对比度检查。
• 图片文字：嵌入在图片中的文字无法自动检测对比度，建议使用真实文本替代图片文字。

在设计阶段进行配色方案验证、审查第三方组件的颜色合规性、或在代码审查中快速验证 CSS 颜色组合时使用此工具。对于持续集成中的自动化无障碍检查，推荐使用 axe-core、Lighthouse 或 Pa11y 等工具，它们可以批量检测整个页面的所有对比度问题并提供详细的修复建议。