Color Contrast Checker

コントラスト比

検証済TESTED

FOREGROUND

BACKGROUND

The quick brown fox

Normal body text at this pairing.

CONTRAST RATIO

12.68:1

Excellent

AA · normal

4.5:1

PASS

AA · large

3:1

PASS

AAA · normal

7:1

PASS

AAA · large

4.5:1

PASS

Type a hex value or use the picker. Ratios follow the WCAG 2.1 relative-luminance formula.

How it works

仕組み

Color contrast is the ratio between the luminance of your text and its background. The WCAG guidelines set minimum ratios so text stays readable for people with low vision: 4.5:1 for normal text at AA, 3:1 for large text, and a stricter 7:1 for AAA. Pick a foreground and background below and the ratio updates live, with a pass or fail for each level.

What counts as 'large' text?

WCAG treats text as large at roughly 24px (18.66px if bold) and up. Large text only needs a 3:1 ratio at AA, versus 4.5:1 for normal body text.

AA or AAA, which should I target?

AA (4.5:1) is the common legal and practical baseline. AAA (7:1) is a stronger goal worth hitting for body text where you can, but it's not always achievable with brand colors.

Why does the ratio ignore opacity and font?

The formula uses only the two solid colors' relative luminance. Semi-transparent layers, anti-aliasing, and font weight all affect real legibility, so treat the number as a strong guide, not the whole story.