How to Check Color Contrast for Accessibility in 10 Seconds (No Design Skills Needed)

You picked a light gray button with white text. It looks clean. It looks modern. It also fails every accessibility standard and 1 in 12 people cannot read it. I have done this exact thing and so has every developer who designs their own UI.

A color contrast checker tells you in one second whether your text is actually readable. No design skills needed. Just pick two colors and see the numbers.

What contrast ratio actually means

The WCAG 2.1 standard defines contrast ratio as the difference in luminance between two colors. It is a number between 1 (identical colors, unreadable) and 21 (pure black on pure white, maximum contrast). The math is straightforward: luminance = 0.2126 × R + 0.7152 × G + 0.0722 × B, with each channel gamma-corrected first. You do not need to memorize this. The tool does it instantly.

What matters is the thresholds:

• 4.5:1 — AA normal text. Your minimum target for body copy under 18px.
• 3:1 — AA large text. For headings 18px+ or bold 14px+. Easier to hit.
• 7:1 — AAA normal text. The gold standard. Required for government and education sites.
• 4.5:1 — AAA large text. Same as AA normal, just for big type.

Our free contrast checker shows all four levels at once with pass/fail indicators. Pick foreground and background colors with the color pickers, and you see every threshold in real time.

The mistake I made for years: trusting my eyes

Here is a specific scenario. You have a brand color — say #7C3AED, a nice purple. You want white text on it. It "looks fine" to you on a Retina display at full brightness in a well-lit room. So you ship it.

Then your user opens the page on a dimmed laptop screen at a coffee shop at 3pm with glare from the window. They squint. They scroll past your CTA button because they literally cannot read it.

I have been that developer. The fix is embarrassingly simple: run the combo through a contrast checker before shipping. White on #7C3AED scores 6.3:1 — it passes AA but fails AAA. If you need AAA, darken the purple to #5B21B6 and you get 9.1:1. One hex digit change, massive readability improvement.

Counter-intuitive things about contrast

Dark gray on white can fail while pure black passes. #767676 on white scores 4.5:1 (barely AA). #000000 on white scores 21:1. The difference between "looks gray" and "looks black" on screen is the difference between passing and failing accessibility. When in doubt, go darker than you think you need to.

Yellow text is almost always a problem. Yellow on white is unreadable (1.1:1). Yellow on black works (19.6:1) but the high contrast is harsh on eyes for body text. Reserve yellow-on-dark for warning badges and short labels.

Brand colors often fail at their default values. Most brand palettes are designed for logos and hero images — large blocks of color, not text-on-background combinations. The contrast ratio for text is an afterthought. Check every text-on-brand-color combination before you build the component.

The dilemma: what if your brand color fails?

You have two choices, and neither is perfect:

1. Darken or lighten the color until it passes. This changes the brand. Marketing might not love it. But your text becomes readable.
2. Keep the color for decorative use only (backgrounds, borders, icons) and use a high-contrast neutral for actual text on top of it. White text on a darkened overlay of the brand color is a common compromise.

I lean toward option 2 for most projects. Keep the brand color where it shines and use accessible text colors separately. Nobody notices the text color. Everyone notices when they cannot read the text.

Try the WCAG contrast checker on your current project. Grab your primary button color and your text color. If the ratio is under 4.5, you just found a bug before your users did.

If you are curious about other color formats, our color converter handles HEX, RGB, HSL, and more — useful when design tools give you colors in different formats. And for the broader picture on building accessible interfaces, check out how to use color converters in your design workflow.