How to Check Color Contrast for WCAG Accessibility (Free Online, 2026)

Low-contrast text is the single most common accessibility failure on the web. The 2025 WebAIM Million report found it on 79.1% of the top one million home pages — by a wide margin the most-detected issue (WebAIM Million, 2025). If your text is hard to read against its background, you are losing readers and risking an accessibility complaint.

A contrast checker tells you in one second whether two colors pass. The free Contrast Checker on ZeroTools calculates the exact WCAG ratio, grades it against AA and AAA for normal and large text, suggests the nearest passing color when you fail, and even simulates four types of color blindness. This guide explains every number and how to use it.

Key Takeaways

• Low-contrast text appears on 79.1% of home pages — the #1 accessibility issue (WebAIM Million, 2025).
• WCAG AA needs a contrast ratio of 4.5:1 for normal text and 3:1 for large text; AAA raises that to 7:1 and 4.5:1.
• "Large text" means 24px (18pt) regular or 19px (14pt) bold and above — it gets a lower threshold because bigger shapes are easier to read.
• Around 1 in 12 men has some form of color blindness, which is why the tool includes color-vision simulators.

What Is Color Contrast and Why Does It Matter?

Color contrast is the measured difference in relative luminance between two colors — text and its background. WCAG expresses it as a ratio from 1:1 (identical, invisible) to 21:1 (pure black on pure white). With low-contrast text on 79.1% of home pages and an average of 29.6 separate instances per page (WebAIM Million, 2025), it is the most widespread barrier on the web — and the easiest to fix.

The stakes are practical, not just ethical. Hard-to-read text hurts everyone in bright sunlight or on a cheap screen, not only people with low vision. And in many regions, web accessibility is a legal requirement: failing contrast is one of the most frequently cited issues in ADA-related web complaints. Checking it takes seconds and removes a whole category of risk.

WCAG AA vs AAA: What Ratio Do You Need?

WCAG defines two conformance levels for contrast. AA is the practical standard that most laws and organisations require: 4.5:1 for normal text and 3:1 for large text. AAA is the enhanced level for maximum accessibility: 7:1 for normal text and 4.5:1 for large text. Aim for AA as your baseline and AAA where you can, especially for body copy.

The size split matters. "Large text" is defined as 24px (18pt) at normal weight, or 19px (14pt) when bold. Because larger and heavier shapes are inherently easier to read, they are allowed a lower ratio. The tool grades all four combinations at once — AA Normal, AAA Normal, AA Large, AAA Large — so you can see exactly which thresholds your colors clear.

Level	Normal text	Large text	Use when
AA (standard)	4.5:1	3:1	Your legal and practical minimum for all sites
AAA (enhanced)	7:1	4.5:1	Body text, content for low-vision users, public sector

How to Check Color Contrast: Step-by-Step

Open the Contrast Checker and follow these steps. The ratio and all four grades update live as you change colors.

Step 1: Set Your Foreground and Background Colors

Enter your text color in the Foreground field and the surface behind it in the Background field. You can use the color swatch, type a hex code directly, or click Swap to reverse the two. The tool reads HEX and shows the result instantly — there is no Calculate button to press.

Step 2: Read the Ratio and Grades

The big number is your contrast ratio, colored green for passing or red for failing AA. Below it, four cards show pass or fail for AA Normal, AAA Normal, AA Large, and AAA Large. If your body text needs to be readable, you want at least AA Normal (4.5:1) showing a green Pass.

Step 3: Use the Suggested Passing Color

When your combination fails AA, the tool shows a warning with the nearest passing color — it keeps your hue and adjusts lightness just enough to clear 4.5:1. Click the suggested hex to apply it. This is the fastest way to fix a brand color that is slightly too light without abandoning your palette.

Step 4: Preview With Real Text

The Live Preview lets you type your own copy and adjust the font size and weight, so you can see the contrast at the size you will actually ship. A ratio that looks borderline as a number often reads fine at 24px bold — or fails badly at 12px regular. Always check at your real type size.

Testing for Color Blindness

Contrast ratio is not the whole story. Around 1 in 12 men (roughly 8%) and 1 in 200 women have some form of color vision deficiency (Colour Blind Awareness). For them, two colors that look distinct to you can collapse into the same shade — which is why WCAG also says color must never be the only way you convey information.

The Contrast Checker includes simulators for the four main types: protanopia (red-blind), deuteranopia (green-blind), tritanopia (blue-blind), and achromatopsia (no color at all). Your text and background render through each filter side by side, so you can spot a combination that passes on ratio but becomes muddy for a colorblind reader. Red-on-green error states are the classic trap this catches.

How Is the Contrast Ratio Calculated?

The ratio is not a simple difference of hex values. WCAG uses relative luminance: each color channel is converted to linear light, weighted for how the human eye perceives red, green, and blue (green counts most), and combined into a single luminance value. The ratio is then the lighter luminance plus 0.05, divided by the darker luminance plus 0.05.

You do not need to do this math — the tool runs the exact WCAG formula for you. But understanding it explains a common surprise: two colors with similar brightness on screen can still fail, because perceived luminance is weighted by channel. A medium green and a medium red can look equally "bright" yet produce a poor ratio. Trust the number, not your eyes.

Check Your Colors Now

Open the free Contrast Checker, enter your two colors, and read the WCAG grade instantly. Fix failures with one click using the suggested passing color, then preview at your real font size and through the color-blindness simulators. No signup, nothing uploaded.

For the rest of your palette work, pair it with the Color Picker to grab and convert HEX, RGB, and HSL values, and the Gradient Generator for accessible CSS backgrounds. The complete guide to CSS design tools covers the full front-end toolkit.

Frequently Asked Questions

What contrast ratio passes WCAG?

For AA, the standard most sites must meet, normal text needs at least 4.5:1 and large text at least 3:1. For the enhanced AAA level, normal text needs 7:1 and large text 4.5:1. Low contrast is the most common web accessibility failure, affecting 79.1% of home pages (WebAIM Million, 2025), so checking is worthwhile.

What counts as "large text" in WCAG?

Large text is 24px (18pt) at normal weight, or 19px (14pt) and up when bold. It gets a lower contrast threshold — 3:1 for AA instead of 4.5:1 — because larger, heavier letterforms remain legible at lower contrast. The checker grades both normal and large thresholds at once.

How do I fix text that fails the contrast check?

When a combination fails AA, the tool suggests the nearest passing color, keeping your hue and adjusting only the lightness until it clears 4.5:1. Click the suggestion to apply it. Usually darkening a text color slightly, or deepening the background, is enough to pass without changing your overall palette.

Why test for color blindness if contrast passes?

Contrast ratio measures brightness difference, not hue distinction. About 1 in 12 men has a color vision deficiency (Colour Blind Awareness), so two colors that pass on ratio can still look identical to them. The built-in simulators show your colors through four types of color blindness so you can catch problems like red-on-green states.

Is the contrast checker free and private?

Yes. There is no signup or limit, and all calculations run locally in your browser using the official WCAG luminance formula. Nothing you enter is uploaded. It works offline once the page has loaded, so you can check colors anywhere.