WCAG Color Contrast Checker

Q: Does it handle transparent colors?

Yes. If your text color has an alpha below 100 percent, it is first composited over the background, then the contrast is measured, exactly how it would appear on screen.

Check any text & background color pair against WCAG AA & AAA, preview it live, and get one-click fixes to pass. 100% in your browser.

Text / Foreground

Background

21:1

contrast ratio (1:1 = identical, 21:1 = max)

Excellent

Suggested fixes (adjusts the text color, keeps its hue)

Large heading text

Large body text sample (24px)

Normal paragraph text. The quick brown fox jumps over the lazy dog while testing readability at small sizes.

Sample button

Recent pairs

How to Use the Color Contrast Checker

Set your two colors. Choose a text (foreground) and a background color using the picker, hex field, RGB sliders, or the on-screen eyedropper.
Read the contrast ratio. The big number is the WCAG contrast ratio, from 1:1 (identical) up to 21:1 (black on white).
Check the pass/fail matrix. See AA and AAA results for normal text, large text and UI components at a glance.
Fix failures instantly. If a level fails, click a suggested color to nudge the text lighter or darker until it passes — while keeping the same hue.

What Is Color Contrast & WCAG?

Color contrast is the difference in perceived brightness between text and its background. It is measured as a ratio from 1:1 (no difference) to 21:1 (pure black on pure white). The higher the ratio, the easier text is to read — especially for people with low vision or color blindness, and for everyone in bright sunlight or on cheap screens.

The Web Content Accessibility Guidelines (WCAG) set minimum contrast requirements. Level AA requires at least 4.5:1 for normal text and 3:1 for large text. Level AAA raises that to 7:1 and 4.5:1. User-interface components and meaningful graphics need at least 3:1. Large text means 24px or larger, or 18.66px or larger when bold.

This checker uses the official WCAG relative-luminance formula, so the numbers match what accessibility auditors and screen-reader testing tools report. It even composites a semi-transparent text color over the background for an accurate ratio. Everything runs locally — no colors are uploaded anywhere.

Common Use Cases

♿ Accessibility auditsVerify text meets WCAG AA/AAA before shipping a site or app.

🎨 Brand & UI designTest brand colors for readable buttons, labels and links.

📝 Design handoffConfirm a mockup's text/background pair is legible before build.

⚖️ ComplianceMeet ADA, Section 508 and EN 301 549 contrast expectations.

👀 Low-vision supportPick combinations that stay readable for more of your audience.

🔢 Quick fixesFind the closest passing shade without leaving the page.

Why Choose This Contrast Checker

Full WCAG matrixAA & AAA for normal text, large text and UI components.
One-click fixesSuggested passing shades that keep your original hue.
Live previewSee real heading, body and button text in your colors.
Alpha awareCorrectly composites transparent text over the background.
Eyedropper & slidersPick any on-screen pixel or fine-tune each RGB channel.
Private & freeRuns entirely in your browser with shareable links and history.

Frequently Asked Questions

What contrast ratio do I need to pass WCAG?

For Level AA, normal text needs at least 4.5:1 and large text at least 3:1. For the stricter Level AAA, normal text needs 7:1 and large text 4.5:1. User-interface components and meaningful graphics need at least 3:1.

What counts as "large text"?

WCAG defines large text as 24px (18pt) or larger, or 18.66px (14pt) or larger when bold. Large text has lower contrast requirements because bigger letters are easier to read.

How is the contrast ratio calculated?

It uses the official WCAG formula based on relative luminance: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 the darker. This checker matches the values reported by professional accessibility tools.

Does it handle transparent colors?

Yes. If your text color has an alpha below 100%, it is first composited over the background, then the contrast is measured — exactly how it would appear on screen.

What do the suggested fixes do?

When a level fails, the tool finds the closest lighter or darker version of your text color — keeping the same hue and saturation — that reaches the required ratio, so you can fix contrast without changing your palette's character.

Are my colors sent anywhere?

No. All calculations happen locally in your browser. Nothing is uploaded, and the tool works offline once loaded.