ToolNestFree Color Contrast Checker
Last updated: October 21, 2026
Quick answer: Two colors can look fine together and still fail accessibility: if the contrast between text and background is too low, millions of readers with low vision — and anyone reading on a phone in sunlight — simply cannot read it. This free color contrast checker computes the exact WCAG contrast ratio between any foreground and background color, tells you whether it passes AA and AAA for normal and large text, and, when it fails, finds the nearest color that passes. Everything runs in your browser; nothing is uploaded.
–
| WCAG level | Normal text | Large text |
|---|---|---|
| AA (minimum) | – | – |
| AAA (enhanced) | – | – |
Normal text looks like this — 16px body copy at this contrast. Can you read every word without straining?
Large text looks like this
Suggested fixes — nearest colors that pass:
Fixes move only the foreground color (lightness steps), keeping your brand hue intact. Large text means 18.66px+ bold or 24px+ regular.
✓ Free forever · ✓ No signup · ✓ Tool inputs stay in your browser — never sent to our servers.
How to Use the Color Contrast Checker
- Pick a foreground color (your text) and a background color — use the color swatches or type hex codes directly; both stay in sync.
- Read the contrast ratio instantly: it updates on every change, with AA and AAA pass/fail for normal text and large text.
- Check the live preview: the same colors render as a normal paragraph and a large heading, so you judge readability with your eyes, not just numbers.
- If a level fails, use the suggested fixes: the nearest foreground shades that reach AA (4.5:1) and AAA (7:1) without changing the hue.
- Swap the pair, or test the extremes (black on white, white on black) with one click when auditing a full palette.
Why Use Our Color Contrast Checker?
- Exact WCAG 2.x ratio — relative luminance per the W3C formula, the same math WebAIM and browser devtools use, so results match official checkers.
- All four verdicts at once — AA normal (4.5:1), AA large (3:1), AAA normal (7:1), and AAA large (4.5:1), with clear pass/fail labels.
- Live text preview — see normal and large text rendered in your exact pair before you commit to a palette.
- Nearest passing fixes — when a pair fails, get the closest foreground shade that passes AA and AAA, hue preserved.
- Hex + picker input — type #767676 or pick visually; swap, black-on-white, and white-on-black shortcuts for fast palette audits.
- 100% client-side — colors never leave your browser; no signup, no tracking, no upload.
Common Use Cases
- Design-system audits: Run every text/background token in your palette through the checker before a release — one failing token is the most common reason accessibility audits come back red.
- Marketing and landing pages: Check headline and button colors against section backgrounds before launch; low-contrast hero text is invisible on mobile in sunlight even when it looks fine in Figma.
- Content and docs teams: Verify link colors, callout boxes, and code-block themes against page backgrounds so docs stay readable for every reader, not just those with perfect vision.
- Client and compliance work: Attach the exact ratio and AA/AAA verdicts to accessibility reports — auditors accept WCAG ratios, and a 4.54:1 pass is a defensible line item.
Color Contrast Checker vs Alternatives
- WebAIM Contrast Checker: The reference implementation most auditors cite — two hex fields, ratio, and AA/AAA verdicts. Ours matches its math exactly and adds a live text preview, one-click swaps and extremes, and nearest-passing fix suggestions in the same page.
- Coolors Contrast Checker: Beautiful palette-first tool that grades color pairs and suggests passing combinations. Ours is narrower and faster for the single question — does this exact pair pass, and if not, what is the nearest shade that does? — with no account or palette workflow in the way.
- Adobe Color accessibility tools: Strong for exploring accessible palettes inside a design suite. Ours is the zero-setup web check: open the page, pick two colors, get the verdict, copy the result.
Bottom line: WebAIM is the citation, Coolors is the palette playground, Adobe Color is the suite tool. For a fast, exact answer to 'does this pair pass, and what fixes it if not,' a dedicated checker with live preview and nearest-passing shades gets you there in seconds.
Frequently Asked Questions
What is a good contrast ratio for text?
WCAG 2.x sets two bars: AA, the legal and practical minimum, requires 4.5:1 for normal text and 3:1 for large text. AAA, the enhanced level, requires 7:1 for normal text and 4.5:1 for large text. Aim for AA everywhere and AAA for body copy whenever your palette allows it — 4.5:1 is the number most audits, lawsuits, and design systems check first.
What counts as large text in WCAG?
Large text is 18.66 pixels (14 points) or larger when bold, or 24 pixels (18 points) or larger when regular weight. Anything smaller is normal text and faces the stricter 4.5:1 (AA) or 7:1 (AAA) bar. Headings usually qualify as large; body copy almost never does.
Why does #767676 on white pass AA but #777777 fail?
Because the AA bar is a hard cutoff at 4.5:1, and the two grays sit on either side of it: #767676 on white measures about 4.54:1 (pass), while #777777 measures about 4.48:1 (fail). One hex step can flip the verdict — which is why you should check the exact ratio, not eyeball it.
How is the contrast ratio calculated?
Each color's relative luminance is computed from its RGB channels: every channel is converted from sRGB to linear light (values at or below 0.03928 divide by 12.92; above that, ((c + 0.055) / 1.055) ^ 2.4), then combined as L = 0.2126R + 0.7152G + 0.0722B. The ratio is (lighter + 0.05) / (darker + 0.05), giving a range from 1:1 (identical colors) to 21:1 (black on white).
Does this checker cover non-text contrast?
No — WCAG also requires 3:1 for UI components and graphical objects (icons, form borders, chart elements) under criterion 1.4.11, which is a different check from text contrast. Use the ratio here for text; for icons and controls, verify the 3:1 component bar separately.
My brand color fails AA on white. What should I do?
Don't abandon the brand color — darken it for text use. The suggested fixes on this page find the nearest darker (or lighter, on dark backgrounds) shade of the same hue that reaches 4.5:1. A common pattern: keep the bright brand color for large headings, accents, and graphics, and use its darkened sibling for body text.