Large text preview
Normal body text looks like this — readable color pairs keep their edges crisp and their meaning clear at small sizes.
Check color contrast and pass WCAG
This free contrast checker tells you whether two colors are readable together. Set a text color and a background color, and the tool instantly works out the contrast ratio between them and shows you, at a glance, which accessibility standards the pair passes. Everything runs in your browser — there’s nothing to install and no account to create.
Pick your two colors with the swatches or by typing a HEX code, and the ratio, the pass and fail badges, and the live preview all update as you go. The preview panel recolors itself so you can see the real text on the real background, not just a number. If a combination fails, swap the colors or nudge one lighter or darker until it passes.
How to use the contrast checker
- Set your text color using the first swatch, or type a HEX code straight into the field next to it.
- Set your background color the same way with the second control.
- Read the contrast ratio shown in the center — it ranges from 1:1 (identical, invisible) up to 21:1 (black on white).
- Scan the pass and fail badges to see which WCAG levels your pair meets for normal text, large text, and interface elements.
- Adjust until it passes — use the swap button to flip text and background, or fine-tune a color in the color picker and paste it back here.
What the WCAG levels mean
The Web Content Accessibility Guidelines (WCAG) set the minimum contrast ratios that make text readable for as many people as possible, including those with low vision or color blindness. The checker measures your pair against each of these thresholds.
AA — normal text (4.5:1). The everyday standard for body copy. Most websites aim for this, and many accessibility laws expect it. If your paragraphs clear 4.5:1, they’re considered readable for the vast majority of users.
AA — large text (3:1). Bigger text is easier to read, so it’s held to a gentler bar. Headings and other large type only need a 3:1 ratio to pass at the AA level.
AAA — normal text (7:1). The enhanced standard. Hitting 7:1 on body text gives you a comfortable margin and is the target when accessibility is a priority rather than a minimum.
AAA — large text (4.5:1). The enhanced bar for headings and large type, equivalent to the AA requirement for normal text.
UI & graphics (3:1). Buttons, form borders, icons, and any graphic you need to understand the page have their own requirement under WCAG 1.4.11 — they should hit at least 3:1 against what’s next to them.
What counts as large text?
Under WCAG, “large” means roughly 24px (18pt) and up for regular weight, or about 18.66px (14pt) and up when the text is bold. Anything smaller is treated as normal text and held to the stricter ratio. That’s why a heading and a caption in the same color can pass and fail the same check — the size changes the bar.
Why color contrast matters
Low-contrast text is the single most common accessibility failure on the web. When text and background sit too close in lightness, the words get hard to read — especially on phones in sunlight, on cheaper screens, or for the large share of people with some degree of low vision or color blindness. Strong contrast isn’t only an accessibility checkbox; it makes your content clearer and more comfortable for everyone, which tends to keep readers on the page. Accessibility rules in many regions also reference WCAG AA directly, so checking contrast is part of meeting them. Once your individual colors are set, it’s worth building the whole scheme with a color palette generator and testing each text-on-background pair here before you ship.
Frequently asked questions
Is this contrast checker free? Yes. It’s completely free, runs entirely in your browser, and doesn’t require an account or any download.
What is a good contrast ratio? For body text, aim for at least 4.5:1 to meet WCAG AA, or 7:1 for the stricter AAA level. Large text and headings can pass at 3:1. Higher is always safer for readability.
What’s the difference between AA and AAA? AA is the standard most websites and accessibility laws target. AAA is the enhanced level — harder to hit, and usually reserved for content where maximum readability is the goal.
How do I fix a failing contrast ratio? Move the two colors further apart in lightness: darken the text or lighten the background (or the reverse). Small changes in lightness shift the ratio a lot, so you rarely need to abandon a color — just adjust it in the color picker and test it again here.
Why does my brand color fail on a white background? Many mid-tone colors — especially blues, greens, and reds at full saturation — land around 3:1 on white, which passes for large headings but fails for body text. Use the brand color for big type and reserve a darker variant for paragraphs.
Does contrast apply to buttons and icons too? Yes. WCAG 1.4.11 asks for at least 3:1 between interface elements — button edges, form fields, meaningful icons — and the colors around them, so people can tell where they are and what to click.
Can I grab a color from an image to test it? Pull the color first with the image color picker, copy its HEX value, then paste it into the text or background field here to check the pair.
