颜色对比度检查器

什么是WCAG？

WCAG（Web Content Accessibility Guidelines，网页内容无障碍指南）是由W3C制定的网页无障碍标准，旨在确保网页内容对残障人士（包括视觉、听觉、运动、认知障碍等）具有可访问性。颜色对比度是WCAG中关于视觉可访问性的重要指标之一，确保文字内容对于色弱、视力低下的用户也能清晰阅读。

WCAG对比度标准

WCAG 2.1定义了两个级别的对比度要求：AA级（最低要求）和AAA级（最高要求），并且对普通文本和大文本有不同的标准。大文本的定义是：字号至少18pt（约24px），或者字号至少14pt（约18.66px）且为粗体。

AA级标准（双A级）

AA级是网站可访问性的基本要求。普通文本（小文本）的对比度至少需要达到4.5:1；大文本的对比度至少需要达到3:1。大多数国家和地区的政府网站、公共服务网站都要求至少达到AA级标准。

AAA级标准（三A级）

AAA级是最高级别的可访问性标准。普通文本的对比度至少需要达到7:1；大文本的对比度至少需要达到4.5:1。达到AAA级可以让几乎所有视力障碍用户都能正常阅读，但对设计的限制也更大，需要在美观与可访问性之间取得平衡。

为什么对比度很重要？

颜色对比度不足是网页可访问性问题中最常见的类型之一。根据WebAIM的调查，超过80%的网站存在可访问性问题，其中低对比度文本是重灾区。良好的对比度不仅对视障用户重要，对所有用户都有好处——在强光环境下（如阳光下使用手机）、低亮度屏幕、老化显示器等情况下，足够的对比度能确保内容可读。此外，提升可访问性往往也能提升整体用户体验。

对比度计算原理

WCAG的对比度计算公式基于相对亮度（Relative Luminance）。首先，将RGB颜色值转换为线性亮度值（gamma校正后），然后使用公式 L = 0.2126 × R + 0.7152 × G + 0.0722 × B 计算相对亮度。最后，对比度 = (较亮色亮度 + 0.05) / (较暗色亮度 + 0.05)。这个公式考虑了人眼对不同颜色波长的敏感度——人眼对绿光最敏感，对蓝光最不敏感。

使用方法

使用本工具非常简单：1）在左侧选择或输入前景色（文字颜色）和背景色；2）右侧自动显示实时预览和对比度检测结果；3）四个卡片分别显示AA级普通文本、AAA级普通文本、AA级大文本、AAA级大文本的通过/失败状态。可以点击"交换颜色"按钮快速切换前景色和背景色。

设计实践建议

在实际设计中，如何兼顾美观与可访问性？以下是一些实用建议：优先选择高对比度的配色方案，特别是正文文本；对于装饰性文字或品牌标识，可以适当放宽要求，但正文内容必须保证可读性；使用工具检测而非凭肉眼判断，因为人眼对对比度的感知并不准确，尤其是不同色相之间的对比；为重要操作按钮（如提交、确认）确保足够的对比度，避免因看不清而影响用户操作；如果一定要使用低对比度文字（如辅助信息、版权声明），至少保证非关键内容的可读性。