Accessibility
Color Contrast Checker
Enter a text color and a background color to get the WCAG contrast ratio instantly, with AA and AAA pass/fail results for normal and large text and a live preview. No account, no limits, computed entirely in your browser.
Contrast ratio
9.22:1
Large text at 24px
Normal text at 16px — the quick brown fox jumps over the lazy dog.
AA normal
4.5:1 needed
Pass
AA large
3:1 needed
Pass
AAA normal
7:1 needed
Pass
AAA large
4.5:1 needed
Pass
Checked with the WCAG 2 relative-luminance formula. Translucent text colors are flattened over the background first, and translucent backgrounds over white, so the ratio matches what actually renders.
Building a full palette?
The free color picker adds a screen eyedropper, color harmonies, a palette builder, and CSS, JSON, and Tailwind export. One free account, yours for life.
How it works
Check contrast in three steps
- 1Enter your text color and background color, with the swatch pickers or as HEX, RGB, or HSL values.
- 2Read the live contrast ratio and the AA and AAA results for normal and large text, with a preview of real text in your colors.
- 3Adjust either color until every level you need passes, then copy the final values into your CSS.
The thresholds at a glance
Large text means at least 24px, or about 18.7px bold. Everything smaller counts as normal text.
| Level | Normal text | Large text |
|---|---|---|
| WCAG AA | 4.5:1 | 3:1 |
| WCAG AAA | 7:1 | 4.5:1 |
What you get
Everything included, free
Live WCAG ratio
The contrast ratio recalculates on every keystroke, from 1:1 up to the maximum 21:1 for black on white.
AA and AAA at both sizes
Four verdicts at once: AA and AAA, each for normal text and large text, so you see exactly which uses pass.
Real text preview
Sample text renders in your exact colors at normal and large sizes while you tune them.
One-click swap
Flip foreground and background instantly to test inverted treatments of the same pair.
Translucent colors handled
Text colors with alpha are flattened over the background before checking, matching what actually renders on screen.
The WCAG thresholds: 4.5:1, 3:1, and 7:1
The numbers come from studies of typical vision loss. A ratio of 4.5:1 compensates for the contrast sensitivity lost with moderately low vision or aging eyes, which is why WCAG AA requires it for normal body text. Large text has thicker strokes that stay legible at lower contrast, so its AA threshold relaxes to 3:1, the same figure WCAG 2.1 applies to icons and UI component boundaries. AAA raises normal text to 7:1 for audiences and contexts that need more headroom.
In practice, treat 4.5:1 as the floor for anything people read and 3:1 as the floor for everything else that carries meaning. Passing AA is the widely accepted legal and practical baseline; AAA is worth targeting for long-form reading, small type, or products with older audiences. A pair that fails by a little usually gets there by darkening the darker color slightly rather than redesigning the palette.
Passing contrast without wrecking your palette
Contrast is mostly a lightness problem, so fix it in HSL. Keep the hue and saturation that make the color yours and move lightness until the ratio clears the threshold: a brand green that fails as text on white will usually pass after dropping lightness ten or fifteen points, and it still reads as the same green. Checking a few candidate steps here takes seconds, and the full color picker can generate those lightness variations for you and export the winners straight to CSS.
FAQ
Frequently asked questions
What contrast ratio do I need?
For WCAG AA, normal text needs at least 4.5:1 and large text needs at least 3:1. The stricter AAA level asks for 7:1 on normal text and 4.5:1 on large text. Black on white is 21:1, the highest possible ratio.
What counts as large text?
WCAG defines large text as at least 18 point, about 24 CSS pixels, or at least 14 point bold, about 18.7 CSS pixels. Everything smaller is normal text and held to the higher thresholds.
How is the contrast ratio calculated?
Each color is reduced to its relative luminance, a measure of how bright it appears that weights green most and blue least. The ratio is (lighter + 0.05) / (darker + 0.05), which is why it runs from 1:1 for identical colors to 21:1 for black on white. This checker uses the WCAG 2 formula exactly.
Do icons and UI components have a requirement too?
Yes. WCAG 2.1 asks for at least 3:1 between graphical objects or UI component boundaries and their adjacent colors. You can check those pairs here the same way; aim for 3:1 or better.
What if my text color is translucent?
The checker flattens it first. A text color with alpha is composited over the background, and a translucent background is composited over white, so the ratio reflects the colors your users actually see.
Do I need an account?
No. The checker is free for everyone with no sign-in, and every calculation happens in your browser.
More free tools
Keep the streak going
From the same studio
Bravely Studios builds nine cross-platform desktop utilities — screenshots, PDF signing, remote desktop and more — with one plan that unlocks all of them. Free tools are how we say hello.