👁️Color Contrast Checker

Check WCAG color contrast ratios for accessibility

Foreground (text)

Background

Almost before we knew it,

we had left the ground. The quick brown fox jumps over the lazy dog.

Contrast ratio

14.68:1

AA — Normal text (≥4.5)Pass

AA — Large text (≥3)Pass

AAA — Normal text (≥7)Pass

AAA — Large text (≥4.5)Pass

Want a deeper walkthrough? Read our complete guide to Color Contrast Checker →

About the Color Contrast Checker

Color Contrast Checker measures the WCAG contrast ratio between a text color and its background, then tells you whether it passes AA and AAA accessibility levels for normal and large text. A live preview shows how the combination actually looks.

It uses the official WCAG relative-luminance formula and runs entirely in your browser.

Common use cases

Verifying text is readable against its background
Meeting WCAG 2.1 AA/AAA accessibility requirements
Choosing accessible brand and UI colors
Auditing buttons, links, and labels for contrast

How to use the Color Contrast Checker

Set the foreground (text) color via the picker or a HEX/RGB value.
Set the background color the same way.
Read the contrast ratio and the AA/AAA pass or fail badges.

Frequently asked questions

What contrast ratio do I need?

WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively.

What counts as "large" text?

Roughly 18pt (24px) regular, or 14pt (18.66px) bold and larger. Large text is allowed a lower contrast threshold.

Which color formats are supported?

HEX (#fff or #ffffff) and rgb()/rgba() values, plus the native color picker.