Contrast Checker

Check WCAG color contrast ratios. Ensure accessible text.

Text Color (Foreground)

Background Color

Compliance Suggestions

Contrast Ratio6.75:1Luminance: Text 0.320 | BG 0.005

AA Normal Text (4.5:1) PASS

AA Large Text (3.0:1) PASS

AAA Normal Text (7.0:1) FAIL

AAA Large Text (4.5:1) PASS

Interactive Sample Rendering

Normal Text (14pt / 16px)

Design is not just what it looks like and feels like. Design is how it works.

Large Text (18pt / 24px Bold)

Design is not just what it looks like and feels like. Design is how it works.

How it works

It measures the WCAG contrast ratio; real-world legibility also depends on font size, weight, and rendering. The tool reports the large-text thresholds separately.
It checks a single foreground/background pair, not an entire interface at once.

WCAG AA needs 4.5:1 for normal text and 3:1 for large text; AAA needs 7:1 and 4.5:1. The tool shows which levels your pair passes.

Larger, heavier text is easier to read, so WCAG allows a lower contrast threshold for it. The checker reports both cases.

No. The contrast calculation runs entirely in your browser.