Image

Color Contrast Analyzer

WCAG contrast ratio for two colors.

Text color

Lightness 100%

Background color

Lightness 1%

Sample large text

The quick brown fox jumps over the lazy dog.

—

Contrast ratio

—

AA normal (4.5)

—

AAA normal (7)

—

AA large (3)

—

AAA large (4.5)

—

UI / graphics (3)

This free color contrast analyzer computes the WCAG contrast ratio between a text color and a background color and tells you whether it passes AA and AAA requirements for normal text, large text, and UI components. Enter hex values, use the native color pickers, or drag the lightness sliders to nudge either color and watch the ratio update live.

When a pairing fails, hit Auto-fix and the tool finds the nearest lightness for the text color that passes AA (4.5:1), keeping its hue and saturation intact. Meeting 4.5:1 for body text and 3:1 for large text and UI keeps your interface readable.