Adjust text only
Background stays unchanged.
— Contrast Checker
Check any foreground and background pair against WCAG AA and AAA, see the UI and graphics verdict, and get the smallest lightness-only fix. Everything stays in your browser.
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 and the five pass/fail badges for normal text, large text, and UI components or meaningful graphics.
- If normal text fails, choose AA or AAA under Fix a failing pair, then apply the smallest lightness-only repair to the text or background while the other color stays fixed.
- Glance at the live preview, or tap Swap to flip foreground and background. Get your answer — and a usable repair — without trial and error.
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, adds the independent 3:1 UI and meaningful-graphics verdict, and suggests the smallest lightness-only foreground or background repair when normal text fails. It also 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. Required visual information for UI components and meaningful graphics also needs 3:1 for AA. This checker reports all five results.
How does the suggested contrast fix work?
Choose Normal AA or Normal AAA. The checker keeps either your background or text color fixed, preserves the other color's HSL hue and saturation, and searches lighter and darker lightness values for a passing boundary. It shows the passing option with the smaller OKLab distance from your original. This is a smallest lightness-only repair, not a claim that the suggestion is the globally nearest color in every color space.
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.