Free Color Contrast Checker
Check text and background contrast against WCAG — with a live preview, lightness sliders, and a one-click fix. Runs entirely in your browser.
What is a color contrast checker?
A color contrast checker measures how readable text is against its background. It calculates the contrast ratio between two colors and compares it to the WCAG accessibility thresholds, so you know whether real users — including those with low vision — can actually read the text.
This checker runs entirely in your browser. Pick a text and a background color, and the ratio, pass/fail badges, and a live preview update instantly — or let it suggest a passing color for you.
How to check color contrast
Pick the colors
Choose your text and background color, or type their HEX codes.
Read the ratio
See the contrast ratio and how it scores against WCAG AA and AAA.
Tune or auto-fix
Nudge the lightness sliders, or press "Suggest" to get the nearest passing text color.
What this tool offers
Live preview
Real sample text in your chosen colors, updated instantly.
AA, AAA & UI badges
Pass/fail for normal text, large text, and 3:1 UI components.
Suggest a fix
One click finds the nearest text color that passes WCAG AA.
Lightness sliders
Fine-tune either color's brightness without re-picking.
Shareable link
Copy a permalink that reopens the exact color pair.
100% in your browser
No account, no upload — fully private.
Why does color contrast matter?
Low-contrast text is one of the most common accessibility failures on the web. Text that looks fine to a designer on a bright monitor can be unreadable for someone with low vision, colour blindness, or simply an old screen in sunlight.
Contrast is also a legal and SEO concern. The WCAG guidelines are referenced by accessibility laws in many countries, and search engines treat a usable, accessible page as a quality signal. Checking contrast takes seconds and removes a whole class of usability problems.
WCAG contrast requirements
The minimum contrast ratio your colors need to pass.
| Use | WCAG AA | WCAG AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text | 3:1 | 4.5:1 |
| UI components & graphics | 3:1 | — |
Large text means 24px or larger, or 19px or larger when bold.
Frequently asked questions
What contrast ratio do I need?
For normal text, aim for at least 4.5:1 to meet WCAG AA — the level most accessibility laws reference. Large text needs 3:1. To meet the stricter AAA level, use 7:1 for normal text and 4.5:1 for large text.
How does "Suggest a passing text color" work?
It keeps your background and your text color's hue, then adjusts the text lightness to the nearest value that reaches a 4.5:1 ratio — WCAG AA for normal text. If no shade of that hue can pass, it falls back to black or white.
What counts as large text?
Large text is 24 pixels or bigger, or 19 pixels or bigger when bold. It is allowed a lower contrast ratio because larger letterforms are easier to read at the same contrast.
Why is there a UI components badge?
WCAG 2.1 requires a 3:1 contrast ratio for meaningful non-text elements — icons, input borders, focus outlines, chart colors. The UI badge checks your pair against that separate 3:1 threshold.
Is this checker private?
Yes. The contrast ratio is calculated entirely in your browser. No colors or data are uploaded or sent to a server. The shareable link only encodes the two HEX values.
More free tools
Run a website? Let Knowster answer your visitors.
Knowster is an AI chat assistant you add to your site in minutes. It replies to customer questions instantly, around the clock.
Get started free