What this tool does
It measures the contrast ratio between a text color and a background color, then compares that ratio to common WCAG accessibility targets.
Color Contrast Checker
Compare a text color and background color, preview them together, and see whether the pair passes common WCAG accessibility targets. The check runs entirely in your browser, so your colors never leave the page.
Preview
Readable sample text
Use this preview to see how the chosen text and background colors look together on a typical interface card.
Contrast ratio
--
Normal text AA
--
Normal text AAA
--
Large text AA
--
Large text AAA
--
Choose any two colors to see how readable they are together.
Why it is private
The color math and accessibility checks happen entirely in the browser, so your palette experiments are never sent to the server.
What the results mean
Higher contrast ratios usually improve readability. WCAG AA is the common baseline target, while AAA is stricter and aims for stronger readability.
What it is useful for
- Checking interface colors before publishing a design.
- Comparing dark mode and light mode text combinations.
- Making buttons, labels, and body text easier to read.