Color Contrast Checker

Free, instant WCAG AA & AAA results — no signup.

Enter a text color and a background color to see their contrast ratio instantly, with pass/fail results for every WCAG level and text size. The default pair — white on #2D6A4F — lands at 6.39:1, which passes AA but misses AAA for normal text.

What the Contrast Ratio Means

The contrast ratio measures how different two colors are in brightness. It runs from 1:1 (a color against itself) to 21:1 (pure black on pure white — exactly 21.00:1 by the formula). The higher the number, the easier text is to read.

Behind the number is relative luminance — a measure of how bright a color looks to the human eye, on a scale from 0 (black) to 1 (white). It isn't a simple average of red, green, and blue: each channel is first gamma-corrected, then green counts for about 71% of the result, red about 21%, and blue only about 7%, because our eyes are far more sensitive to green light. The ratio is then (lighter + 0.05) ÷ (darker + 0.05) — the 0.05 accounts for ambient light reflecting off a screen.

The classic reference point: #767676 is the lightest gray that still passes AA on a white background. It measures 4.54:1 — just clearing the 4.5:1 bar. One step lighter, #777777, falls under it. That knife-edge is why designers check ratios with a tool instead of eyeballing them.

WCAG Requirements at a Glance

"Large" has a precise definition: at least 18pt (24px) at regular weight, or at least 14pt (about 18.66px) if bold. Everything smaller counts as normal text and needs the stricter ratio. Most teams target AA across the board; AAA is worth the extra effort for reading-heavy interfaces like documentation and articles.

How to Fix a Failing Pair

Contrast is almost entirely a lightness problem, so the fix usually isn't a new color — it's the same hue moved along its lightness ramp. Darken the background or lighten the text, and the pair keeps its character while the ratio climbs:

• Darken the background with shades. White on #2D6A4F sits at 6.39:1 — AA but not AAA. A 10% shade, #295F47, lifts it to 7.44:1 and crosses the AAA line. The darken color tool gives the exact hex for any percentage.
• Lighten the text with tints. When dark text sits on a dark brand color, blend the text toward white instead of abandoning the palette — the lighten color tool does one step, and the tint and shade generator builds the whole ramp so you can pick the first step that passes.
• Check the library first. Every color library page — for example /color/2d6a4f or /color/dc2626 — already shows white-text and black-text contrast ratios with AA/AAA verdicts, so you can often skip the trial and error.

Small moves go a long way: near the 4.5:1 boundary, a 5–10% lightness shift is frequently the difference between Fail and Pass.

Common Accessible Pairs

Real pairs that pass, with their exact ratios — useful as starting points or sanity checks:

Note the pattern: near-black on near-white sails past AAA, while white on saturated mid-tone brand colors typically lands in the 5–6.5:1 range — solid AA, and AAA for large text only.

Frequently Asked Questions

• What contrast ratio do I need for normal text?

  WCAG AA requires 4.5:1 for normal-size text and 3:1 for large text (18pt/24px regular, or 14pt/18.66px bold). The stricter AAA level raises those to 7:1 and 4.5:1. Most products target AA; AAA is worth aiming for in reading-heavy interfaces like documentation and long-form articles.

• Does WCAG apply to placeholder and disabled text?

  Text in disabled (inactive) controls is formally exempt from WCAG 1.4.3. Placeholder text is not exempt — it is real text users have to read, so in practice it should meet the same 4.5:1 ratio. Low-contrast gray placeholders are one of the most common accessibility failures in forms.

• How is the contrast ratio calculated?

  Each color is converted to a relative luminance — a perceived-brightness value from 0 (black) to 1 (white) that gamma-corrects each RGB channel and then weights green most heavily (about 71%), red next (about 21%), and blue least (about 7%). The ratio is the lighter luminance plus 0.05 divided by the darker luminance plus 0.05, which is why results always fall between 1:1 and 21:1.

• Do dark modes need the same contrast ratios?

  Yes. The formula always divides the lighter color's luminance by the darker one's, so the same thresholds apply whether the text is lighter or darker than its background. Light text on dark backgrounds can appear to glow slightly (halation), which is why many dark themes use off-white text — that still passes easily as long as the ratio stays at or above 4.5:1.

• What if my brand color fails the contrast check?

  Keep the hue and move the lightness. Darkening the background with shades or lightening the text with tints preserves the color's character while raising contrast — a 10% shade of #2D6A4F lifts white text from 6.39:1 to 7.44:1, crossing the AAA line. The darken, lighten, and tint-and-shade tools give the exact hex value for every step.

Related tools: lighten a color · darken a color · tint and shade generator · hex to RGB converter · color library