Contrast Ratio Checker
Paste in your text and background colors to get the exact WCAG contrast ratio, see which AA and AAA bars you pass, and fix failures with one tap.
Check your contrast
Your colors
Enter the text (foreground) and page (background) colors. The ratio updates live.
The color of your text, icons or UI elements. Example: #1a1a1a for body copy.
Not a valid hex color — try e.g. #1a1a1a.
The color behind the text. Example: #ffffff for a white page.
Not a valid hex color — try e.g. #ffffff.
Contrast ratio
“Large text” means at least 18pt (24px), or 14pt bold. Normal body copy must meet the normal-text bars.
Real preview
Your exact colors on a headline, a paragraph and a button.
A headline set in your colors
The quick brown fox jumps over the lazy dog. Good contrast keeps every word readable — for everyone, including the 1 in 12 men with color-vision deficiency.
Fix low contrast
One tap nudges the foreground's lightness — keeping its hue — until it passes AA for normal text (4.5:1).
Only the lightness changed — the hue you picked stays recognizable.
How It Works
Contrast is the brightness gap between text and the surface behind it. When the gap is generous, words stay crisp for everyone — including older readers, people with low vision, and anyone reading in bright sunlight. When the gap shrinks, text starts to dissolve, and no amount of beautiful typography can save it. Accessibility standards turn “readable enough” into exact numbers, and this checker measures your color pairs against them.
The math comes from the Web Content Accessibility Guidelines (WCAG), the same standard referenced by accessibility laws such as the ADA in the United States and the European Accessibility Act. It works in two steps. Step one computes each color’s relative luminance — how bright the color looks to human eyes, on a scale from 0 (pure black) to 1 (pure white). This is not a simple average of the red, green, and blue channels, because eyes are far more sensitive to green than to blue. The formula weights them accordingly:
Before that weighting, each channel is “straightened,” because screens do not brighten in a straight line — doubling the digital value produces much more than double the light. Any channel at 0.04045 or below (on the 0–1 scale) is simply divided by 12.92; anything above goes through ((value + 0.055) ÷ 1.055)2.4. This undoing of the screen’s curve is why a digital value of 128 — numerically “half” — produces only about 22% of white’s physical light, even though your eyes still perceive it as middle gray.
Step two combines the two luminances into a contrast ratio: the lighter luminance plus 0.05, divided by the darker luminance plus 0.05. The small 0.05 padding keeps the math stable near black. Two identical colors score 1:1; black text on a white background scores the maximum possible, 21:1. Everything you will ever measure falls somewhere on that scale.
Then come the thresholds that decide pass or fail. Normal text — ordinary body copy — needs a ratio of at least 4.5:1 to meet AA, the level required by most laws and company policies, and at least 7:1 to meet AAA, the strictest level. Large text gets more lenient targets because bigger letters stay legible with less contrast: 24 pixels and up, or 19 pixels and up when bold, needs only 3:1 for AA and 4.5:1 for AAA. Icons, form-field borders, and other meaningful interface graphics need 3:1 against their background.
The checker runs this entire pipeline the instant you pick two colors: the big ratio number, pass/fail badges for AA and AAA at both text sizes, a live preview of real headline and body text, and — when a pair fails — an auto-fix that nudges the failing color to the nearest shade that passes, so you keep your brand hue instead of starting over.
Why two conformance levels instead of one? AA is the practical baseline: it removes the barriers that block most readers, and it is the level accessibility laws and lawsuits actually enforce. AAA is the enhanced tier — noticeably more comfortable for people with low vision, but sometimes impossible to hit without abandoning a brand palette (pure brand yellow on white, for instance, can never reach 7:1). The sane strategy most teams land on: require AA everywhere, and reach for AAA on body text wherever the palette allows it.
Worked Example: Black on White, Then a Real Brand Blue
Example A — black #000000 on white #FFFFFF
Black: every channel is 0, so after straightening each channel is still 0, and L = 0. White: every channel is 1, straightening leaves it at 1, and L = 0.2126 + 0.7152 + 0.0722 = 1.0. Ratio = (1.0 + 0.05) ÷ (0 + 0.05) = 1.05 ÷ 0.05 = 21:1. The maximum possible — it passes AA and AAA at every text size, which is why black on white is the reference point for all readability.
Example B — #336699 text on a white background
Scale the channels: 51 ÷ 255 = 0.2, 102 ÷ 255 = 0.4, 153 ÷ 255 = 0.6. All three sit above 0.04045, so each goes through the screen curve: 0.2 → ((0.255) ÷ 1.055)2.4 ≈ 0.0331; 0.4 → (0.455 ÷ 1.055)2.4 ≈ 0.1329; 0.6 → (0.655 ÷ 1.055)2.4 ≈ 0.3185.
Luminance of #336699
L = 0.2126 × 0.0331 + 0.7152 × 0.1329 + 0.0722 × 0.3185 = 0.0070 + 0.0951 + 0.0230 ≈ 0.125. Notice how the green channel dominates the result — that 0.7152 weight at work.
The ratio and the verdict
Ratio = (1.0 + 0.05) ÷ (0.125 + 0.05) = 1.05 ÷ 0.175 = 6.0:1. Against the thresholds: AA normal text (needs 4.5) → pass; AAA normal text (needs 7.0) → fail; AA large text (needs 3.0) → pass; AAA large text (needs 4.5) → pass. This steel blue is perfectly fine for body copy under the AA standard most organizations target — but if your policy demands AAA, darken it a notch and re-test.
Example C — the classic failure: #999999 on white
Medium gray: every channel is 153 ÷ 255 = 0.6, which straightens to about 0.3185, so L = 0.3185. Ratio = 1.05 ÷ (0.3185 + 0.05) = 1.05 ÷ 0.3685 ≈ 2.85:1. That fails AA normal text (needs 4.5), fails AAA everywhere, and even fails AA large text (needs 3.0). This single pair — gray body copy on a white page — is the most common accessibility failure on the entire web, and now you can see exactly why the numbers condemn it.
Common Contrast Mistakes
- Eyeballing it. “Looks fine on my monitor” is the most expensive sentence in web design. Brightness varies wildly between screens, and your eyes adapt to whatever is in front of them. Measure; do not guess.
- Light gray body text. Medium gray (#999999) on white scores only about 2.85:1 — it fails every threshold, including large-text AA. Yet gray-on-white body copy remains the single most common real-world failure. If your grays must stay light, reserve them for large headlines only.
- Forgetting the small stuff. Placeholder text in form fields, captions, footnotes, and timestamps all count as text. Disabled controls get a pass, but placeholders do not — users must be able to read the hint before they type.
- Designing only in light mode. Dark mode flips the math: a brand color that passes on white can easily fail on near-black, because the ratio depends on both colors, not just the text. Test every pair in both themes.
- Using the brand color for body text unchecked. Brand palettes are chosen to look distinctive, not to be readable at 16 pixels. Keep brand hues for headings, buttons, and accents; pair them with near-black or near-white for long-form text.
- Text over photos and gradients. A ratio measured against one corner of an image means nothing if the text drifts over a brighter patch. Test against the worst spot the text can land on — or add a scrim (a soft dark overlay) behind the words.
- Assuming bold or large fixes weak contrast. Larger text does get easier targets (3:1 instead of 4.5:1), but the targets still exist and still need measuring. “It’s a headline, so it’s fine” is a guess, not a test.
Tips for Readable Color Pairs
- Aim for 7:1 on body text when you can. AA’s 4.5:1 is the legal floor, not the ceiling. AAA-level body copy stays comfortable for far more readers, including everyone on a dim phone in sunlight.
- Darken the text before lightening the background. Nudging a failing text color a few percent darker usually preserves the brand hue; washing out the background changes the whole page’s feel. Fix the smaller surface first.
- Test every state, not just the resting one. Hover, focus, selected, and error states each create new color pairs. A button that passes at rest can fail on hover if the hover shade is lighter.
- Let neutrals do the heavy reading. Near-black text on white (about 15:1 to 21:1) is unbeatable for paragraphs. Save your brand colors for the moments that deserve emphasis.
- Re-check after every rebrand tweak. Marketing lightens the primary blue “just a touch” and suddenly half the site’s buttons fail. Make the contrast checker part of the design review checklist, not a one-time audit.
- Use the auto-fix as a starting point. When a pair fails, the suggested nearest-passing shade shows exactly how far off you are — sometimes one small step, sometimes a rethink. Either way, you now know.
- Remember non-text elements. Chart lines, icon strokes, and input borders need 3:1 against their background too. A beautiful dashboard that nobody can decode is not beautiful.
- Check links against body text, not just the background. A link sitting inside a paragraph must differ from the surrounding text by 3:1 as well — otherwise color-blind readers cannot spot it. When in doubt, underline your links; the underline is a cue no one can miss.
- Never rely on color alone for meaning. Red versus green for error versus success fails everyone who cannot distinguish the hues. Pair the color with an icon, a label, or bold text so the message survives with color removed.
My saved numbers reuse them in any calculator
Save a number once — like your rent or hourly rate — then just type its name instead of the number, in any calculator here. You can also type formulas like 5000 * 1.1 right into any box.
Saved only in this browser — nothing is sent to us.
Frequently Asked Questions
What is a good contrast ratio for text?
WCAG requires at least 4.5:1 for normal text (AA) and 3:1 for large text. AAA — the strictest level — needs 7:1 for normal text and 4.5:1 for large text.
What counts as large text in WCAG?
Large text is at least 18pt (24px), or 14pt (about 19px) when bold. Everything smaller must meet the tougher normal-text ratios.
How is the contrast ratio calculated?
Each color’s relative luminance is computed from its RGB channels (weighted 0.2126 red, 0.7152 green, 0.0722 blue after gamma correction), then ratio = (lighter + 0.05) / (darker + 0.05). Black on white scores the maximum 21:1.
My colors fail — what should I change?
Use Auto-fix: it adjusts only the foreground’s lightness, keeping your hue, until the pair reaches 4.5:1. Alternatively darken the text or lighten the background yourself.