Contrast Checker
Test a text color against a background color and see instantly whether it meets WCAG AA and AAA accessibility standards.
Large text — 24px headline
Normal text (16px) — The quick brown fox jumps over the lazy dog. Readable body copy needs at least a 4.5:1 contrast ratio.
Large text = 24px+ regular or 18.5px+ bold. Details in WCAG Contrast Ratios Explained.
Try an example
★ Favorites
Hit the ★ Save button to keep a pair here — saved in this browser only.
History
Pairs you check will appear here — saved in this browser only.
Same photo, one pass and one fail
Two color pairs pulled from this lamp-lit photo's palette. Beautiful together in the frame — but only one of them is readable as text.
9.52 : 1 · AA + AAA PASS
1.98 : 1 · FAIL
What is a WCAG contrast checker?
A contrast checker measures the brightness difference between a text color and its background, expressed as a ratio from 1:1 (invisible) to 21:1 (black on white). The Web Content Accessibility Guidelines (WCAG) define minimum ratios so that text stays readable for people with low vision — and for everyone reading a phone in sunlight. This tool computes the exact WCAG 2.x relative-luminance formula and grades your pair against every AA and AAA rule at once.
Exact WCAG math
Uses the official gamma-corrected relative luminance formula — the same numbers an accessibility audit will produce.
Big, honest preview
See your actual pair rendered as a 24px headline and 16px body text while you adjust — not just a number.
AA and AAA at once
Four instant verdicts: AA and AAA, for normal and large text. No mental lookup tables.
One-click swap
Flip text and background instantly to test dark-mode inversions — ratios change in both directions.
Check a color pair in three steps
-
Pick your text color
Click the big swatch to open the color picker, or type a HEX code directly into the field below it.
-
Pick the background
Same on the right side. The preview and the ratio update live with every change.
-
Read the verdicts
Green PASS badges mean you're safe. If AA Normal fails, darken the text a step — keep the hue, move the lightness.
Passing the number isn't the whole job
The ratio is necessary, not sufficient. Four things the number won't catch:
- Thin fonts cheat the math. A 300-weight font at 4.5:1 reads worse than a 600-weight at the same ratio. If your type is light, aim a level higher than required — or press Make it pass and take the 7:1 pair.
- Placeholder and disabled text are the classic fail. The pale gray that "looks right" for placeholders is usually 2:1–3:1. WCAG exempts truly disabled controls, but placeholder text that carries information isn't exempt.
- Don't rely on color alone. A link that differs from body text only by hue fails a different WCAG rule no ratio can fix — add underlines, weight, or icons.
- Check both themes. A pair that passes in light mode can fail after a naive dark-mode inversion. Test the exact rendered colors of each theme, not the token names.
Related tools & guides
- Shades & Tints Generator — Failing pair? Generate a full scale and pick the nearest step that passes.
- Colorblind Simulator — Contrast is only half of accessibility — check how your colors read without red or green.
- WCAG contrast ratios explained — Where 4.5:1 and 7:1 come from, and when large-text rules apply.
Frequently asked questions
What contrast ratio do I actually need?
For body text, 4.5:1 (WCAG AA) is the number to remember — it's what accessibility laws generally reference. Large text (24px+ regular, or 18.5px+ bold) can go down to 3:1. AAA raises those bars to 7:1 and 4.5:1 for reading-heavy content.
What counts as "large text"?
At least 24px at regular weight, or at least 18.5px when bold. Everything smaller is judged by the stricter "normal text" thresholds.
Is AAA required?
Rarely. AA is the practical legal and industry baseline. AAA is worth targeting for documentation, articles, and other long-form reading surfaces — treat it as a quality goal for body text, not a blanket requirement.
Does this apply to buttons and icons too?
Since WCAG 2.1, non-text UI elements — icons, input borders, focus rings — need at least 3:1 against adjacent colors. Test those pairs here the same way; use the 3:1 "AA Large" badge as your reference.
My brand color fails. Do I need a new brand?
No — you need a darker or lighter step of the same hue for text use. Keep the hue and saturation, shift the lightness until the ratio passes, and keep the original shade for large decorative elements. Details in WCAG Contrast Ratios Explained.