Color Contrast Checker
Pick a text color and a background color and get the WCAG contrast ratio, AA/AAA pass or fail, and a live preview — all in your browser.
The quick brown fox jumps over the lazy dog.
Large text preview
How it works
Pick two colors
Use the color pickers or type exact hex values for your text and background.
Read the ratio
The contrast ratio and AA/AAA pass/fail update instantly, for both normal and large text.
See it live
The preview shows your actual colors so you can judge readability, not just the number.
What people use a contrast checker for
Low-contrast text is one of the most common accessibility failures on the web, and one of the easiest to catch before shipping.
Auditing a design system's palette
Meeting WCAG/ADA/Section 508 checks
Choosing readable button/text colors
Checking dark-mode color pairs
Client-side design QA before launch
A few things worth knowing
The contrast ratio is calculated from each color's relative luminance — a W3C-defined measure of perceived brightness that accounts for sRGB gamma and weights red, green and blue differently, since the eye is more sensitive to green than blue. The ratio between the lighter and darker of two colors ranges from 1:1 (no contrast at all, like white on white) to 21:1 (the maximum possible, black on white) — this tool's math is verified against both of those reference values plus several known intermediate ones.
WCAG sets different thresholds depending on text size, because larger text is legible at lower contrast: normal text needs 4.5:1 to pass AA (7:1 for the stricter AAA level), while large text — 18pt/24px regular or 14pt/~18.7px bold — only needs 3:1 for AA (4.5:1 for AAA). That's why this tool shows both a normal-size and a large-size preview line side by side, since the same two colors can pass for a heading but fail for body copy.
Passing the numeric ratio is necessary but not the whole accessibility picture — it says nothing about color blindness, since it's based on brightness rather than hue. A red-on-green combination can have a technically fine contrast ratio while still being hard for some colorblind users to distinguish; pairing color with a second cue (shape, icon, underline) is still worth doing for anything meaning-bearing.
Frequently asked questions
What do AA and AAA mean?
They're the two conformance levels in the WCAG (Web Content Accessibility Guidelines) contrast requirement. AA is the standard most sites aim for and the one most accessibility audits and laws reference: 4.5:1 for normal text, 3:1 for large text. AAA is the stricter, optional level: 7:1 for normal text, 4.5:1 for large text — better for users with low vision, but not always achievable with every brand palette.
What counts as "large text" for the lower thresholds?
WCAG defines large text as at least 18pt (24px) regular weight, or at least 14pt (about 18.66px) bold. Anything smaller uses the stricter "normal text" thresholds, since small text is harder to read at low contrast.
How is the contrast ratio actually calculated?
It's the W3C's own formula: each color's sRGB channels are converted to "relative luminance" (roughly, perceived brightness accounting for how the eye and sRGB gamma respond differently to red, green and blue), then the ratio is (lighter luminance + 0.05) divided by (darker luminance + 0.05). The result ranges from 1:1 (identical colors, or any color against itself) to 21:1 (pure black against pure white).
Does contrast ratio account for color blindness?
No, not directly. The WCAG contrast formula is based on luminance (brightness), not hue, so it doesn't specifically model how a red/green colorblind user perceives a red-on-green combination versus a colorblind-neutral one. Passing the contrast ratio is necessary but not sufficient for full accessibility — pairing color with a second visual cue (an icon, underline, or label) still matters for conveying meaning that isn't purely brightness-based.
Why did black on white come out to exactly 21:1?
White has the maximum possible relative luminance (1) and black has the minimum (0), so the ratio formula reduces to (1 + 0.05) / (0 + 0.05) = 21 exactly — the highest contrast ratio two colors can have. It's the standard reference value used to sanity-check any contrast formula implementation.
Is this contrast checker free to use?
Yes, completely free, with no account, no sign-up, and everything computed locally in your browser.