Color Contrast Checker

What is a Color Contrast Checker?

A color contrast checker measures how readable text is against its background by computing the WCAG contrast ratio between the two colors. You enter a text color and a background color, and the tool returns a single number from 1:1 (identical colors, invisible) to 21:1 (black on white, the maximum), then tells you whether that pair passes the Web Content Accessibility Guidelines AA and AAA thresholds. It runs entirely in your browser, so you get an instant pass or fail without uploading anything.

What does this tool do?

It answers one practical question: can people actually read this text? Picking colors by eye is unreliable, especially for users with low vision or color blindness, and design tools rarely warn you when a label or link is too faint. This checker turns the guesswork into a precise ratio and a clear verdict, so you can adjust a hex value until it clears the bar you are targeting. It is the same math screen-reader audits, Lighthouse and browser dev tools use under the hood.

How does it work?

The tool first converts each color to its relative luminance (L) — a measure of perceived brightness on a 0 to 1 scale, where black is 0 and white is 1. Luminance comes from the sRGB formula: each of the red, green and blue channels (0 to 255) is normalised to 0 to 1, linearised with a gamma curve, then weighted (green counts most, blue least) and summed.

With both luminance values in hand, the contrast ratio is:

ratio = (lighter L + 0.05) ÷ (darker L + 0.05), where L is relative luminance

The + 0.05 term represents ambient screen flare and stops the formula dividing by zero. Because the larger luminance always goes on top, the ratio runs from 1:1 (two equal colors) up to 21:1 (white at L = 1 over black at L = 0, which is (1 + 0.05) ÷ (0 + 0.05) = 21). Swapping which color is text and which is background never changes the result.

The pass thresholds the tool checks are:

1. AA normal text needs a ratio of at least 4.5.
2. AA large text needs at least 3.
3. AAA normal text needs at least 7.

Examples

Each example uses the exact formula above. Luminance is computed from the sRGB values, then divided.

Example 1 — black text on white (#000000 on #ffffff):

1. White has L = 1.0; black has L = 0.0.
2. ratio = (1.0 + 0.05) ÷ (0.0 + 0.05) = 1.05 ÷ 0.05 = 21.
3. Result: 21:1, the maximum. It passes AA, AA large and AAA — the most readable pairing possible.

Example 2 — mid-grey text on white (#999999 on #ffffff):

1. Grey #999999 has L of about 0.3185; white has L = 1.0.
2. ratio = (1.0 + 0.05) ÷ (0.3185 + 0.05) = 1.05 ÷ 0.3685, which is about 2.85:1.
3. Result: fails AA (needs 4.5) and even AA large (needs 3). This grey is too faint for body text.

Example 3 — darkening the grey to fix it (#767676 on #ffffff):

1. Darkening the text lowers its luminance, which widens the gap and raises the ratio.
2. #767676 on white computes to about 4.54:1.
3. Result: now passes AA normal text (clears 4.5). Pushing further to #595959 reaches about 7.0:1, which also passes AAA.

These three show the core lever: the bigger the luminance gap between text and background, the higher the ratio and the more levels it clears.

WCAG contrast level reference

This table maps ratios to the levels the tool checks, using the same thresholds. “Pass” means the ratio meets or exceeds the requirement.

Ratio	AA large (3:1)	AA normal (4.5:1)	AAA normal (7:1)
21:1 (black on white)	Pass	Pass	Pass
7.0:1 (#595959 on white)	Pass	Pass	Pass
5.17:1 (white on #2563eb)	Pass	Pass	Fail
4.54:1 (#767676 on white)	Pass	Pass	Fail
2.85:1 (#999999 on white)	Fail	Fail	Fail
1:1 (identical colors)	Fail	Fail	Fail

Notice the band between 3 and 4.5: those pairs are fine for large headings but fail for body text, which is the most common accessibility trap.

Common uses

Contrast checking shows up across web and product work:

• Front-end developers validating that link, button and form-label colors clear AA before shipping a component or fixing a Lighthouse accessibility flag.
• UI and brand designers testing a palette so that brand colors used for text stay legible, not just attractive, on their intended backgrounds.
• Accessibility auditors documenting which color pairs meet AA or AAA for a VPAT or compliance review.
• Content and email teams checking that placeholder text, captions and disclaimers are not so light they disappear.
• Anyone supporting low-vision users, since adequate contrast is one of the highest-impact, lowest-effort accessibility wins.

Tips and common mistakes

A few things trip people up when reading the ratio:

• Large text gets a lower bar. Text at 18pt regular or 14pt bold only needs 3:1 for AA, so a color that fails for body copy may pass for a heading. Apply the right threshold for the right size.
• Order does not matter. Putting the dark color as text or as background yields the same ratio, because the formula always divides lighter luminance by darker.
• Contrast is about luminance, not hue. Two vivid colors of similar brightness — say a saturated red on a saturated green — can have a low ratio and be hard to read despite looking different.
• Opacity and overlays change the real color. If text sits at 60 percent opacity or over a gradient, check the effective color the eye actually sees, not the nominal hex.
• Passing the minimum is a floor, not a goal. A ratio just over 4.5 is acceptable, but aiming higher leaves headroom for dimmer screens and bright environments.

Limitations and notes

This checker evaluates the WCAG 2.x contrast ratio for solid foreground and background colors. It does not model semi-transparent layers, gradients, text over images, or anti-aliasing at glyph edges — for those, sample the rendered pixel color first. It also does not implement APCA, the newer perceptual algorithm proposed for WCAG 3, which can give different verdicts for the same pair; this tool reports the current, widely-adopted WCAG 2 standard. The ratio reflects readability for the typical sRGB display and does not account for an individual user’s specific vision or device calibration. Everything runs locally as plain JavaScript in your browser, so the colors you test are never uploaded, logged or stored, and the tool keeps working offline once the page has loaded.

For more front-end utilities, pair this with the hex to RGB converter to read exact channel values, the JSON formatter and the URL encoder and decoder on the dev tools page.