对比度检测工具

What Is the Contrast Ratio Checker?

The contrast ratio checker measures the visual difference between a foreground text color and a background color, then checks the result against WCAG 2.1 accessibility standards. It tells you instantly whether a color pair passes AA or AAA for normal text and large text.

Good color contrast is essential for users with low vision, color blindness, or anyone reading in bright sunlight. Most accessibility audits and legal standards require WCAG 2.1 Level AA compliance.

How to Use the Contrast Ratio Checker

1. Click the foreground color swatch or type a hex code to set the text color.
2. Click the background color swatch or type a hex code to set the background color.
3. The contrast ratio and WCAG pass/fail results update in real time.
4. Use the ⇅ Swap button to quickly reverse foreground and background.
5. Use the presets to test common color combinations.

Features

• Real-time contrast ratio calculation using the WCAG 2.1 formula
• Checks WCAG AA and AAA for both normal and large text (4 pass/fail badges)
• Live text preview at large, normal, and small sizes
• Color input via picker or hex code
• One-click swap of foreground and background
• 6 preset color pairs for quick reference
• Copy ratio to clipboard

FAQ

What is WCAG contrast ratio?

WCAG (Web Content Accessibility Guidelines) defines contrast ratio as the ratio of relative luminance between the lighter and darker color in a pair. It ranges from 1:1 (no contrast) to 21:1 (maximum contrast, black on white). Higher ratios mean better readability for users with low vision.

What is the difference between WCAG AA and AAA?

WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Level AAA requires 7:1 for normal text and 4.5:1 for large text. AA is the standard legal and industry requirement; AAA is for enhanced accessibility.

What counts as "large text" in WCAG?

WCAG defines large text as at least 18pt (24px) regular weight, or at least 14pt (~18.67px) bold. Text smaller than these sizes is subject to the normal text contrast requirements.

How is contrast ratio calculated?

Contrast ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the luminance of the darker color. Relative luminance is calculated from linearized sRGB values using the formula defined in WCAG 2.1.