Color contrast checker — WCAG 2.2 AA/AAA compliance for normal/large text, real-time grade.
- Runs locally
- Category Color & Design
- Best for Moving from a visual idea to reusable color values.
| Combo | Ratio | Grade | |
|---|---|---|---|
| Black on White | 21.00:1 | AAA | |
| White on Black | 21.00:1 | AAA | |
| Slate-700 on White | 10.35:1 | AAA | |
| Slate-500 on White | 4.76:1 | AA | |
| Slate-400 on White | 2.56:1 | FAIL | |
| Blue-600 on White | 5.17:1 | AA | |
| Cyan on Slate-900 | 7.35:1 | AAA | |
| Pink on Slate-900 | 5.06:1 | AA | |
| Amber on Slate-900 | 8.31:1 | AAA | |
| Red-500 on White | 3.76:1 | AA-large |
What this tool does
Free WCAG 2.2 color contrast checker. Paste or pick a foreground and background HEX color and instantly see the exact contrast ratio (1.00–21.00), the pass/fail status against every relevant WCAG Success Criterion — 1.4.3 normal text (4.5:1), 1.4.3 large text (3:1), 1.4.6 AAA normal (7:1), 1.4.6 AAA large (4.5:1), and 1.4.11 non-text UI components (3:1) — and a live preview panel that renders sample heading + body + caption text in the actual pair so you can judge readability with your own eyes, not just a number. When the pair fails, the tool walks the foreground's lightness toward whichever pole (black or white) is on the far side of the background luminance and returns the closest passing color — hue and saturation preserved, so the suggestion stays on-brand. A built-in table grades ten common combinations (Black/White, Slate-700/White, Cyan/Slate-900, etc.) so you can sanity-check your design system in one glance. 100% client-side: no upload, no signup, no tracking.
Tool details
- Input
- Text + Numbers
- The page exposes text boxes, numeric controls, file pickers, or structured inputs depending on the tool.
- Output
- Live result + Preview
- The result area focuses on usable output, with copy, download, or preview actions when supported.
- Privacy
- Browser-side processing
- The main tool logic does not call an external API, so inputs normally stay in the current tab.
- Save / share
- No account required
- Open the page and use it; whether results survive refresh depends on the tool.
- Performance budget
- Initial JS <= 18 KB
- No WASM budget is declared, keeping the tool quick to open on mobile.
- Best fit
- Color & Design · Designer
- Category and role tags drive related tools, internal links, and quick fit checks.
How to use
-
1. Input
Paste or drop your content into the tool panel.
-
2. Process
Click the button. All processing is local in your browser.
-
3. Copy / Download
Copy the result or download to disk in one click.
How Color Contrast Checker fits into your work
Use it while choosing, checking, converting, or documenting colors for real interface work.
Color jobs
- Moving from a visual idea to reusable color values.
- Checking contrast and accessibility before a UI ships.
- Keeping brand, design, and implementation color decisions aligned.
Color checks
- Verify contrast against the actual background, not just a sample swatch.
- Check dark and light themes separately when both exist.
- Copy the final format your design system or codebase expects.
Good next steps
These links move the current task into a more complete workflow.
- 1 HTML Color Names HTML named colors — all 147 CSS color names with hex/RGB/HSL, searchable + sortable. Open
- 2 Color Converter HEX ⇄ RGB ⇄ HSL ⇄ HSV ⇄ CMYK — instant 5-way conversion, live swatch — browser-only Open
- 3 Color Blindness Simulator Color blindness simulator — paste hex or upload image, see how it looks to people with protanopia / deuteranopia / tritanopia / monochromacy. Open
Real-world use cases
An engineer fixes a failed accessibility audit before a Section 508 contract review
Your government client's auditor flagged 14 text/background pairs below 4.5:1. Paste each pair here, read the exact ratio, and apply the suggested fix that keeps your brand hue. A slate-500 (#64748B) caption on white reads 4.76:1 here, so you learn it already passes and you stop wasting a fix on it. The ones that read 3.9:1 are the real blockers, and you ship a clean report the same afternoon.
A designer validates a new dark-mode palette before handing tokens to dev
You designed a dark theme with #E2E8F0 body text on a #0F172A panel. Drop both in and confirm it hits 14.3:1, well past AAA's 7:1. Then you test the muted #64748B metadata on the same panel, see it lands at 4.9:1, and bump it one step toward white so secondary text clears 7:1 too. You hand dev a token set where every pair is already graded, instead of letting them discover failures in QA.
A content creator checks caption legibility on a thumbnail before publishing
Your YouTube thumbnail has #FACC15 yellow text over a busy frame you flattened to an average #1E293B. You paste both and see 9.1:1, comfortably readable even on a phone at arm's length. Then you try the same yellow on a lighter #94A3B8 region and watch it crash to 1.6:1, which explains why one version of the title kept vanishing. You pick the dark backdrop and stop guessing.
A developer wires a focus ring that satisfies 1.4.11 non-text contrast
Your form inputs have a 2px focus ring in your brand teal #14B8A6 against a white field. You paste teal over white, read 2.4:1, and learn it fails the 3:1 non-text requirement that keyboard users depend on. You darken the ring to #0D9488, recheck, land at 3.4:1, and now the focus indicator is both on-brand and compliant without touching the rest of your component.
Common pitfalls
Judging a body paragraph by the large-text 3:1 bar because a big heading sits beside it. A 15px caption still needs 4.5:1 (AA);
Trusting the WCAG number alone in dark mode.
Forgetting focus rings and icon borders count too. A 2.4:1 teal ring fails 1.4.11 (needs 3:1) even when all your text passes, so keyboard users lose the one cue they rely on.
Privacy
Everything runs in your browser. The foreground and background HEX values you enter are processed entirely in client-side JavaScript and never leave your device or hit a server. The color pair is encoded into the URL so you can share a link that reopens the exact same result, which means whoever you send that link to can see the two colors. Treat the URL as shareable, not secret. There is no upload, no signup, and no analytics on your input.
FAQ
Tool combos
Folks in your role tend to reach for these alongside this tool.
- ASCII Art Generator Generate ASCII art from text — figlet-style banners, multiple fonts.
- Aspect Ratio Calculator Calculate aspect ratio — fix any 1 of [width, height, ratio], get the other two.
- Avatar Generator Generate avatars from initials, identicons, or random shapes. Download PNG/SVG.
- Base64 Encoder & Decoder Encode or decode Base64 — text, files, and Data URLs. Runs entirely in your browser.