Contrast Checker
Enter a text color and a background color to check the WCAG contrast ratio, and see at a glance whether it passes AA and AAA for normal and large text — with a live preview. Everything runs in your browser; nothing is uploaded.
What is the Contrast Checker?
The Contrast Checker is a free, instant WCAG contrast ratio tool for text and its background. Enter a text color and a background color to check the WCAG contrast ratio, and it tells you not just the number but whether that pairing actually passes the accessibility thresholds your design needs to meet. It is built for the moment you are picking colors and just need to know: is this readable, and is it compliant?
How to use it
- Type or pick your text (foreground) color — paste a HEX code like
#222222or use the color picker. - Set your background color the same way.
- Read the contrast ratio (for example
8.59:1) and the four pass/fail badges — Normal AA, Normal AAA, Large AA, and Large AAA — which update the instant you change either color. - Glance at the live preview, where a real sentence is rendered in your exact colors at normal and large sizes, and tap Swap to flip foreground and background. Get your answer in a second and get back to designing.
The method behind it
Contrast is measured by the official WCAG formula. Each color's red, green,
and blue channels are first converted from sRGB to linear light, then
weighted into a single relative luminance value L.
The contrast ratio is (L1 + 0.05) / (L2 + 0.05), where
L1 is the lighter color's luminance and L2 the
darker. Results run from 1:1 (two identical colors) to
21:1 (pure black on pure white). The thresholds that matter:
normal text needs 4.5:1 for AA and 7:1
for AAA; large text (about 24px, or 18.66px when bold)
needs only 3:1 for AA and 4.5:1 for AAA. Because
larger glyphs stay legible at lower contrast, the bar is relaxed for them —
and this tool judges both cases separately.
Examples
- #222222 text on #FFFFFF → ratio
15.3:1. Passes AA and AAA for both normal and large text. A safe, high-contrast body pairing. - #777777 text on #FFFFFF → ratio
4.48:1. Fails Normal AA (needs 4.5:1) by a hair, but passes Large AA. A classic "looks fine, barely fails" gray. - #FFFFFF text on #1E90FF (Dodger Blue) → ratio
3.07:1. Fails Normal AA, passes Large AA — fine for a big button label, not for body copy.
Common use cases
- Designers verifying a palette before handing off specs.
- Front-end developers checking a CSS color pair against the design system.
- Accessibility auditors documenting WCAG AA/AAA conformance for a report or VPAT.
- Content and email teams confirming link, caption, and overlay text stay readable.
- Anyone sanity-checking that pale gray placeholder text or a colored button label is actually legible.
Why use this one
Most contrast checkers hand you a ratio and a terse verdict. This one shows separate AA and AAA badges for normal and large text so you know exactly which bar you clear, renders a real sentence in your chosen colors so you trust your eyes as well as the math, and runs entirely in your browser — no sign-up, nothing uploaded, instant on mobile. It can even name each color you test using the shared color-naming engine. The tool's own keyboard and screen-reader friendliness is part of the point: an accessibility tool should itself be accessible. For the color side of the job, pair it with the Color Namer to identify a shade, Hex to RGB to convert codes, or Color Names to browse named colors by family.
Frequently asked questions
What is a good contrast ratio for text?
WCAG 2.x sets the bar by conformance level and text size. For normal-size body text you need at least 4.5:1 to pass level AA and 7:1 to pass the stricter AAA. Large text — roughly 24px and up, or 18.66px and up if bold — only needs 3:1 for AA and 4.5:1 for AAA, because bigger letters stay legible at lower contrast. This checker shows your exact ratio and tells you which of those four thresholds you pass.
How is the contrast ratio calculated?
It follows the official WCAG formula. Each color's sRGB channels are linearized, combined into a relative luminance (L), and the ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color and L2 the darker. The result ranges from 1:1 (identical colors) to 21:1 (pure black on pure white). The tool runs this calculation live as you change either color.
What is the difference between WCAG AA and AAA?
AA is the level most laws, contracts, and accessibility audits require — it is the practical baseline for an accessible site. AAA is a higher bar that not all content can realistically meet, so it is treated as an enhancement rather than a hard requirement. This tool reports both so you can target AA confidently and reach for AAA where the design allows.
Why does accessible color contrast matter?
Low contrast makes text hard or impossible to read for people with low vision, color vision deficiencies, or anyone on a glary screen in bright sunlight. Meeting WCAG contrast is also a legal and procurement requirement in many regions (for example ADA-related guidance in the US and EN 301 549 in the EU). Good contrast simply makes a product more usable for everyone.
Are my colors sent to a server?
No. All parsing, the WCAG luminance and ratio math, and the live preview run entirely in your browser with local JavaScript. The colors you test are never uploaded, logged, or stored, and the tool keeps working offline once the page has loaded.