Color Contrast Checker: Free WCAG Tool for Web Designers

Free WCAG Accessibility Tool for Designers & Developers.

Ratio0.00:1
AA StatusFAIL
AAA StatusFAIL

Accessibility Matters

This tool helps you verify if your color choices are readable for all users.

Normal

FAIL

Large

FAIL

📢 Love these Pro Fonts?

Share the magic with your friends and community!

WhatsApp
X (Twitter)
Telegram
Facebook
Reddit

Color Contrast Checker (WCAG Compliance Tool)

WCAG (Web Content Accessibility Guidelines) defines 2 contrast compliance levels — AA and AAA. Level AA is the standard most organizations target; Level AAA provides stronger readability for users with low vision or color blindness. Both levels set minimum contrast ratios for normal text, large text, and non-text UI components like buttons and input borders.

Hover over each card below to see the required ratios animate into view. AA requires 4.5:1 for body text; AAA raises that bar to 7:1.

WCAG AA (minimum)

Minimum standard for most websites

4.5 : 1Normal text (below 18pt / 14pt bold)
3 : 1Large text (18pt+ regular or 14pt+ bold)
3 : 1Icons, input borders, focus indicators
WCAG AAA (enhanced)

Enhanced — best for public or government sites

7 : 1Normal text (below 18pt / 14pt bold)
4.5 : 1Large text (18pt+ regular or 14pt+ bold)
3 : 1Icons, input borders, focus indicators

Why should you use a WCAG color contrast checker?

There are 5 practical reasons to test your color contrast before shipping a design. Click any card below to flip it and read the detail.

Designing for everyone: Contrast rules for buttons, icons, and UI

WCAG 2.1 Success Criterion 1.4.11 requires non-text elements — buttons, icons, form inputs, and focus indicators — to maintain a minimum 3:1 contrast ratio against their background. Text inside those elements still needs 4.5:1. The simulator below lets you pick any surface and foreground color, then shows PASS or FAIL for each UI element type in real time.

Try changing the surface color to a dark shade and the foreground to a light shade. Watch how the button, icon, and input field all react.

#f8fafc
#6366f1
Ratio4.27:1
UI: PASS ≥ 3:1
Icon: PASS ≥ 3:1
Placeholder text
Text: FAIL < 4.5:1

Best and worst color pairings: Real-world examples for designers

The first row shows 4 pairings that pass WCAG AA. The second row shows 4 common combinations that fail — light gray on white, yellow on white, and similar low-contrast pairs that designers pick more often than you'd expect. Each card computes the real contrast ratio so you can compare.

Aa Bb Cc

Dark slate on white

14.6:1PASS
Aa Bb Cc

White on blue

8.7:1PASS
Aa Bb Cc

Black on amber

12.6:1PASS
Aa Bb Cc

Green on mint

6.8:1PASS
Aa Bb Cc

Light gray on white

2.5:1FAIL
Aa Bb Cc

Yellow on white

1.3:1FAIL
Aa Bb Cc

Light blue on white

1.8:1FAIL
Aa Bb Cc

Pink on light rose

1.9:1FAIL

Quick Guide: How to audit your live website for contrast issues

Auditing your site for contrast problems takes 4 steps. Follow the flow below — from opening DevTools to deploying the fix.

Step 1🔍

Open browser DevTools

Right-click any element on your page and select Inspect. Navigate to the Styles panel.
Step 2⚠️

Identify low-contrast elements

Chrome DevTools shows a contrast ratio next to every color declaration. Look for the warning triangle icon.
Step 3🎨

Test with our checker

Copy the hex values into the color contrast checker above. You see the exact ratio and AA/AAA pass or fail status instantly. Always identify font styles to ensure compatibility.
Step 4🚀

Fix and re-deploy

Adjust the failing color until it passes. Push the updated CSS and run a Lighthouse accessibility audit to confirm.

Readability Tip: How to ensure text is visible over background images

White text on a photo or gradient background often fails WCAG contrast checks because the image has light and dark regions. The simplest fix is a semi-transparent dark overlay between the image and the text. This preserves the visual while ensuring consistent readability.

Toggle the overlay below to see the difference. With the overlay off, the text blends into lighter parts of the gradient. With it on, contrast improves across the entire surface.

Your Hero Headline

Text on gradient or photo backgrounds often fails contrast checks. A semi-transparent overlay fixes this without hiding the visual.

Low contrast ✗

Dark overlay

Toggle to see how an overlay improves readability

How our tool helps you build inclusive digital products

Our color contrast checker gives you 4 features in one screen — no sign-up, no download, no limits. Here is what each one does:

⚡

Instant contrast ratio

Change a hex code and the ratio updates in real time — no page reload, no waiting.
🏷️

WCAG AA & AAA badges

Both compliance levels are checked simultaneously. You see a clear PASS or FAIL badge for each.
🔄

One-click color swap

Hit the Swap button to reverse foreground and background. Useful for checking dark-mode versions fast.
👁️

Live text preview panel

The preview area renders a heading and paragraph in your chosen colors so you see actual readability, not just numbers.

❓ Frequently Asked Questions

A color contrast checker is a tool that measures the luminance difference between a foreground color and a background color, then expresses it as a ratio (for example, 4.5:1). Designers and developers use this ratio to confirm that text, icons, and UI components are readable for people with low vision or color vision deficiency.
A color contrast ratio compares the relative luminance of two colors on a scale from 1:1 (identical) to 21:1 (black on white). It matters because low-contrast text is hard to read — especially for the roughly 300 million people worldwide who have some form of color blindness or visual impairment. WCAG uses this ratio as the measurable threshold for accessible design.
WCAG 2.1 requires a minimum ratio of 4.5:1 for normal-sized text and 3:1 for large text (18pt regular or 14pt bold) at Level AA. For Level AAA, the requirements increase to 7:1 for normal text and 4.5:1 for large text. Non-text UI components like icons and input borders require at least 3:1 against their background.
Level AA is the minimum accessibility standard that most websites, apps, and organizations aim for. Level AAA is a stricter standard with higher contrast thresholds — it provides better readability but can be harder to achieve with some brand color palettes. Government websites and healthcare portals often target AAA.
People with color blindness (about 8% of men and 0.5% of women) cannot distinguish certain hue combinations — for example, red and green. Sufficient luminance contrast ensures that even when two colors look similar in hue, the brightness difference keeps the text readable.
Yes, our color contrast checker is 100% free for personal and commercial use. There is no sign-up, no download, and no usage limit. Enter your hex or RGB values, check the ratio, and use the results in client projects, design systems, or accessibility audits.
Enter a background color and a text (foreground) color as hex codes (for example, #ffffff and #1e293b). The tool calculates the contrast ratio instantly and shows whether it passes WCAG AA, AAA, or both. You can also click the Swap button to reverse the two colors, and use the live preview panel to see how your text looks in context.
Adjust the lightness or darkness of the failing color until the ratio passes. Most of the time, making the foreground slightly darker or the background slightly lighter by 10–15% in the HSL lightness channel is enough to cross the 4.5:1 threshold without changing the brand identity.
Open Chrome DevTools, inspect the element, and read the contrast ratio shown in the color picker. Copy the failing hex values into this checker, tweak until the ratio passes, then update your CSS. Run a Lighthouse accessibility audit afterward to confirm the fix.
Any color with a contrast ratio of 4.5:1 or higher against #ffffff works. Common accessible choices include #1e293b (dark slate, 13.5:1), #1e40af (blue, 7.4:1), #065f46 (green, 7.8:1), and #7c2d12 (brown, 8.2:1). For maximum impact, use Bold Sans-Serif fonts for headlines and avoid anything lighter than about #767676.
No. Color contrast is one of many WCAG success criteria. A fully accessible site also needs proper heading structure, keyboard navigation, alt text for images, ARIA labels, focus indicators, and more. Contrast checking is a strong first step but not the complete picture.