How to Check Text Contrast for Accessibility Online for Free (2026 Guide)

Beautiful color pair, unreadable text. It's one of the most common design failures on the web — light gray text on a white background, a trendy pastel button with white lettering — and it locks out real people: users with low vision, color blindness, or just a phone screen in bright sunlight. The fix is measurable, not a matter of taste. This guide explains the WCAG contrast rules, shows you how to test any color pair with our free Contrast Checker, and gives you concrete ways to fix combinations that fail.

What the free contrast checker does

The Contrast Checker takes two colors — your text color and your background color — and calculates their contrast ratio, then tells you whether the pair passes the WCAG accessibility standards. It runs entirely in your browser: no signup, no install, instant results.

The WCAG contrast rules (the actual numbers)

The Web Content Accessibility Guidelines (WCAG) define contrast requirements as ratios, where 1:1 means no contrast (identical colors) and 21:1 is the maximum (black on white). The thresholds that matter:

• 4.5:1 — normal text (WCAG AA). Body copy, paragraphs, list items, and UI labels must reach at least 4.5:1 against their background. This is the baseline for accessible text.
• 3:1 — large text (WCAG AA). Text that is at least 18pt (24px), or 14pt (18.66px) bold, only needs 3:1 — larger letterforms are inherently easier to read.
• 7:1 — normal text (WCAG AAA). The stricter enhanced level. Aim for this for critical content when you can.
• 3:1 — UI components. Icons, form borders, and focus indicators need at least 3:1 against adjacent colors so users can perceive interactive elements.

Note what these rules don't cover: they measure luminance contrast (light vs. dark), not color difference. Red text on a green background can be high-contrast by the numbers yet unreadable for red-green color-blind users — which is why you should never rely on color alone to convey meaning.

Step-by-step: test your color pair

1. Open the Contrast Checker. No signup, works in any modern browser.
2. Enter your text (foreground) color. Use the HEX or RGB code of the actual text color from your design.
3. Enter your background color. Use the real background the text sits on — not the page background three layers down, the immediate one behind the text.
4. Read the ratio and the verdict. The tool shows the calculated contrast ratio and whether the pair passes AA for normal text, AA for large text, and AAA.
5. Test every real combination. Body text on page background, button text on button color, link color on background, placeholder text in inputs — each pair needs its own check.
6. Fix failures (see below) and re-test until the pair passes.

How to fix a failing combination

A failing pair doesn't mean abandoning your palette. Small, targeted adjustments usually fix it:

• Darken the text or lighten the background. The most reliable fix. Moving one step darker/lighter often crosses the 4.5:1 line without changing the design's character. Use the Color Picker to find the adjusted shade.
• Increase font weight or size. Bold text or larger headings qualify for the easier 3:1 large-text threshold. This is a legitimate strategy, not a loophole — bigger, bolder text genuinely is more readable.
• Add a backing shape. White text failing over a photo? Put it on a semi-transparent dark overlay first, then check the text against the overlay color.
• Swap which color is text. Sometimes the pair works in reverse — dark text on the light brand color instead of light text on it.
• Reserve low-contrast pairs for decoration only. Large decorative headings, disabled states, and watermarks can use softer combinations — as long as no essential information depends on reading them.

The usual suspects: combinations that almost always fail

• Light gray text (#999 and lighter) on white — the classic offender, especially in secondary text and placeholders.
• White text on pastels — light pink, sky blue, or mint buttons with white labels routinely fall below 4.5:1.
• Brand-colored text on brand-colored backgrounds — two brand colors designed to sit side by side often lack the luminance gap text needs.
• Text over images — a photo's brightness varies across its area, so text that's fine over the dark part fails over the bright part. Overlays or text shadows are the standard fix.
• Placeholder text in form fields — browsers render placeholders in faded gray by default; style them to a passing color deliberately.

Contrast is necessary but not sufficient

Passing the ratio check is the floor, not the ceiling. Real accessibility also means: sufficient font sizes, line spacing that doesn't cram lines together, never conveying information by color alone (pair that red/green status with an icon or label), visible focus indicators for keyboard users, and testing your design in grayscale to catch color-dependent meaning. The contrast checker handles the measurable part in seconds; the rest is design discipline.

Build contrast checking into your workflow

1. Pick brand colors with the Color Picker or generate ideas with the Random Color Palette tool.
2. Before finalizing any text/background pair, run it through the Contrast Checker.
3. If a pair fails, adjust with the picker and re-check — two minutes per pair.
4. Convert formats as needed with the HEX to RGB Converter (e.g. to build RGBA overlays).
5. Re-check after any redesign — a "small" color tweak can silently break a passing ratio.

Frequently asked questions

Is the contrast checker free?

Yes — unlimited WCAG contrast checks, no signup.

What contrast ratio does my body text need?

At least 4.5:1 against its background for WCAG AA, the widely adopted baseline. 7:1 meets the stricter AAA level.

Do headings have different requirements?

Large text — 18pt/24px and up, or 14pt/18.66px bold and up — needs only 3:1 at the AA level.

My pair passes the checker but still looks hard to read — why?

The ratio measures luminance contrast only. Thin fonts, small sizes, busy backgrounds, and color-vision differences all affect real readability beyond the number. Treat 4.5:1 as the minimum, not the target.

Does the checker account for color blindness?

It measures luminance contrast, which is color-blindness-independent — a useful property. But never use color as the only way to convey meaning; pair it with text, icons, or patterns.

Check your colors now: Free Contrast Checker · Free Color Picker · Free HEX to RGB Converter