Free accessibility tool · No sign-up

Color Contrast Checker

Test foreground and background colors against WCAG contrast thresholds for body text, large text, and interface components.

Check colors Accessible colors

AAAReadable by design

Foreground Background

Readable interfaces start with contrast.Preview normal text, labels, and controls before shipping.

17.74:1Contrast ratio

Connected encyclopedia

Matching this color…

Looking for an exact named-color record or the closest editorial color.

WCAG contrast explained

Check text and interface contrast before publishing

Normal text

WCAG AA requires a ratio of at least 4.5:1 for normal text. AAA raises the threshold to 7:1.

Large text

Large text passes AA at 3:1 and AAA at 4.5:1. Size and weight determine whether text qualifies as large.

UI components

Important controls, boundaries, focus indicators, and graphical objects generally need at least 3:1 against adjacent colors.

Use the result responsibly

Contrast ratio is one part of accessible design. Also test focus states, color-independent meaning, font size, spacing, zoom, and real content with assistive technology.