WCAG Contrast Checker
Check colour contrast for accessibility — AA/AAA pass-fail with live preview.
#0f172a or the color picker.Tints your text toward black/white until it passes, preserving the rest of your palette.
Ratios use the official WCAG 2.x relative-luminance formula — everything runs in your browser, nothing is uploaded. You've checked ratios. 👁️
Why you’ll love WCAG Contrast Checker
Instant & free
No signup, no paywall, no limits — WCAG Contrast Checker works the moment the page loads.
Completely private
Everything runs in your browser. Nothing you enter is ever uploaded or stored on a server.
Works on any device
Fully responsive and touch-friendly — use it on your phone, tablet or desktop.
Built by developers
Accurate, fast and keyboard-friendly — the details developers care about.
How to use it
Open it
No download and no login — the tool is ready right at the top of this page.
Use it
Enter your details or start interacting. Everything updates live as you go.
Get your result
Copy, download or share your result in a single tap. That’s it.
About WCAG Contrast Checker
This checker measures the contrast ratio between a text color and a background color using the official WCAG 2.x relative-luminance formula — the same math accessibility auditors and browser dev tools use. Every calculation runs locally in your browser, and the ratio updates live as you type hex codes, drag the color pickers, or (in Chromium browsers) eyedropper-pick colors straight off your screen.
Contrast ratios run from 1:1 (identical colors) to 21:1 (pure black on pure white), and WCAG sets different pass marks depending on what the color pair is used for. Level AA requires 4.5:1 for normal body text and 3:1 for large text and UI components; the stricter AAA level requires 7:1 and 4.5:1. Rather than making you remember those thresholds, the tool grades all five checks at once in a pass/fail grid and gives the pair an overall grade from Fail to AAA.
When a combination fails, you do not have to guess your way to a fix. The suggestion engine nudges your text color toward black or white in small steps — preserving its hue as much as possible — until it crosses the AA or AAA line, and shows you the exact hex that passes along with its new ratio. One click applies it, and you can copy the finished pair as ready-to-paste CSS.
Popular uses
Frequently asked questions
WCAG defines large text as at least 18 point (about 24 CSS pixels) in regular weight, or 14 point (about 18.7 pixels) in bold. Because bigger letterforms are easier to resolve, large text only needs a 3:1 ratio for AA instead of 4.5:1. Headings usually qualify; body copy, captions and form labels almost never do, so hold them to the normal-text thresholds.
Each color is converted to relative luminance: the R, G and B channels are gamma-corrected, then weighted (0.2126, 0.7152, 0.0722) to reflect how sensitive human vision is to each. The ratio is then (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. Because the lighter color always goes on top, swapping foreground and background never changes the ratio — the Swap button exists for previewing, not for gaming the score.
Use the suggested-foreground cards that appear under a failing result. The tool tints your exact color toward black or white in roughly 2% steps and stops at the first shade that clears 4.5:1 (AA) or 7:1 (AAA), so the fix stays recognizably in your palette instead of jumping to generic black. Often a brand color only needs to darken one or two shades to pass.
Yes. WCAG 2.1 success criterion 1.4.11 (non-text contrast) requires 3:1 for the visual parts of UI components — button boundaries, form field borders, icons, toggle states and focus indicators — against their adjacent colors. That is why this tool includes a separate "UI / graphics" check, and why a pair that fails for paragraphs may still be fine for an icon.
In Chromium-based browsers (Chrome, Edge, Brave) the Pick buttons use the EyeDropper API, which lets you sample any pixel on your screen — another tab, a Figma frame, a PDF, anything visible. In browsers without EyeDropper support, paste 3- or 6-digit hex codes instead; the recent-history row keeps your last eight pairs so you can compare candidates.
WCAG Contrast Checker is 100% free — no signup, no watermarks and no usage limits. It’s one of 200+ free tools we build and give away.
Never. Everything is processed locally in your browser — safe for secrets, tokens and proprietary code.
More Developer Tools
From our collection of 317 free tools.
People also use
We built this. We can build yours.
WCAG Contrast Checker is one of 200+ free tools from Workaholic Developers — a software & AI studio. Need a website, app, AI agent or automation? Let’s talk.
🇮🇳 Built by Workaholic Developers
We built this little toy in days. Imagine what we’ll build for you.
AI agents, web apps, automation, custom tools — designed and engineered fast, on whatever tech fits the job. If you can describe it, we can build it.