颜色对比度检查（WCAG）

检查前景/背景色对是否符合 WCAG AA 和 AAA 无障碍标准。

工作台 · 中性环境

对比度

— : 1

AA · 正文 ≥ 4.5

AA · 大号文字 ≥ 3.0

AAA · 正文 ≥ 7.0

AAA · 大号文字 ≥ 4.5

一键修复 · 保持色相

文字颜色

背景色

样张

功能特性

显示对比度数值

WCAG AA / AAA 达标状态

文字效果实时预览

普通文本与大号文本

使用方法

1. 设置文字色和背景色 —— 样张与 WCAG 判定实时更新。

2. 切换样张（字体样张 / 文章 / 界面）在真实场景中审视这对颜色；按 S 键交换两色。

3. 某一级不达标时，用一键修复 —— 只调整明度、保持色相 —— 或复制 WCAG 报告。

关于这个工具

文字和背景的亮度太接近，所有人都会读得吃力，有些人则根本看不清。《Web 内容无障碍指南》（WCAG）用对比度来衡量这一点，取值从 1:1 到 21:1，依据是两种颜色的相对亮度。AA 级要求正文至少 4.5:1、大号文字（24px，或约 18.66px 粗体）至少 3:1；AAA 级把要求提高到 7:1 和 4.5:1。这个检查器实时计算对比度，显示四个标准是否通过，并渲染真实的字体样张、文章和界面，让你在实际场景中判断配色。如果某一级不达标，它会只调整明度，给出最接近的达标文字颜色。

常见问题

对比度是怎么计算的？

先用 WCAG 2 中的 sRGB 公式把每种颜色换算成相对亮度，然后计算 (L1 + 0.05) ÷ (L2 + 0.05)，其中 L1 是较亮的颜色。白底黑字是最大值 21:1，两种相同颜色是 1:1。

什么算“大号文字”？

WCAG 规定大号文字是至少 18 磅（24 CSS 像素）的常规字重，或至少 14 磅（约 18.66 CSS 像素）的粗体。字形越大越容易辨认，所以大号文字 AA 只需 3:1，AAA 只需 4.5:1。

通过 AA 就代表设计无障碍了吗？

对比度只是众多要求之一。细字体、压在照片上的文字、过小的字号、只用颜色传达信息，都可能造成阅读障碍，所以还要在真实屏幕上测试，并配合其他无障碍检查。

建议的修正是怎么算出来的？

它保持文字颜色的色相不变，逐步尝试更亮或更暗的版本，直到达到目标对比度。如果在当前背景下怎么调明度都达不到，工具会提示你需要改背景色。

图标和按钮也要满足对比度要求吗？

要。WCAG 2.1 要求图标、输入框边框、焦点指示等有意义的非文字元素至少达到 3:1。纯装饰性的图形和禁用状态的控件不受此限。

颜色对比度检查（WCAG）

功能特性

使用方法

关于这个工具

常见问题

相关工具