Color Contrast Checker

Most contrast checkers stop at the verdict. They tell you that light gray on white fails AA, then leave you to nudge the hex a digit darker, re-paste, re-check, and repeat until the badge finally goes green. This one does that part for you. Type your two colors, and if the pair fails, it shows the nearest color that passes, keeping the same hue so it still looks like your design, with one button to drop it in. You still get the WCAG contrast ratio (1:1 to 21:1) and AA plus AAA pass or fail for normal and large text, updating live as you type. No sign-up, no upload, it all runs in your browser.

Normal body text needs at least 4.5:1 for WCAG AA, the level most laws and clients hold you to. Large text only needs 3:1, and WCAG counts text as large at 18pt and up, or 14pt bold. The point sizes are the normative ones. W3C's own note converts them at 1pt = 1.333px to about 24px and 18.5px, while a lot of tools quote 18.66px for the bold case because 14 x 96/72 works out that way exactly, and the gap between those two is not worth arguing about. The stricter AAA level wants 7:1 for normal text and 4.5:1 for large. Black on white sits at the ceiling, 21:1.

The classic trap is pale gray body text on white. It looks clean in the design file, then it ships and a large share of readers cannot quite make out the words, whether that is older eyes, a cheap phone screen, or anyone reading in sunlight. It's the cheapest accessibility problem to catch, and one of the most common live on the web.

1. Enter your text color. Type a hex code like #777777, use three-digit shorthand like #abc, or paste rgb(119, 119, 119) or hsl(0, 0%, 47%). You can also click the little swatch to pick one visually.
2. Enter your background color the same way in the second field.
3. Read the ratio. The big number in the middle is your contrast ratio, shown like 4.48:1.
4. Check the four badges. Each lights green (pass) or red (fail): AA normal, AA large, AAA normal, AAA large. That tells you exactly which standards your pair clears.
5. If something fails, use the fix panel. Under the badges, pick whether to adjust the text or the background, and you'll see the closest color that reaches AA (4.5:1) and AAA (7:1). Hit Apply to load it, or Copy to grab the hex for your CSS.
6. Trust your eyes too. The preview box shows your real text color on your real background. The swap button flips foreground and background if you want to test the reverse.

When a pair fails, the tool solves for the nearest color that clears the bar, and it does it without wrecking your design: it holds your hue and saturation and only shifts lightness. A failing brand blue becomes a slightly darker version of the same blue, and the suggestion is the smallest move that still passes, so you keep as much of the original look as possible.

You choose which side to change. Darkening pale text on a white background is the usual fix, so "Adjust text" is the default. But sometimes the text color is the brand and can't move, so flip to "Adjust background" and it solves the other direction instead. Each suggestion shows the new hex, a tiny live sample of it against your fixed color, and the exact ratio it lands on.

One honest limit, because a lot of tools hide it: a single color can't always get there. Against a mid gray background around #767676, no text color reaches AAA's 7:1, because both the darkest and lightest you can go top out near 4.6:1. The panel says so plainly and points you to adjust the other color, which beats a suggestion that quietly fails.

Because pale gray text is the number-one contrast failure on the web, a few reference points are worth keeping in your head. All of these are gray text on a white background:

• #999999, 2.85:1. Looks elegant, fails AA, and fails it badly.
• #777777, 4.48:1. Close enough to feel unfair, and it still fails AA normal text, which needs 4.5.
• #767676, 4.54:1. The lightest gray that squeaks past AA. One value darker than #777 and you're clear.
• #595959, 7.0:1. Clears AAA. About as light as body text should ever go.
• #333333, roughly 12.6:1. Basically dark gray, passes everything, and most readers can't tell it from black.

The jump from #777 (fail) to #767676 (pass) is one step darker on all three channels, 119 down to 118. Darken only the red and you get #767777, which measures 4.49 and still fails. That's how tight the AA line is, and why you trust the number over your monitor, which on a bright screen shows text that looks fine but measures under the line.

The 4.5 number isn't arbitrary, and the reasoning behind it is W3C's own. It was set to compensate for the contrast sensitivity a reader loses at roughly 20/40 visual acuity, which the Understanding document for this criterion describes as typical of elders at about age 80. AAA's 7:1 is pitched at roughly 20/80, and W3C notes that past that point people generally rely on assistive technology that does its own contrast enhancement. Neither figure was written about a particular age group beyond that, so quoting one against a different age is putting words in the standard's mouth.

Passing your main body text is the easy win. The failures that survive to production show up in less obvious places.

Placeholder and helper text. Form hints like "we'll never share your email" get styled faint to look secondary. They're real information, and they routinely drop below 4.5:1. Treat them as normal text.

Link and focus states. Hover and focus styles often shift a color lighter, so a link that passes at rest can fail on hover. Custom focus outlines are worse, a pale ring on a pale background is invisible to the exact keyboard users who need it. Test every state, not only the default.

Text over photos. A hero image changes the contrast behind your text from spot to spot, strong over the dark areas and weak over the bright ones. Check the spot where text and background are closest in lightness, since that is where it breaks.

Color as the only signal. Around 8% of men have some color vision deficiency, usually red-green. If the only cue that a field errored is red text, a big share of users see no change at all. Pair color with a second cue every time, an icon, an underline, or the word "Error." High contrast helps everyone read, but you still need a second, non-color cue so the meaning gets through to those users.