Check WCAG Contrast for Accessible Text

适用场景

Use this when you are picking foreground and background colors for UI or content. Enter two sRGB hex colors, compare the ratio to WCAG thresholds, and iterate before you ship.

要使用的工具

两色十六进制对比度比与 AA/AAA 参考。

打开 WCAG 对比度 →

步骤

  1. 1Enter the text (foreground) color as #RRGGBB or #RGB.
  2. 2Enter the background color the same way.
  3. 3Read the contrast ratio and which WCAG rows pass or fail.
  4. 4Adjust colors until you meet your target (often AA for body text).
  5. 5Re-check after real content is placed (long paragraphs, small labels).

示例

  • Gray #111827 on white #ffffff for long-form reading.
  • Brand accent button: ensure both default and hover states still pass.

应避免

  • Checking only one breakpoint while responsive themes change colors.
  • Ignoring non-text UI that still needs discernible boundaries.
  • Trusting contrast on gradients without sampling worst-case points.

相关工具

博客

图片工具 中的更多内容

所有任务指南 或前往 图片工具 专区.

常见问题

Does this replace an audit?

No. It is a fast sRGB check. Full audits cover motion, structure, and more.

Non-hex inputs?

This tool expects hex. Convert from HSL/RGB elsewhere first.

所有任务指南 · 图片工具 工具 · 博客