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?

A WCAG contrast ratio is a number from 1:1 (identical colors) to 21:1 (pure black on pure white) that measures how much the relative luminance of two colors differs. WCAG 2.1 requires at least 4.5:1 for normal text and 3:1 for large text at level AA, and 7:1 for normal text at AAA. This checker computes the ratio for any foreground and background pair and marks each threshold pass or fail.

The point of measuring it is that "looks readable to me" isn't a reliable test — the ratio turns readability into one comparable number, whether you're checking a single button, an entire design system, or the border of an input.

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. Note the limits of that: it moves lightness only, so the hue you chose is preserved but the shade will change, and for some pairs — two mid-lightness colors of similar hue — no lightness step in either direction reaches the target, in which case the tool tells you so instead of guessing.

One thing contrast alone can't tell you: if your background is a gradient rather than a flat color, check its darkest and lightest stops separately — contrast against a gradient is only as good as its worst point.

Related tools

OKLCH Converter — fine-tune a suggested shade by hand in OKLCH
Color Blindness Simulator — the check contrast ratio can't do
Shadcn Theme Generator — build a whole palette with contrast enforced
Tailwind Colors — pick a passing shade from the Tailwind scale
CSS Gradient Generator — get the individual stops of a gradient background

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. Hue is preserved: only lightness moves, and the result is clamped back into the sRGB gamut so it's always a real, displayable color. For some pairs no lightness step in either direction reaches the target, and the tool tells you so rather than returning a color that still fails.

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.