Color Contrast Checker
Web & Design
100% in-browser
Pick a text and background color to check the WCAG contrast ratio and AA/AAA pass.
Almost before we knew it,
we had left the ground. — sample text preview
Contrast ratio
AA (normal)
AA (large)
AAA
How to use the Color Contrast Checker
- 1 Choose a text color and a background color.
- 2 See the live preview and contrast ratio.
- 3 Check the AA and AAA pass/fail badges.
About the Color Contrast Checker
Accessible text needs enough contrast against its background. WCAG requires at least 4.5:1 for normal text (AA) and 7:1 for AAA. This checker computes the ratio and tells you what passes.
It uses the official WCAG relative-luminance formula and runs in your browser.
Frequently asked questions
What ratio do I need?
4.5:1 for normal text (AA), 3:1 for large text, and 7:1 for AAA.
How is contrast calculated?
Using the WCAG 2.x relative luminance formula.
Related tools
More from us
