Color Contrast Checker
This color contrast checker calculates the WCAG contrast ratio between any foreground and background color, then grades it instantly against the WCAG 2.1 AA and AAA thresholds — for normal and large text separately. Type a hex code or tap a swatch above and every number updates as you go: the ratio, the live text preview, and all four pass/fail badges at once. Everything runs in your browser — no upload, no account, no server involved.
How to Check Color Contrast Ratio Online
Pick a foreground color and a background color above — type a 3- or 6-digit hex code into either field, or tap the swatch to open your device's native color picker. The ratio, live preview, and all four WCAG badges recalculate the instant either color changes; there's no button to press and nothing to submit. Use the Swap colors button to instantly flip which color is text and which is background — handy for checking a design that could go either way.
Contrast ratio = 4.54:1
AA Normal Pass · AA Large Pass · AAA Normal Fail · AAA Large Pass
Understanding WCAG 2.1 AA and AAA Contrast Requirements
WCAG 2.1 defines two conformance levels for contrast, and each one treats normal-size text and large text differently. Level AA — the bar most accessibility audits and legal standards test against — requires a ratio of at least 4.5:1 for normal text and 3.0:1 for large text (18pt/24px regular weight, or 14pt/18.66px bold, or larger). Level AAA is stricter: 7.0:1 for normal text and 4.5:1 for large text.
All four thresholds are checked at once above, so you can see exactly which level a color pair clears without running the calculator four times.
Testing Text and Background Colors with Hex Codes
Every color field accepts a hex code directly — paste one from a design tool, a CSS file, or
a brand style guide, and the badges update the moment it's valid. A hex code must be exactly
3 or 6 hexadecimal digits (0–9, A–F); the field ignores anything else you type, so pasting a
leading # or extra characters won't break it.
If you'd rather pick visually, tap either color swatch to open your device's built-in color picker instead — both inputs stay in sync, so you can freely switch between typing and picking.
Why Contrast Ratio Matters for Accessible Design
Low contrast is one of the most common — and most fixable — accessibility failures on the web, and one of the few WCAG success criteria that's purely mathematical rather than a judgment call. Text that fails AA is measurably harder to read for anyone with low vision, color blindness, or just a phone screen in bright sunlight, and it's a frequent target in accessibility audits and legal compliance reviews.
Checking contrast at the color-picking stage — before a design ships — is far cheaper than retrofitting it later.
Frequently asked questions
What is the minimum contrast ratio for WCAG AA?
WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3.0:1 for large text (18pt/24px regular weight, or 14pt/18.66px bold, and larger). This checker shows both thresholds — plus the stricter AAA thresholds — for any color pair at once.
What is a good contrast ratio for text?
A contrast ratio of 4.5:1 or higher is the widely accepted baseline for normal-size body text — it's the WCAG 2.1 AA minimum. For maximum readability, especially for users with low vision, aim for 7.0:1 or higher, which meets the stricter AAA level.
What is the WCAG AA contrast ratio for normal text?
4.5:1. Large text — 18pt/24px regular weight or 14pt/18.66px bold and larger — gets a lower bar of 3.0:1, because bigger, bolder glyphs stay legible at less contrast than small body copy.
Is this color contrast checker free to use?
Yes, it's completely free with no account, sign-up, or usage limit. The whole calculation runs in your browser using the standard W3C relative luminance formula — no color is ever sent to a server.
Can I check contrast ratio using hex codes?
Yes. Type a 3- or 6-digit hex code into either the foreground or background field and the ratio and badges update instantly. You can also tap a color swatch to pick visually instead — both inputs stay in sync.
