Try the free tool below. It runs in your browser, with no sign-up and no download.
What Is the WCAG Contrast Ratio Checker?
Text is readable only when it stands out enough from its background. The Web Content Accessibility Guidelines, known as WCAG, set minimum contrast ratios for text: 4.5 to 1 for normal text at AA level, 3 to 1 for large text at AA level, and stricter 7 to 1 and 4.5 to 1 ratios at AAA level. Our checker measures the ratio for any two colors and tells you at once which levels the pair passes.
The math uses relative luminance, which measures how bright a color looks to the human eye, not just its red, green, and blue numbers. The tool computes it with the tinycolor library in your browser, and it also previews your text in the two colors so you can judge it with your own eyes.
How to Use It
Pick a text color and a background color with the color pickers, or type hex values directly. The ratio updates as you change either color, and the four pass-or-fail results update with it. Press the swap button to reverse the pair and check the reverse combination too.
Try black text on white first: the ratio is 21 to 1, the highest possible, and it passes every level. Then try a mid-grey on white, and watch the ratio fall below the AA bar. That drop is why many grey text designs that look fine at a glance fail accessibility checks.
Why Contrast Matters
Low contrast hurts more people than most designers expect. It affects older readers, people with low vision, and anyone reading on a phone in bright sunlight. It also affects every reader when they are tired or reading fast. Good contrast is not only an accessibility rule; it is plain good design.
Many sites fail contrast checks on secondary text, such as captions, footnotes, and placeholder text in forms. Checking those small texts with this tool is a quick win, because fixing a color is usually a one-line change.
Choosing Colors That Pass
For body text, aim for AA normal at least, which means a ratio of 4.5 to 1 or higher. Dark text on a light background is the safest route. If you want a colored text, darken it until it passes, rather than lightening the background. For large headings, AA large at 3 to 1 is the minimum, but passing AA normal is better when you can.
Test every text-and-background pair you actually use, including buttons, links, and text over photos. A pair that passes on white may fail on a tinted background.
Frequently Asked Questions
What ratio do I need? For normal text, 4.5 to 1 for AA and 7 to 1 for AAA. For large text, 3 to 1 for AA and 4.5 to 1 for AAA.
What counts as large text? In WCAG, large text is at least 18 point, or 14 point bold.
Is my color choice sent to a server? No. The check runs in your browser.
Does passing contrast mean my site is accessible? No, but it is one of the most important and easiest checks to pass.
A Quick Contrast Audit for Your Site
Pick the five text styles your site uses most: body text, headings, links, captions, and button labels. For each one, note its text color and its background color, then run the pair through the checker and write down the ratio and the four results. Most sites pass body text easily and fail somewhere surprising, often a light grey caption on white or white text on a pale brand color. Fix the failures by darkening the text a step at a time until it passes, and test again after each step, because a small change is often enough. Do not rely on bold text to rescue a failing pair: bold helps readability, but the WCAG bar for normal text stays the same unless the text is genuinely large. Record the final pairs in your style guide, with their ratios beside them, so future designers keep the passing combinations instead of inventing new ones that fail. A one-hour audit like this fixes the most common accessibility complaint on the web, and it leaves you with a documented set of colors you can defend.
Repeat the audit whenever your brand colors change. A new brand palette is the most common moment when passing pairs quietly break, because nobody re-checks text that used to pass.
Also in Spanish
This tool is also available in Spanish: Verificador de Contraste WCAG – Supera las Pruebas AA y AAA.