关于WCAG 色彩对比度
色彩对比度是衡量前景色与背景色之间亮度差异的指标，对 Web 可访问性（Accessibility，a11y）至关重要。WCAG（Web Content Accessibility Guidelines，Web 内容无障碍指南）2.1 规定了文本与背景的最低对比度要求，确保色盲、低视力用户也能阅读内容。色彩对比度不足是无障碍合规检查中最常见的问题之一。
在前端开发中，开发者常需要校验配色方案的对比度是否符合 WCAG 标准：检查正文文字与背景的对比度是否达到 AA 级（4.5:1）、检查大号文字是否符合 AA 级（3:1）、检查 UI 组件是否符合 AAA 级（7:1）等。手动计算对比度既繁琐又易错，借助专门工具可以瞬间完成。
本色彩对比度检测工具基于 WCAG 2.1 标准计算前景色与背景色的对比度，自动判断是否符合 AA、AAA 级标准。所有计算在浏览器本地完成，无需联网。
核心特性
WCAG 标准计算
基于 WCAG 2.1 标准计算前景色与背景色的对比度比值，结果准确可靠。
AA / AAA 等级判断
自动判断对比度是否符合 AA 级（普通文字 4.5:1、大号文字 3:1）与 AAA 级（普通文字 7:1、大号文字 4.5:1）。
实时预览
显示当前配色下的文字效果预览，所见即所得，便于调整。
多格式输入
支持 HEX、RGB、HSL 等多种颜色格式输入，方便快速测试。
本地处理零上传
所有计算在浏览器内完成，无需联网。
使用场景
无障碍合规检查
检查网站配色是否符合 WCAG AA / AAA 标准，避免因对比度不足导致无障碍合规问题。
设计稿配色验证
设计师在 Figma、Sketch 中确定的配色方案，使用本工具校验对比度是否符合可读性要求。
暗色主题适配
开发暗色主题时，校验前景色与暗背景的对比度是否达标，确保可读性。
UI 组件设计
设计按钮、表单、标签等 UI 组件时，校验文字与背景的对比度，提升用户体验。
常见问题
WCAG AA 与 AAA 有什么区别？
AA 是基本无障碍标准，要求普通文字对比度 ≥ 4.5:1、大号文字（18pt 或 14pt 加粗）≥ 3:1；AAA 是更高标准，要求普通文字 ≥ 7:1、大号文字 ≥ 4.5:1。建议至少满足 AA 级。
对比度是怎么计算的？
WCAG 对比度 = (L1 + 0.05) / (L2 + 0.05)，其中 L1 与 L2 分别为前景色与背景色的相对亮度（基于 sRGB 色彩空间计算），结果范围为 1:1 到 21:1。
我的配色看起来对比度足够但工具判断不达标？
人眼对颜色的感知存在错觉，特别是对黄底黑字、蓝底白字等组合。WCAG 对比度是基于亮度的客观计算，请以工具判断为准。
大号文字的标准是什么？
WCAG 定义大号文字为至少 18pt（24px）普通字体或 14pt（18.66px）加粗字体。大号文字的对比度要求较低，因为大字本身更易阅读。