Skip to main content
WebColorTools

Color Contrast Checker

Check color contrast against WCAG accessibility standards. Free, instant, in your browser.

Instant 100% Private Free Forever
WCAG Accessibility Contrast AA AAA

Colors to compare

Text color
Background color

Contrast ratio

—

AA Normal · 4.5:1

Fail

AA Large · 3.0:1

Pass

AAA Normal · 7.0:1

Fail

AAA Large · 4.5:1

Fail

Suggest accessible alternative

Adjusts text lightness while keeping hue and saturation close to your original — targets AA normal (4.5:1).

—

Live text preview

See exactly how your color pair reads at different sizes

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

Try a preset

How to use the Color Contrast Checker

Four steps to verify WCAG contrast for any color pair.

  1. 1

    Pick text and background colors

    Enter HEX, RGB, HSL, or color names in both fields — or use the color pickers. Each input updates its swatch instantly.

  2. 2

    Read the contrast ratio

    The large ratio number shows your result (e.g. 4.53 : 1). Four WCAG badges show pass or fail for AA and AAA, normal and large text.

  3. 3

    Preview real text

    See sample heading, body, and small text rendered in your exact color combination — the fastest way to judge readability.

  4. 4

    Fix failing combos

    If AA normal fails, use “Suggest accessible alternative” to get a nearby color that passes, then click Use this to apply it.

What is color contrast / WCAG?

Color contrast measures how easily text stands out from its background. The contrast ratio is a number — higher is better — computed from the relative luminance of two colors. WCAG (Web Content Accessibility Guidelines) sets minimum ratios so people with low vision, color blindness, or glare on screens can read content. This free contrast checker calculates the exact ratio and tells you whether your combination passes AA and AAA requirements for normal and large text.

The formula compares the lighter and darker color: (L1 + 0.05) / (L2 + 0.05), where L is relative luminance on a 0–1 scale. Pure black on pure white yields 21:1 — the maximum. Ratios below 4.5:1 make normal body text difficult for many users. Search terms like contrast checker, color contrast checker, wcag contrast, accessibility color checker, and contrast ratio calculator all describe this essential design QA step.

WCAG levels define two conformance tiers most teams care about. Level AA is the practical legal baseline referenced by ADA lawsuits, Section 508 in the U.S. federal sector, and the European Accessibility Act (EAA). It requires 4.5:1 for normal text and 3:1 for large text and user-interface components. Level AAA is stricter: 7:1 for normal text and 4.5:1 for large text. AAA is aspirational for all content but excellent for long-form reading.

Large text under WCAG means at least 18 point (24 CSS pixels) at regular weight, or 14 point bold (18.66 CSS pixels). Headings and hero titles often qualify for the relaxed 3:1 AA threshold — but captions, labels, and paragraphs do not. When in doubt, aim for 4.5:1 everywhere; your future self (and your users) will thank you.

Why contrast matters: Accessible color is not optional for public-sector sites, e-commerce in the EU, and growing private-sector policy. Beyond compliance, high contrast improves readability for everyone — outdoor mobile use, aging eyes, cheap monitors, and projector presentations. Designers use contrast checkers during handoff; developers verify before shipping CSS; content teams audit marketing landing pages. A failing brand gray on white is fixable with a small lightness shift — no rebrand required.

Who needs this tool: UI/UX designers validating Figma tokens, front-end developers checking color and background-color pairs, accessibility specialists auditing WCAG conformance, students learning inclusive design, and anyone shipping a website that real humans must read. This checker runs entirely in your browser with live text preview, pass/fail badges, and an optional accessible-color suggestion when AA normal fails.

For related workflows, convert colors with our Color Converter, or explore palette and vision tools as they launch on WebColorTools.

Frequently asked questions

What is a good contrast ratio?
For normal body text, WCAG Level AA requires at least 4.5:1 contrast between foreground and background. Large text (18pt+ regular or 14pt+ bold) needs at least 3:1 for AA. Level AAA is stricter: 7:1 for normal text and 4.5:1 for large text. Higher ratios mean easier reading for everyone, especially people with low vision or color-vision differences.
What's the difference between AA and AAA?
WCAG AA is the legal baseline in many jurisdictions — the minimum most organizations target for public websites. WCAG AAA is the highest conformance level with stricter contrast requirements. Not every element must meet AAA, but critical content like body copy benefits from aiming higher when brand colors allow it.
What counts as "large text"?
WCAG defines large text as at least 18pt (24px) at normal weight, or at least 14pt (18.66px) when bold. Headings, hero titles, and button labels often qualify. Smaller UI labels, captions, and paragraph body text use the stricter normal-text thresholds (4.5:1 AA, 7:1 AAA).
Why does my brand color fail contrast?
Many brand palettes prioritize aesthetics over readability. Light gray on white, yellow on white, and saturated mid-tone colors on similar backgrounds often fall below 4.5:1. That does not mean abandoning your brand — adjust lightness slightly (darker text on light backgrounds, lighter text on dark backgrounds) while keeping hue. This tool’s “Suggest accessible alternative” does exactly that.
Is my data private?
Yes. All contrast calculations run entirely in your browser. Your colors are never uploaded, stored on a server, or sent to any API. You can use this tool offline after the page loads.

Related tools

More free tools — all run in your browser.

Color Converter

Convert between HEX, RGB, HSL, HSV, CMYK, and OKLCH.

Color Blindness

See how your colors and images look to people with color vision deficiencies. Free, private, in your browser.

Palette Generator

Generate beautiful color palettes instantly. Lock colors, explore schemes, export to CSS.

Gradient Generator

Create beautiful CSS gradients visually. Linear, radial, conic — copy the code instantly. Free, in your browser.