Color Contrast Checker Online — Check WCAG AA/AAA Compliance Free

What Is Color Contrast and Why Does It Matter?

Color contrast is the difference in luminance (perceived brightness) between a foreground color (typically text) and its background. High contrast makes text easy to read; low contrast makes it difficult or impossible for users with visual impairments, colorblindness, or those viewing screens in bright environments.

The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios for text to ensure that websites are usable by people with moderately low vision. Meeting these standards is also often required for legal compliance under the ADA (Americans with Disabilities Act) and similar regulations worldwide.

WCAG Contrast Requirements

WCAG defines contrast requirements across two levels:

WCAG AA (Minimum Accessibility)

• Normal text (under 18pt / 14pt bold): minimum contrast ratio of 4.5:1.
• Large text (18pt+ / 14pt+ bold): minimum contrast ratio of 3:1.
• UI components and graphics: minimum ratio of 3:1 against adjacent colors.

WCAG AAA (Enhanced Accessibility)

• Normal text: minimum contrast ratio of 7:1.
• Large text: minimum contrast ratio of 4.5:1.

Black text on a white background has a contrast ratio of 21:1 — the maximum possible. The ratio is calculated using the relative luminance of both colors.

How to Check Color Contrast Online

1. Open the color contrast checker at DevKits.
2. Enter the foreground color (text color) as a hex code.
3. Enter the background color as a hex code.
4. The contrast ratio is calculated instantly, displayed as X:1.
5. WCAG AA and AAA pass/fail is shown for both normal and large text sizes.
6. The live preview shows example text using the entered color pair.

Key Features

• Contrast ratio calculation — precise ratio to two decimal places.
• WCAG AA and AAA compliance indicators — clear pass/fail for all text categories.
• Live text preview — see sample normal and large text with the actual colors.
• Suggestion engine — if a pair fails, suggests the minimum lightness adjustment needed to pass.
• Color blindness simulation — preview the pair as seen by users with deuteranopia, protanopia, and tritanopia.
• Bulk checking — check multiple color pairs at once for design system validation.

Common Failing Color Combinations

These common design choices fail WCAG AA contrast requirements:

• Light gray text (#999999) on white (#FFFFFF) — ratio 2.85:1 (fails AA).
• Yellow text (#FFFF00) on white (#FFFFFF) — ratio 1.07:1 (extremely bad).
• Medium blue (#0066FF) on white — passes AA but check carefully with large text.
• Light green on white — many "brand greens" fail for small text.

Tips for Accessible Color Pairs

• Dark text (near-black) on light backgrounds passes AA easily. White or near-white text on dark backgrounds also works well.
• Avoid using color alone to convey information — add icons, patterns, or text labels for colorblind users.
• Test your UI with browser accessibility tools (Chrome Lighthouse, axe DevTools) for comprehensive accessibility audits beyond color alone.
• The "light gray text" problem is the most common accessibility failure — if it can't be read easily, it fails contrast.

Frequently Asked Questions

What contrast ratio do I need to pass WCAG?

For normal text: 4.5:1 (AA) or 7:1 (AAA). For large text (18pt / 14pt bold+): 3:1 (AA) or 4.5:1 (AAA). For UI components and graphical objects: 3:1 (AA).

Is WCAG compliance legally required?

In many jurisdictions, yes. The ADA (USA), AODA (Canada), EAA (EU), and similar laws require websites to be accessible. WCAG 2.1 AA is the most commonly referenced standard. Legal requirements vary — consult a legal expert for your specific situation.

What's the difference between WCAG AA and AAA?

AA (minimum) is the standard target for most websites and is widely adopted as the accessibility baseline. AAA (enhanced) has stricter requirements that are impractical to meet for all content — it's targeted at specialized audiences like sign-language-only sites or very high-accessibility contexts.

Does the checker work with transparent backgrounds?

Contrast checkers require opaque color values. For transparent backgrounds, calculate the composite color (mix the transparent foreground with the actual background it appears on) before checking contrast.

Is the tool free?

Yes, completely free with no signup required.