Skip to content
Free Tools Galaxy
🎯
100% free · no signupRuns in your browser

Color Contrast Checker

Check WCAG contrast between two colors — AA/AAA verdicts for normal and large text.

Best for: Choosing brand palettes, designing buttons and banners, auditing a site for WCAG/ADA/EN 301 549 compliance, or checking that placeholder and disabled-state text is still readable.

Complete guide

Input

Preview: the quick brown fox jumps over the lazy dog.

Small text preview at 12px for a realistic check.

How it's calculated & sources

Method: WCAG 2.x relative-luminance contrast. Thresholds — AA: 4.5:1 normal text, 3:1 large text (≥24px, or ≥18.66px bold). AAA: 7:1 normal, 4.5:1 large.

Free & no sign-up · runs entirely in your browser. Results are estimates for general information, not professional advice — verify important decisions with a qualified expert. Last reviewed June 2026.

How it works

ratio = (L₁ + 0.05) / (L₂ + 0.05)

L is WCAG relative luminance: 0.2126R + 0.7152G + 0.0722B after gamma linearization. Ratios run from 1:1 (identical) to 21:1 (black on white).

Example

#51536C text on a #F7F8FF background has a ratio of 7.07:1 — passing AA and AAA for normal text.

Frequently asked questions

What counts as large text?+

24px and up, or 18.66px and up if bold. Large text only needs 3:1 (AA) or 4.5:1 (AAA).

Does this work for gradients or images?+

No — WCAG ratios are defined between two solid colors. For text on gradients or photos, test against the lightest and darkest area behind the text.

AA or AAA — which should I target?+

AA is the accepted legal/industry baseline. AAA is stricter and ideal for body text, but not always practical for decorative UI.

Continue your journey

Where people usually head next.

🌈
CSS Gradient Generator
Live linear gradient builder with angle, two colors and CSS output.
🌑
Box Shadow Generator
Visual CSS box-shadow generator with X/Y/blur/spread/color and live preview.
◼️
Border Radius Generator
Adjust each corner of border-radius with a live preview.
🎨
Color Palette Generator
Generate tints and shades from any base color.

Complete guide

Quick answers

Short, sourced answers to the questions people (and AI assistants) ask most.

What is Color Contrast?
The Contrast Checker measures the WCAG contrast ratio between a text color and its background, telling you whether the combination is readable enough — and legally compliant where accessibility standards apply.
Why does Color Contrast matter?
A ratio of 4.5:1 or better means normal body text meets WCAG AA — the standard most laws and design systems reference. Large text (18pt+, or 14pt bold) passes AA at 3:1.
How is Color Contrast calculated?
It computes the relative luminance of both colors per the WCAG formula and reports the ratio (1:1 = identical, 21:1 = black on white), checked against the AA and AAA thresholds for normal and large text. Formula: ratio = (L_lighter + 0.05) / (L_darker + 0.05), where L = relative luminance.
What are common color contrast mistakes?
Checking only body text — placeholders, disabled states and text over images fail most often.
When should you use the Color Contrast Checker?
Choosing brand palettes, designing buttons and banners, auditing a site for WCAG/ADA/EN 301 549 compliance, or checking that placeholder and disabled-state text is still readable.

What is the Color Contrast Checker?

The Contrast Checker measures the WCAG contrast ratio between a text color and its background, telling you whether the combination is readable enough — and legally compliant where accessibility standards apply.

How the Color Contrast Checker works

It computes the relative luminance of both colors per the WCAG formula and reports the ratio (1:1 = identical, 21:1 = black on white), checked against the AA and AAA thresholds for normal and large text.

ratio = (L_lighter + 0.05) / (L_darker + 0.05), where L = relative luminance
  1. Enter the text color and background color (hex, or pick visually).
  2. Read the computed ratio and the pass/fail grid: AA needs 4.5:1 for normal text, 3:1 for large text; AAA needs 7:1 and 4.5:1.
  3. Adjust either color until every level you target passes — the preview updates live.

Key terms

WCAG AA / AAA:
The Web Content Accessibility Guidelines' two conformance levels for contrast. AA is the common legal/industry target; AAA is stricter for maximum readability.
relative luminance:
A measure of a color's perceived brightness, weighted for human vision (green counts most, blue least).

Common mistakes to avoid

  • Checking only body text — placeholders, disabled states and text over images fail most often.
  • Treating 4.49:1 as 'close enough': audits and lawsuits use the hard threshold.
  • Relying on color alone to convey meaning; contrast passes still need non-color cues for color-blind users.

Keywords: contrast checker, wcag contrast, color contrast ratio, accessibility checker, aa aaa contrast.

Computed entirely in your browser.

Sources: WCAG 2.2 — Contrast (Minimum) 1.4.3

Reviewed by the Free Tools Galaxy editorial team · Updated June 2026 · Calculated privately in your browser.

Frequently asked questions

Is the Color Contrast Checker free to use?+

Yes. Every tool on Free Tools Galaxy is 100% free, runs in your browser and requires no signup.

How accurate is the Color Contrast Checker?+

Color Contrast Checker uses the standard color contrast checker formula in double-precision arithmetic, so the same inputs always produce the same result and you can verify any figure by hand. It is an educational estimate — real-world outcomes depend on your actual rates, rules and assumptions.

Do you store my inputs?+

No. The Color Contrast Checker runs entirely in your browser. Nothing is uploaded or saved to a server.

Can I use the Color Contrast Checker on mobile?+

Yes — the interface is fully responsive and works on phones, tablets and desktops.

What are common mistakes to avoid?+

The most frequent mistake is mixing units. Double-check your inputs use a single, consistent unit before clicking Calculate.

Explore more

Popular tools

📚
Study Planner
Plan study hours across subjects based on topics and days left.
➕
Simple Calculator
Basic arithmetic for two numbers: add, subtract, multiply, divide.
Ⅻ
Roman Numeral Converter
Convert between Arabic numbers (1–3999) and Roman numerals.
🚭
Smoking Cost Calculator
Lifetime cost of cigarettes per day, week, year.

Explore other categories

🧾
SSI Payment Calculator
Estimate your 2026 monthly Supplemental Security Income (SSI) from your income and living situation.
🏦
PPF Calculator
Project your Public Provident Fund maturity with a full year-by-year schedule.
💼
EPF Calculator
Estimate your Employees' Provident Fund corpus at retirement.
🧓
NPS Calculator
Project your National Pension System corpus, lump sum and monthly pension.
Related searches: color palette generator, css gradient generator, box shadow generator

Smart Autopilot

AI-style routing · 100% on-device

Based on this tool, your recent activity and how others chain tools together.

Likely next step

🌈CSS Gradient GeneratorTop match🌑Box Shadow GeneratorVisual CSS box-shadow generator with X/Y/blur/spread/color and live preview.◼️Border Radius GeneratorAdjust each corner of border-radius with a live preview.🎨Color Palette GeneratorGenerate tints and shades from any base color.

Smart recommendations

Next best tool

🎨
Color Palette Generator
Generate tints and shades from any base color.

Also worth a look

💧
Watermark Adder
Add a text watermark with adjustable opacity to any image.
½
Fraction Calculator
Add, subtract, multiply and divide fractions with auto-simplification.
📥
Image to PDF
Bundle multiple PNG/JPEG images into a single PDF document.
📋
SGPA Calculator
Semester Grade Point Average for a single term.

Share & publish

Share & challenge

Twitter Facebook LinkedIn WhatsApp
Share-to-grow kit (Reddit, LinkedIn, Medium)
Reddit post
Title: I built/used this free color contrast checker — instant, no signup

Body: Check WCAG contrast between two colors — AA/AAA verdicts for normal and large text. Try it: https://freetoolsgalaxy.com/tools/contrast-checker
LinkedIn post
Color Contrast Checker on Free Tools Galaxy — Check WCAG contrast between two colors — AA/AAA verdicts for normal and large text. https://freetoolsgalaxy.com/tools/contrast-checker
Medium intro
# Color Contrast Checker — the free tool I keep coming back to

Check WCAG contrast between two colors — AA/AAA verdicts for normal and large text.

Try it: https://freetoolsgalaxy.com/tools/contrast-checker
Quora answer
The fastest way is to use a free in-browser color contrast checker: https://freetoolsgalaxy.com/tools/contrast-checker. Check WCAG contrast between two colors — AA/AAA verdicts for normal and large text.

Embed this tool anywhere

Free embed code for blogs, docs and dashboards. Every embed sends a backlink home — helping you and the galaxy grow together.

HTML iframe
Drop into any site — auto-resizes to its content height, theme-aware.
<iframe src="https://freetoolsgalaxy.com/tools/contrast-checker?embed=1" title="Color Contrast Checker" loading="lazy"
  style="width:100%;height:600px;border:0;border-radius:16px;background:#0b1020"
  allow="clipboard-write"></iframe>
<script>window.addEventListener("message",function(e){if(e.data&&e.data.type==="ftg-embed-height"){document.querySelectorAll("iframe").forEach(function(f){if(f.contentWindow===e.source){f.style.height=e.data.height+"px";}});}});</script>
<p><a href="https://freetoolsgalaxy.com/tools/contrast-checker" target="_blank" rel="noopener">Powered by Color Contrast Checker on Free Tools Galaxy</a></p>
Responsive wrapper
Aspect-locked container — good for blog post bodies.
<div style="position:relative;padding-bottom:75%;height:0;overflow:hidden;border-radius:16px">
  <iframe src="https://freetoolsgalaxy.com/tools/contrast-checker?embed=1" title="Color Contrast Checker" loading="lazy"
    style="position:absolute;inset:0;width:100%;height:100%;border:0" allow="clipboard-write"></iframe>
</div>
WordPress / Markdown
Paste in a custom-HTML block or markdown file.
[Color Contrast Checker — free online tool](https://freetoolsgalaxy.com/tools/contrast-checker)

<iframe src="https://freetoolsgalaxy.com/tools/contrast-checker?embed=1" width="100%" height="600" frameborder="0"></iframe>
Text link-back
Minimal credit link — best for sidebars and footers.
<a href="https://freetoolsgalaxy.com/tools/contrast-checker" target="_blank" rel="noopener">Try the free Color Contrast Checker</a>

Share-to-Grow Kit

Pre-written, ready-to-paste posts for every major channel. Help others discover this tool — and earn backlinks.

Title
I built a free simple interest calculator that works instantly in the browser — no signup, no ads in your face
Body
Hey r/[subreddit],

I kept needing a quick simple interest calculator and most options online were slow or behind paywalls, so I built one that:

• Runs 100% in your browser (your data never leaves your device)
• No signup, no email wall, no popups
• Loads in under a second on mobile

It covers the standard simple interest use cases (simple, interest, principal, loan) and links out to the formula + worked examples if you want to learn the math.

Link: https://freetoolsgalaxy.com/tools/simple-interest-calculator

Happy to take feedback — what's missing?
Post to a relevant subreddit (e.g. r/InternetIsBeautiful, r/webdev, r/productivity). Avoid spammy subs.
Developer & SEO tools