Does this tool check for color blindness?

No. This tool measures the WCAG luminance-contrast ratio between two colors, which is a different (and mandatory) accessibility requirement from color-vision-deficiency simulation. A color pair can pass every contrast target here and still be hard to distinguish for some forms of color blindness if color alone is used to convey meaning — pair contrast with a dedicated CVD simulator if that's a concern.

Color Contrast Checker

Check the WCAG contrast ratio between any two colors — instant AA/AAA pass/fail badges.

A free color contrast checker: enter a text (foreground) color and a background color and get the exact contrast ratio, pass/fail badges for AA and AAA at both normal and large text sizes, a non-text/UI-component check, and — if the pair fails — a one-click suggestion for a passing shade. Runs entirely in your browser.

Examples:

Text color (foreground)

Background color

Contrast ratio

Non-text / UI components (3:1):

Large text preview

Normal text preview — roughly how body copy at 16px will read against this background.

Fix a failing pair

This pair already passes the selected target.

What is a WCAG contrast ratio?

The WCAG contrast ratio is a number from 1:1 (identical colors) to 21:1 (pure black on pure white) that measures how much two colors' relative luminance differs. It's the mathematical basis for WCAG 2.1's contrast requirements — the reason a color-contrast checker exists at all is that "looks readable to me" isn't a reliable test, and the ratio gives a precise, repeatable pass/fail line.

That's the full job of a contrast ratio checker: turn "looks readable to me" into one comparable number. Whether you need a quick WCAG contrast checker for one button, a text contrast checker for a whole design system, or an accessibility contrast checker for icons and UI borders, the math is identical — only the target threshold changes.

AA vs AAA, and what counts as "large text"

WCAG defines four relevant targets: 4.5:1 for normal text at AA, 3:1 for large text at AA, 7:1 for normal text at AAA, and 4.5:1 for large text at AAA. "Large text" specifically means at least 18pt (24px) regular weight, or at least 14pt (about 18.66px) bold weight — anything smaller is judged against the stricter normal-text thresholds. AA is the level referenced by most accessibility regulations; AAA is a stronger recommendation, not usually a hard requirement.

The non-text contrast rule (WCAG 1.4.11)

Text isn't the only thing that needs contrast. WCAG 1.4.11 (Non-text Contrast) requires a 3:1 ratio for the visual boundaries of active UI components — input borders, button outlines, toggle states — and for icons or graphics that carry meaning on their own. This tool checks that threshold automatically alongside the text targets above.

Fixing a failing color pair

If your pair fails the target you care about, use Fix a failing pair above: pick whether to adjust the text or the background, then click Suggest a passing color. It steps that color's lightness in the perceptually-uniform OKLCH space until the ratio clears your target, clamping the result to a real, displayable sRGB color. For finer manual control afterward, the OKLCH Converter lets you fine-tune the exact shade, and if you're building a whole color system rather than checking one pair, the Shadcn Theme Generator enforces contrast automatically across an entire generated palette. And if your background is a gradient rather than a flat color, pull the individual color stops from the CSS Gradient Generator and check the darkest and lightest stops here — contrast against a gradient is only as good as its worst point.

Frequently asked questions

WCAG 2.1 sets three thresholds: 4.5:1 for normal text at AA (the widely-required baseline), 3:1 for large text at AA and for non-text UI components, and 7:1 for normal text at the stricter AAA level. Higher is always more readable — 21:1 (pure black on pure white) is the maximum possible.

Large text is defined as at least 18pt (24px) at regular weight, or at least 14pt (about 18.66px) at bold weight. Large text gets a lower contrast requirement (3:1 for AA, 4.5:1 for AAA) because bigger, bolder strokes stay legible at lower contrast than small body copy does.

AA is the level referenced by most accessibility laws and standards (ADA, Section 508, EN 301 549) and is the practical baseline to hit. AAA is stricter and recommended where you can get it, but isn't usually a hard requirement — treat it as a stretch goal, especially for body text.

No. This tool measures the WCAG luminance-contrast ratio between two colors, which is a different (and mandatory) accessibility requirement from color-vision-deficiency simulation. A pair can pass every contrast target here and still be hard to distinguish for some forms of color blindness if color alone is used to convey meaning — pair contrast with a dedicated CVD simulator if that's a concern.

The WCAG formula assumes two solid, opaque colors. If either color has alpha, its effective appearance depends on whatever is rendered behind it — flatten a semi-transparent color against its actual backdrop first, then check the resulting solid color here.

WCAG 1.4.11 (Non-text Contrast) requires a 3:1 ratio for the visual boundaries of UI components — like input borders, button outlines, and icons — and for graphics that convey meaning, against their adjacent color. It's separate from the text-contrast rules and is checked automatically alongside them here.

It steps the lightness of whichever side you choose to adjust — text or background — up or down in the perceptually-uniform OKLCH color space, in small increments, until the pair reaches your selected target ratio. The result is clamped back into the sRGB gamut so it's always a real, displayable color.

Yes, completely free, and no. Every calculation runs locally in your browser using JavaScript — your colors are never sent to a server, logged, or stored.