Contrast Checker
Check the contrast ratio between text and background colors against WCAG AA and AAA standards, with a live preview.
How it works
- 1
Configure
Adjust the controls for Contrast Checker to taste.
- 2
Preview live
See the result update instantly as you change settings.
- 3
Copy or download
Copy the generated code, or download the asset — ready to use.
Common uses
- Verify body text passes WCAG AA before shipping a design system token.
- Pick an accessible link color against a brand background.
- Audit a button's text/background pair for AAA compliance.
About the Contrast Checker
Check the contrast ratio between text and background colors against WCAG AA and AAA standards, with a live preview.
Contrast Checker is part of a free, privacy-first toolkit. Output is rendered live in your browser and ready to copy or download — no account, no watermarks and nothing sent to a server.
Because contrast checker works without any sign-up or installation, you can use it as often as you like and it's always available — on desktop or mobile, and even offline.
Explore more design tools, or try QR Code Generator · Barcode Generator.
Related tools
Related guides
Contrast Checker — FAQ
AA needs 4.5:1 for normal text and 3:1 for large text; AAA needs 7:1 and 4.5:1 respectively. The checker shows each result live.