Open the Vootkit workspace.
01Accessibility toolTool result
Contrast Checker
Check text against WCAG AA and AAA.
100% FreeRuns instantlyNo watermark
- 1Choose toolOpen the Vootkit workspace.
- 2Add inputProvide the content or settings.
- 3ProcessLet the browser do the work.
Private by designProcessed on your device where possible.
Works on any deviceDesktop, tablet and mobile browsers.
No installationOpen the page and start working.
Always free coreUse the free plan for everyday tasks.
How to use Contrast Checker
Provide the content or settings.
02Let the browser do the work.
03Copy, download or continue.
04Your files stay private
Your work is processed locally in your browser where possible and is never added to a Vootkit upload library.
Learn more about privacyLow-contrast text is the single most common accessibility failure on the web, and it is also the easiest to fix — it is a number you can check in seconds before the design ships.
What Contrast Checker does
Calculates the contrast ratio between a foreground and background colour and reports whether it meets each WCAG threshold.
It shows all four results rather than a single pass or fail, because the requirement depends on text size. A colour pair that fails for body text can be perfectly acceptable for a heading.
WCAG thresholds
| Normal text, AA | 4.5:1 — the usual legal and practical minimum |
|---|---|
| Normal text, AAA | 7:1 — enhanced |
| Large text, AA | 3:1 |
| Large text, AAA | 4.5:1 |
| "Large" means | About 18pt, or 14pt bold |
| Maximum possible | 21:1 — pure black on pure white |
| Not covered | Colour blindness — high contrast can still be indistinguishable |
Detailed steps
- Enter your foreground and background hex colours.
- Read the ratio and check it against the size of text you are using.
- Aim for 4.5:1 for body text as the working minimum.
Worth knowing
Grey placeholder text is where this fails most often. Light grey on white looks refined in a mockup and becomes unreadable in sunlight, on a cheap screen, or to anyone over about fifty. If placeholder text carries meaning, it needs to clear 4.5:1 like any other text.
Frequently Asked Questions
What counts as large text?
Roughly 18pt regular or 14pt bold — about 24px and 18.66px. Below that the stricter 4.5:1 threshold applies. The exemption exists because larger letterforms are inherently easier to read at lower contrast.
Is passing AA enough?
It is the level most accessibility regulations reference, so it is the practical minimum. AAA is better for body text where you can achieve it, and is genuinely difficult with brand colours that were never chosen with contrast in mind.
Does this cover colour blindness?
No, and that is an important gap. Contrast ratio is about luminance, so red and green of similar brightness can pass comfortably and still be indistinguishable to someone with red-green colour blindness. Use the Colour Blind Simulator as well.
Do icons and buttons need to pass?
Meaningful non-text elements — icons that carry information, input borders, focus indicators — need 3:1 under WCAG 2.1. Purely decorative graphics do not.
Is Contrast Checker free?
Yes. The Vootkit free plan includes 5 tool runs a day. Upgrade to Vootkit Pro for unlimited daily use, an ad-free workspace and saved workflows.
Are my files uploaded?
No. Contrast Checker runs entirely in your browser — your file is processed on your own device and never sent to a server. There is nothing for us to store or delete.
Do I need to install anything?
No. Contrast Checker works in any modern browser on desktop, tablet or phone. Open the page and start.
How often can I use it? Is there a daily limit?
On the free plan you get 5 tool runs a day. When you reach the limit you'll see a prompt to upgrade, and it resets the next day. Vootkit Pro removes the cap entirely for unlimited daily use.
Recently viewed
This tool processes everything locally in your browser. You can disconnect from the internet after the page loads and it will still work.