Color Contrast Checker
Pick a text color and a background color. Live preview and WCAG results shown. Click suggested colors to copy.
-
Contrast ratio
-
WCAG AA (Normal)
-
WCAG AAA (Normal)
Aa — Sample Heading
This is a live preview. Use the color pickers to experiment with text and background colors. Accessibility suggestions appear on the right.
Best of Black / White
#FFFFFF
#000000
Computed Accessible Text
—
Copy tips
Click a color chip to copy its hex code. Use "Copy CSS" to copy the CSS rule for the preview.
Accessibility
This tool checks relative luminance and contrast ratio per WCAG formula. It also suggests accessible alternatives by nudging the foreground color towards black or white until the target ratio is met.