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 about 18.67px+ 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
How the ratio is calculated and rounded
Each HEX code becomes three sRGB channel values from 0 to 255, and the checker runs the WCAG 2.x formula on them.
- Linearize: each channel is divided by 255. Values up to 0.04045 are divided by 12.92; higher ones become ((c + 0.055) / 1.055)2.4. WCAG texts before May 2021 print 0.03928 as the cutoff, but no 8-bit value falls between the two, so the results match.
- Relative luminance: L = 0.2126 R + 0.7152 G + 0.0722 B.
- Ratio: (lighter L + 0.05) ÷ (darker L + 0.05), from 1.00 to 21.00. Swapping the two colors cannot change it.
- Verdicts: a badge passes when the ratio is at or above 4.5 (AA normal), 3 (AA large), 7 (AAA normal), or 4.5 (AAA large). The label next to the number follows the same cutoffs: Excellent, Good, Large text only, Poor.
#767676 on #FFFFFF4.54 · AA normal pass#767776 on #FFFFFFshows 4.50 · AA normal fail#777777 on #FFFFFF4.48 · large text only#959595 on #FFFFFFshows 3.00 · fails every levelThe readout rounds to two decimals, but the badges use the unrounded ratio. #767776 is one green step away from #767676; its true ratio is 4.496, so the readout says 4.50 while AA Normal says FAIL. #959595 shows 3.00, is really 2.995, and fails all four. The chips under Examples, Favorites, and History round to one decimal, so #777777 (fails AA Normal) and #767676 (passes) both read 4.5:1. Near a threshold, trust the badge rather than the number.
What the fields accept, and what the buttons change
Both text fields take HEX only. A value they can't read gets a red border, and the ratio, badges, and preview keep showing the last valid pair until you fix it.
- Accepted: three- or six-digit HEX in any case, with or without
#.#ABCmeans#AABBCC. - Not accepted: four- or eight-digit HEX and other alpha values,
rgb(),hsl(), and color names. For anrgb()orhsl()value, get the HEX code from the Color Code Converter first. - Make it pass always aims for 7:1, even when the pair already passes AA. It moves the lighter color toward white and the darker one toward black by the same fraction, stopping at the first step that reaches 7:1; pure white or black stays put. The ember pair above,
#823911on#391505(1.98:1), becomes#BC9580on#1E0B03(7.02:1). In the ember example the hue shifts by less than one degree, but the colors come out paler and darker, so check the result against your brand. - History and favorites: a pair joins History after about a second without changes. History keeps the last ten, Favorites up to 20, both in this browser's local storage.
What this checker does not measure
The number describes two flat sRGB colors, nothing more.
- Your font size. The tool can't see your text, so it shows both the normal and the large verdict and leaves the choice to you.
- Transparency, gradients, and photos. Semi-transparent text blends with what sits behind it, and an image gives text many backgrounds. Take a screenshot, sample the text and the lightest and darkest spots behind it with the Image Color Picker, and test each pair.
- APCA. The math is the WCAG 2.x ratio behind success criteria 1.4.3 (AA) and 1.4.6 (AAA). APCA, a different contrast model that has been discussed for WCAG 3, is not calculated, and its scores use a different scale.
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 the four AA and AAA text-contrast thresholds 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 to preview the inverted pair. The ratio stays the same; a real dark theme uses different colors, so test those too.
Check a color pair in three steps
-
Pick your text color
Click the big swatch to open the color picker, or type a three- or six-digit HEX code into the field below it.
-
Pick the background
Same on the right side. The preview and the ratio update live as long as both fields hold a valid code.
-
Read the verdicts
A green PASS means the pair clears that row's threshold; read the row for your text size. If AA Normal fails, move the text further from the background in lightness and keep the hue.
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.
- Dark mode color palettes — A pair that passes on white can fail on near-black — how to build a dark palette that measures up.
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 about 18.67px+ 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 18pt (24px) at regular weight, or at least 14pt (about 18.67px) 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.