Contrast Checker

Check color contrast ratios for WCAG AA/AAA accessibility compliance. Free, instant, works offline.

Large Text
Normal text sample for contrast testing
Small / UI text sample
--
Contrast Ratio
--
AA Normal (4.5:1)
--
AA Large (3:1)
--
AAA Normal (7:1)
--
AAA Large (4.5:1)

About WCAG Contrast

WCAG (Web Content Accessibility Guidelines) define minimum contrast ratios for text to be readable:

LevelNormal TextLarge Text (≥18px or bold ≥14px)
AA4.5:13:1
AAA7:14.5:1

Contrast ratio ranges from 1:1 (same colors) to 21:1 (black on white). Higher = better readability.

About Contrast Checker

Check color contrast ratios for WCAG accessibility compliance. Test text against background colors. See AA and AAA ratings for normal and large text. Essential for web designers and developers building accessible interfaces.

WCAG Compliance

Checks against WCAG 2.1 AA and AAA standards. Know instantly if your color combination passes accessibility requirements.

Live Preview

See your text on the background in real-time. Adjust colors with sliders or enter HEX/RGB values directly.

Normal & Large Text

Separate ratings for body text and large text/headings. Different thresholds for each — shown clearly.

Color Suggestions

Get lighter/darker suggestions that meet contrast requirements. Find accessible alternatives instantly.

📋 Common Use Cases

Web Accessibility

Verify your text and background colors meet WCAG AA/AAA contrast guidelines for readable, accessible websites.

Design Review

Check color combinations in UI designs, buttons, and typography before shipping to users.

Brand Color Choices

Confirm your brand colors work on both light and dark surfaces with sufficient contrast.

Document & Slide Design

Ensure text in documents, presentations, and PDFs is readable for all audiences.

🪜 How to Use This Tool

  1. Enter your colors
    Pick or paste a text color (foreground) and a background color.
  2. View the ratio
    The tool calculates the contrast ratio and shows the result instantly.
  3. Check the rating
    See whether the combination passes WCAG AA or AAA for normal and large text.
  4. Adjust as needed
    Tweak colors until they meet your target accessibility level.

📚 Related Guides

Frequently Asked Questions

Is this color tool free?▼
Yes. All color tools are completely free. No signup needed.
How does the contrast checker work?▼
It calculates WCAG 2.1 contrast ratios between foreground and background colors, showing pass/fail for AA and AAA at normal and large text sizes.

🔗 Related Tools

Gradient Generator Palette Generator