Color Contrast Checker
Test a text color against a background and see the WCAG contrast ratio with AA and AAA pass or fail results and a live preview. Runs in your browser.
Part of 🎨 Free Color Tools
Normal text sample (16px)
Large text sample (24px bold)
✔ 100% Free✔ No Signup✔ No Watermark✔ Unlimited Use
Check Color Contrast for Accessibility
This free color contrast checker measures how readable a text color is on a background using the official WCAG formula. Pick a text color and a background, and you instantly get the contrast ratio plus clear pass or fail results for AA and AAA at normal and large text sizes, with a live preview of real text.
Everything runs in your browser, with no signup. Meeting contrast guidelines makes your site easier to read for everyone, including people with low vision, and is a common requirement for accessibility compliance.
How to Use the Color Contrast Checker
- 1Pick your text color and background color.
- 2Read the contrast ratio and the AA and AAA results.
- 3Check the live preview to see how the text actually looks.
- 4Adjust the colors until you get the passes you need.
Why Use MakeToolz's Color Contrast Checker?
WCAG AA and AAA
Shows pass or fail for AA and AAA at both normal and large text sizes.
Exact contrast ratio
Calculates the precise ratio using the official WCAG luminance formula.
Live text preview
See real normal and large text on your chosen background as you adjust.
Instant feedback
Results update the moment you change either color.
100% in your browser
No signup and nothing uploaded; it all runs locally.
Free and unlimited
Check as many color pairs as you like, free.
Why Contrast Matters
Low-contrast text is one of the most common accessibility problems on the web. When the text color and background are too close in brightness, the words become hard to read, especially on phones in sunlight or for people with reduced vision. The WCAG guidelines set minimum contrast ratios so that content stays readable, and many organizations require meeting them. This checker gives you the exact ratio and tells you at a glance whether a color pair passes.
It runs entirely in your browser and updates instantly, so you can fine-tune a text and background color until it comfortably passes. There is no signup and no limit.
Reading the Results
- Ratio: the measured contrast, from 1:1 (identical) up to 21:1 (black on white).
- AA normal: needs 4.5:1, the standard target for body text.
- AA large: needs 3:1, for headings and large text.
- AAA: the stricter level at 7:1 and 4.5:1, for the highest readability.
WCAG Contrast Requirements
| Level | Normal text | Large text |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
People Also Ask
How do I check color contrast?
Pick a text color and a background above. The tool shows the contrast ratio and whether it passes WCAG AA and AAA, with a live text preview.
What is the minimum contrast for text?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text. Aim for those as a baseline, and 7:1 for the strictest AAA level.
Does contrast apply to buttons and icons?
Yes. Interactive elements and meaningful icons should also meet contrast against their background so they are easy to see.
Is the contrast checker free?
Yes, completely free with no signup and no limits. Everything runs in your browser.
What if my colors fail AA?
Darken the text or lighten the background (or the reverse) until the ratio reaches 4.5:1. Small changes often push a pair over the line.
Why is black on white 21:1?
Pure black and pure white are the most different a screen can show, so they produce the maximum possible contrast ratio of 21 to 1.
Frequently Asked Questions
What is a good contrast ratio?
What counts as large text?
Why does contrast matter?
Is my color data uploaded?
Related Free Tools
More Color Tools
CSS Gradient GeneratorImage Color PickerRGB to Hex ConverterColor Mixer