Design

Color Contrast Checker

Check WCAG AA and AAA color contrast ratios for text and UI — pick colors, see pass/fail instantly.

Open Color Contrast Checker
Private — runs in your browserInstant resultsFree forever

Key Features

WCAG 2.1 contrast ratio computed with the official relative-luminance formula
AA and AAA checks for both normal and large text sizes
UI Components & Graphical Objects check (the 3:1 non-text rule)
Live sample preview with real heading, paragraph, and button elements
Hex input plus native color picker, synced both ways
One-click swap between foreground and background

How to Use

1Enter or pick your foreground (text) and background colors
2Read the big contrast ratio and the five WCAG pass/fail results
3Use the live preview to judge real-world legibility
4Swap or adjust colors until your target level passes

Common Use Cases

Run an accessibility audit before shipping a new design or rebrand
Choose brand colors that stay readable in both light and dark themes
Verify dark-mode text is legible against your background color
Meet ADA, Section 508, and EN 301 549 contrast requirements

Frequently Asked Questions

What contrast ratio do I need to pass WCAG?
For normal text you need 4.5:1 to pass AA and 7:1 to pass AAA. Large text (18.66px bold or 24px+ regular) needs 3:1 for AA and 4.5:1 for AAA. UI components and graphical objects need 3:1 for AA.
What counts as large text?
WCAG defines large text as at least 18pt (24px) regular weight, or at least 14pt (18.66px) bold. Headings and display copy usually qualify, letting slightly lower-contrast colors pass.
Does this tool cover UI components too?
Yes. The fifth check applies the 3:1 non-text contrast rule to buttons, input borders, icons, and other meaningful graphics, which is required for WCAG 2.1 AA.

Ready to use Color Contrast Checker?

No signup. No ads. Just open and start using it.

Open Tool Now
Free 3-Day Plus TrialFree tier available

Want AI Reminders, Gmail Sync & Calorie Tracking?

Meet Atlas AI on Telegram — your personal assistant with 3x daily briefings, photo meal tracking, and Google Calendar sync.

Start Free on Telegram

Related Design Tools

Atlas AI
39 free tools · No signup · Privacy-firstBack to home