Color Contrast Checker
Check whether text is readable on a background — enter a foreground and a background color, and get the WCAG contrast ratio with pass or fail for AA and AAA, at normal and large text sizes, plus a live preview. Free, no signup, everything runs in your browser.
Note: this tool checks one color pair against the WCAG relative-luminance formula only. It is not a full accessibility audit — font size and weight, focus states, keyboard behavior and screen-reader experience are out of scope — and it is not legal advice for ADA or EAA compliance.
What Is the Color Contrast Checker?
A free color contrast checker is a tool that measures how readable text is against its background, using the WCAG relative-luminance formula. Enter a foreground color and a background color, and the tool returns the contrast ratio plus pass or fail for AA normal text (4.5:1), AA large text (3:1), AAA normal text (7:1) and AAA large text (4.5:1), with a live preview of the pair. If you need a color contrast checker for a website, a theme or a document, this page gives you the verdict in one click.
What Is It Used For?
Designers use it to pick text colors that stay readable. Developers use it to check themes and components before release. Bloggers use it to test link and button colors. Accessibility reviewers use it as the first check in a color audit. Anyone choosing a palette uses it to avoid combinations that strain readers.
Key Benefits
- Exact WCAG ratio — the standard relative-luminance calculation, not an estimate.
- All four verdicts — AA and AAA, each at normal and large text sizes, in one report.
- Live preview — see the actual pair as heading and body text, not just numbers.
- Color picker and typed input — pick visually or paste a hex or rgb value.
- One-click swap — reverse foreground and background to test the pair both ways.
- Completely free and private — no signup, and nothing you enter ever leaves your browser.
How to Use This Free Color Contrast Checker
- Choose the foreground (text) color with the picker, or type a hex or rgb value.
- Choose the background color the same way.
- Click Check Contrast. The ratio and the four pass/fail verdicts appear below the preview.
- Read the preview with your own eyes too — numbers and perception do not always agree.
- Use Swap colors to test the reversed pair, and adjust the lighter or darker color until the level you need passes.
Common Mistakes to Avoid With Color Contrast
- Testing only normal text. Large text has a lower bar (3:1 for AA), but body text must meet 4.5:1 — check the size you actually ship.
- Trusting the ratio alone. A passing pair can still feel hard to read in a thin font or at small sizes. Pair the verdict with the live preview.
- Checking colors in isolation. Gradients, images and overlays change effective contrast. Test the pair as it actually appears on the page.
- Assuming a pass means full accessibility. Contrast is one check among many — focus states, keyboard navigation and screen-reader behavior are separate jobs.
- Treating the result as legal compliance. This tool reports a formula result, not a legal opinion. Accessibility law depends on jurisdiction and context.
Frequently Asked Questions
Is this color contrast checker free? Yes, completely free — no signup, no limits, no account.
Is anything I enter uploaded anywhere? No. Checking happens entirely in your browser, so your colors never leave your device.
What is a contrast ratio? A number from 1:1 (no contrast, identical colors) to 21:1 (black on white), computed from the two colors' relative luminance under the WCAG formula. Higher means easier to distinguish.
What is the difference between AA and AAA? AA is the standard level most sites aim for; AAA is the stricter enhanced level. AA requires 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1 for normal text and 4.5:1 for large text.
What counts as large text? Under WCAG, text at least 18 points (about 24 pixels) in size, or at least 14 points (about 18.66 pixels) when bold.
What formats can I type? Hex values such as #222222 or #fff, and rgb() values such as rgb(34, 34, 34). The picker writes hex values for you.
Why did a pair I like fail? Because similar lightness values produce low ratios even when the hues differ. Light grey text on white, or two mid-tone colors, commonly fail — darken the text or lighten the background.
Does passing mean my site is accessible? No. Contrast is one check. Keyboard access, focus visibility, semantic markup and screen-reader behavior all matter separately.
Does it check gradients or images behind text? No. It checks one solid foreground against one solid background. Text over photos or gradients needs manual judgment at the lightest and darkest points.
Is this legal advice for ADA or EAA compliance? No. It reports a formula result only. Legal compliance depends on your jurisdiction, your site, and requirements beyond contrast.
Can I check link colors too? Yes — any text color against any background. Check links against both the page background and the surrounding body text, since links must also be distinguishable from plain text.
What if my brand color fails? Keep the brand color for large headings, logos or accents, and use a darker or lighter variant for body text. Brand identity and readable text can coexist.
Does it work on mobile? Yes. The tool runs in any modern mobile browser and the layout adjusts to small screens.
Final Thoughts
Contrast is the cheapest accessibility win there is: two colors, one number, and readers who no longer squint. Check the pair here, trust the preview as well as the verdict, and ship text people can actually read.
Related Tools
Readability Checker
Check how easy your text is to read, with Flesch scores and grade levels.
Open Tool