TOOLGRID
65 TOOLS

CSS 與色彩

Color Contrast Checker

Check foreground-background color contrast against WCAG 2.1 AA and AAA thresholds for text and UI.

浏览器内处理即时输出本地数据

對比度

17.35:1

內文 AA

通過

內文 AAA

通過

大字 AA

通過

大字 AAA

通過

UI 元件 AA

通過

為什麼用這個工具

03

Enter two colors and instantly see the WCAG 2.1 contrast ratio plus pass/fail results for normal text, large text, and non-text UI components.

Color Contrast Checker computes the exact luminance-based contrast ratio between a foreground and background color.

It flags compliance with WCAG 2.1 AA and AAA thresholds for normal text (4.5:1, 7:1), large text (3:1, 4.5:1), and non-text UI (3:1).

怎麼使用

03
01Pick foreground and background colors using the color picker or paste a hex/rgb value.
02Read the ratio and AA/AAA indicators — all thresholds are shown side-by-side.
03Press Swap colors to quickly invert and re-check.

複製前快速檢查

03

先确认输入格式符合你的预期。

在把结果用于文档、链接、配置或消息前快速扫一眼。

只复制你真正需要的输出。

常見問題

03
What's the difference between AA and AAA?

AA is the baseline required by most accessibility regulations. AAA is a stricter enhanced level. For normal text, AA is 4.5:1 and AAA is 7:1; for large text, AA is 3:1 and AAA is 4.5:1.

What counts as large text?

WCAG defines large text as at least 18pt (24px) regular, or 14pt (18.66px) bold. Anything smaller falls under the normal text thresholds.

How is the ratio calculated?

We follow WCAG 2.1's formula: convert each color to sRGB relative luminance, then compute (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter of the two. The ratio ranges from 1:1 to 21:1.

相關工具

01

Color Converter

Convert colors between Hex, RGB, HSL, and OKLCH with a live swatch and hue slider.