Design tool
Contrast Checker
Compare a text color with a background color and see if the contrast passes WCAG.
Processed in your browser. The text is not sent to our servers.
How to check contrast
- Enter the text color in the main field.
- Enter the background color beside it.
- Click Check contrast and read the WCAG results.
The ratio uses relative luminance. Normal text AA needs 4.5:1, AAA needs 7:1, and large text AA needs 3:1.
Frequently asked questions
What does Pass mean?
The contrast ratio meets that WCAG threshold. Fail means it is below the threshold.
Are the colors uploaded?
No. The check runs in your browser.