A browser-only color tool
See how your colors read.
Choose a foreground and background, compare their contrast, and see the pair on text and button samples.
01 / Choose
Your colors
Use a picker or enter a 3- or 6-digit hex value.
Foreground
This color is used for text and button outlines.
Background
This color fills the preview surface.
Try a pair
02 / Check
Contrast results
The ratio compares these two colors only.
Contrast ratio
:1
Waiting for colors
Normal textAA · at least 4.5:1
—
Normal textAAA · at least 7:1
—
Large textAA · at least 3:1
—
Large textAAA · at least 4.5:1
—
Essential UI detailsAA · at least 3:1
—
A passing pair does not assess every color, state, or element in an interface. Check each meaningful combination separately.
03 / Preview
See the pair in use
Samples use your selected foreground and background colors.
Large text · 24 px
Clear choices start with readable colors.
Normal text · 16 px
This sample shows how regular text looks against the chosen background. Compare both colors before using them in a real interface.