Contrast Checker

检查WCAG颜色对比度。

Aa

Large Text Preview

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

12.68
Contrast Ratio
WCAG AA
✓ Normal Text (≥4.5)✓ Large Text (≥3.0)
WCAG AAA
✓ Normal Text (≥7.0)✓ Large Text (≥4.5)

WCAG 2.1

Check AA and AAA compliance levels.

Live Preview

See text on background in real-time.

Color Picker

Pick foreground and background colors.

Client-side

All processing in your browser. No data uploaded.

关于Contrast Checker

WCAG Contrast Checker instantly calculates the contrast ratio between any two colors and tells you whether that combination meets the Web Content Accessibility Guidelines (WCAG 2.1) for legibility. Accessible color contrast is essential for users with low vision or color-blindness and is a core requirement for legal compliance in many jurisdictions. WCAG defines two conformance levels: AA (the minimum acceptable standard) requires a ratio of at least 4.5:1 for normal text and 3:1 for large text, while AAA (the enhanced level) demands 7:1 for normal text and 4.5:1 for large text. Enter your foreground (text) and background colors using the color pickers or HEX input fields, and the tool computes the ratio in real time. A live preview shows sample text so you can judge readability at a glance, not just by numbers alone.

如何使用Contrast Checker

  1. Click the "Text Color" picker or type a HEX value to set your foreground color.
  2. Click the "Background" picker or type a HEX value to set your background color.
  3. Read the contrast ratio displayed prominently in the center — green means accessible, yellow means marginal, red means failing.
  4. Check the WCAG AA and AAA result badges to see exactly which levels pass or fail.
  5. Use the swap button (⇄) to quickly reverse the foreground and background colors.
  6. Adjust one or both colors until all required WCAG badges show a pass checkmark.

常见问题

What contrast ratio do I need to pass WCAG AA?

Normal body text needs a ratio of at least 4.5:1. Large text (18pt/24px or 14pt/18.67px bold) needs at least 3:1.

What is the difference between WCAG AA and AAA?

AA is the widely adopted minimum standard. AAA is the enhanced level requiring higher ratios (7:1 for normal text) and is typically targeted by government and healthcare sites.

My ratio is 4.2 — how do I fix it?

Darken the text color or lighten the background (or vice versa) until the ratio reaches 4.5. Even small adjustments to lightness can push a near-miss to a pass.

Does this tool handle semi-transparent colors?

The tool works with opaque HEX colors. If you are using rgba with transparency, first calculate the effective blended color on its background before testing.

Can I test colors for non-text elements like icons?

WCAG 1.4.11 (Non-text Contrast) requires a 3:1 ratio for UI components and icons. Use the Large Text AA badge as a proxy for that requirement.

Contrast Checker 完全使用指南与免费在线工具

无需安装、完全免费、纯前端本地运行的高效 Contrast Checker 工具

用于快速解决：检查WCAG颜色对比度。。无需安装复杂软件，打开网页即可立即使用，极速且安全。

为什么选择 Metoolzy 的 Contrast Checker？

  • 秒级即时响应: 极致性能优化，输入即可见结果。
  • 数据绝对安全: 纯浏览器本地计算，数据绝不上传服务器。
  • 完全免费使用: 无需注册登录，无任何隐形消费。

三步快速上手

  1. 打开 Metoolzy Contrast Checker 工具页面。
  2. 在输入区粘贴或上传您的数据。
  3. 即时查看处理结果并点击复制或下载。

功能对比表

对比项 Metoolzy Contrast Checker 普通在线工具 本地客户端软件
使用成本 永久免费 有次数限制或收费 需购买授权
隐私保护 纯本地内存运行 数据需上传云端 本地运行

适用人群与应用场景

  • 软件开发人员日常调试与数据转换
  • UI/UX 设计师资产处理
  • 运营与办公人员效率提升

常见问题解答 (FAQ)

处理的数据会被记录或保存吗？

绝不会。所有运算均在您的浏览器本地完成，没有任何数据回传。