a11y.skipToMainContent
1

颜色对比检查器( WCAG)

选择一个前景和背景颜色,并立即看到WCAG 2.1与AA和AAA的通过/失败徽章的对比比,普通和大文本. 包括现场预览.

Contrast ratio
21.0:1
AA Normal
≥ 4.5:1
AA Large
≥ 3:1
AAA Normal
≥ 7:1
AAA Large
≥ 4.5:1

Normal body text — The quick brown fox jumps over the lazy dog.

Large heading — Sample preview

Large text = 18pt+ or 14pt+ bold. WCAG 2.1 thresholds.

Was this tool helpful?
Send output to:
Advertisement

How to use Color Contrast Checker

  1. 选择前景和背景颜色.
  2. 读取对比比和通过/失效徽章.
  3. 使用互换或倒置 FG 来测试替代 .

{姓名}是什么来着?

WCAG 2.1定义了可读文本的对比最小值:普通文本为4.5:1,大文本为3:1,普通文本为7:1,大文本为4.5:1. 大文本被定义为18pt+或14pt+粗体. 此工具使用WCAG spec中的相对发光公式来计算比值.

Advertisement

FAQ

什么是大字报?
18pt+(24px)常重,或14pt+(18.66px)粗体. 大多数h1/h2元素符合条件.
非文本 UI 元素怎么办 ?
WCAG 2.1为UI组件(按钮边框,窗外框)和有意义的图标需要3:1对比. AA大警徽差不多是这样的.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

Advertisement