Design with readable color

Check contrast before you ship.

Compare foreground and background colors, preview real text, and check WCAG contrast thresholds. Your values stay in this browser.

Text color

Background color

Try a palette

Readable by designSample body text shows how this color pair feels.

—

AA normalAA largeAAA normal

Enter valid 3- or 6-digit hex colors.

WCAG 2.2 contrast ratio thresholds: 4.5:1 for normal text, 3:1 for large text, 7:1 for enhanced normal text. This is a design aid; check real UI states too.