颜色对比度检查器
用取色器或输入 3 位/6 位十六进制代码设定文字（前景）色和背景色，工具会计算 WCAG 2 对比度，并同时按四个常用门槛评级：普通文字和大号文字各自的 AA 与 AAA。其原理是把每种颜色从伽马编码的 sRGB 转换为线性光，按 WCAG 系数（R 0.2126、G 0.7152、B 0.0722）加权得到相对亮度，再计算 (L1 + 0.05) ÷ (L2 + 0.05)。对比度范围从 1:1（颜色相同）到 21:1（白底黑字）。 通过/未通过的阈值直接取自 WCAG 2.1 成功标准 1.4.3 和 1.4.6：普通文字 AA 需 4.5:1、AAA 需 7:1；大号文字（≥ 24px，或加粗 ≥ 18.66px）需 3:1 和 4.5:1。实时预览会以正文和标题两种字号展示你的配色——数学上通过的组合，仍值得用眼睛再确认一遍。所有计算都在你的浏览器本地完成。
视觉无障碍设计让人人都能轻松阅读
视觉无障碍设计让人人都能轻松阅读
使用方法
- 用取色器或输入十六进制代码设置前景（文字）颜色——#RGB 和 #RRGGBB 两种写法都支持。
- 用同样方式设置背景颜色。
- 查看对比度和四个 AA/AAA 徽章——绿色表示通过，红色表示未通过。
- 在正文和标题两种字号下查看实时预览；如果某组配色勉强通过，不妨把其中一色调深或调浅，让阅读更舒适。
常见问题
- AA 和 AAA 要求多少对比度？
- WCAG 2.1 成功标准 1.4.3（AA）要求普通文字 4.5:1、大号文字 3:1；1.4.6（AAA）提高到 7:1 和 4.5:1。大多数法规和采购标准引用的是 AA；AAA 是追求最高可读性的更严格目标。
- 什么算大号文字？
- 至少 18pt（24px），或加粗时至少 14pt（18.66px）。WCAG 用磅定义阈值，像素换算按标准的 96 dpi CSS 比例，因此 24px 的普通标题或 19px 的加粗标签都算。
- 这些对比度适用于图标和界面组件吗？
- WCAG 2.1 新增了 1.4.11（非文字对比度）：界面组件、焦点指示器和有意义的图形与相邻颜色的对比至少要 3:1。这与 AA 大号文字徽章的阈值相同，可以拿它来快速检查图标和边框。
- 支持透明度吗？
- 不支持——对比度只对不透明颜色有定义。如果文字或蒙层带有透明度，请先与真实背景合成（白底上 60% 的黑实际上是 #666666），再用合成后的颜色检测。
- WCAG 2 公式是可读性的最终结论吗？
- 它是规范性标准——被 ADA 案例、EN 301 549 和 Section 508 引用——但并不完美：它往往高估深底浅字（暗色模式）组合的可读性。WCAG 3 草案中的 APCA 模型正是为改进这一点；在其落地之前，请满足 WCAG 2 的对比度，并用预览亲眼确认。
相关主题指南
相关工具
色盲模拟器
查看你的图片对 8 种色觉异常（CVD）人群分别如何呈现。
颜色亮度对比 (HSL vs Lab L* vs WCAG vs HSP)
对一种或两种颜色并行比较 HSL 亮度、HSV 值、WCAG 相对亮度(LRV)、CIE Lab L*(感知亮度)、Rec. 709 Luma、HSP 感知亮度与朴素 (R+G+B)/3 共七种亮度指标,通过差值揭示为何「更亮」的颜色反而显得更暗。
CSS 滤镜演练场
可视化组合 blur、brightness、contrast、hue、sepia、invert 等 9 项——复制 CSS 滤镜或 Tailwind 任意值。
调色板生成器
选择基色，得到经典色环和谐配色 —— 互补、分裂互补、三色、四色、正方、类似、单色。
CSS 渐变生成器
用多色停靠点设计线性或径向 CSS 渐变并复制代码。
颜色格式转换器
在 HEX、RGB、HSL、HSV、OKLCH 与 CSS 变量之间互转任何颜色。