Contrast Checker: Free Online WCAG Contrast Checker — How-To Guide

Ever picked a text color that looked fine on your screen, only to have someone say they can't read it? Low color contrast is one of the most common accessibility problems on the web — and one of the easiest to fix, if you check before you ship. The Contrast Checker lets you compare any foreground and background color and see instantly whether the combination passes WCAG accessibility standards.

Try it free: Contrast Checker

What the Tool Does

The Contrast Checker compares a foreground color (your text) against a background color and calculates the WCAG contrast ratio between them. It shows you a live preview of readable text in your chosen colors, the exact ratio (for example, 16.95:1), and whether the combination passes the WCAG AA requirements for normal and large text. It also generates ready-to-use CSS output you can copy into your project.

How to Use It: Step by Step

Step 1: Pick your foreground color. Open the tool and enter or select the color of your text — the foreground. This is the color you're planning to use for headings, paragraphs, buttons, or any other text element.

Step 2: Pick your background color. Enter or select the background color the text will sit on — the surface behind it, whether that's a page background, a card, or a button fill.

Step 3: Read the preview and ratio. The tool shows a readable preview text sample rendered in your exact colors, so you can judge the combination with your own eyes. Below it, you'll see the calculated contrast ratio and a clear pass/fail verdict — for example, "Ratio 16.95:1. Normal AA passes."

Step 4: Copy the generated CSS. Once you're happy with the combination, the tool generates the CSS output for you. Copy the value or snippet and paste it straight into your stylesheet — no need to type out hex values by hand.

Step 5: Adjust and re-check. If the combination fails, tweak one of the colors — usually darkening the text or lightening the background — and re-run the check until it passes.

Practical Tips

Know the numbers that matter. WCAG AA expects at least 4.5:1 for normal text and 3:1 for large text. Aim for AAA (7:1 for normal text) when you can — it's not required, but it makes your design readable for far more people.

Check real combinations, not just your palette. Brand color pairs that look fine on a swatch card can fail when actual body text is small and thin. Always test the text size and weight you plan to use, at the size it will actually render.

Test both themes. If your site has a dark mode (or light text on dark cards), check those combinations separately. A pair that passes on a light background often fails when flipped.

Frequently Asked Questions

Q: What ratio should normal text pass?
A: WCAG AA expects at least 4.5:1 for normal text and 3:1 for large text (roughly 18pt or 14pt bold and up). These are the widely accepted minimums for accessibility.

Q: Is my color data uploaded anywhere?
A: No. All color conversion, contrast checks, and CSS generation happen locally in your browser. Nothing is sent to any server.

Q: Should I still test the CSS the tool generates?
A: Yes. The generated snippets are meant to speed up your design work, but the final UI should still be checked in the actual app and theme where it will live, since fonts, rendering, and surrounding colors all affect real-world readability.

Q: Does it work for buttons and icons, not just text?
A: The ratio rules apply to anything a user needs to read or distinguish — text, icon strokes, and interactive boundaries. Paste the colors of any two adjacent elements into the checker to verify them.

Privacy Note

The Contrast Checker runs 100% in your browser — color conversion, contrast calculations, and CSS generation all happen on your device. Your colors and inputs are never uploaded to any server.

Try it free: Contrast Checker