Developer

Color Contrast Checker

Pick foreground and background colors to compute the WCAG contrast ratio from relative luminance. See pass/fail badges for AA and AAA at normal and large text sizes, plus a live preview swatch with sample text.

Examples

Input

#1a1a1a on #ffffff

Output

≈ 17.4:1 — passes AA and AAA

How to use Color Contrast Checker

Pick your colors

Set the text and background colors with the pickers or hex inputs.

Read the ratio

See the contrast ratio computed from WCAG relative luminance.

Check compliance

Review pass/fail badges for AA and AAA at normal and large sizes.

Why use this tool

Computes accurate WCAG contrast ratios

Pass/fail badges for AA and AAA, normal and large text

Live preview swatch with real sample text

Accepts 3- or 6-digit hex and color pickers

Frequently asked questions

How is the contrast ratio calculated?

It uses the WCAG formula based on relative luminance of the two colors.

What are the AA and AAA thresholds?

AA requires 4.5:1 for normal and 3:1 for large text; AAA requires 7:1 for normal and 4.5:1 for large text.

Discussion

Share feedback or ask a question about this tool.

Comments are stored to a moderated queue via the API.