Color Contrast Checker

Check color contrast ratios for WCAG accessibility compliance. Ensure your text is readable for all users.

Color Selection

Preset Color Pairs

Preview

This is normal text (16px). The quick brown fox jumps over the lazy dog. Make sure your color combinations provide sufficient contrast for readability.

This is large text (24px). Large text has more relaxed contrast requirements.

Live Preview

See how your color combinations look with real text and UI elements

WCAG Compliance

Check against WCAG AA and AAA standards for accessibility

Save Combinations

Store your favorite color pairs for future reference and reuse

Quick Actions

Swap colors, randomize, and export results with one click

Frequently Asked Questions

What is color contrast and why does it matter?
Color contrast is the difference in light between font (or anything in the foreground) and its background. Sufficient contrast is crucial for readability, especially for users with visual impairments, color blindness, or when viewing content on low-quality displays or in bright sunlight.
What's the difference between AA and AAA compliance?
WCAG Level AA is the recommended standard for most websites and requires a 4.5:1 contrast ratio for normal text. Level AAA is a higher standard requiring 7:1 contrast for normal text. While AAA provides better accessibility, it can be difficult to achieve with certain color schemes and isn't required for most applications.
What counts as "large text"?
Large text is defined as 18pt (24px) or larger for regular weight fonts, or 14pt (approximately 18.66px) or larger for bold weight fonts. Large text has more relaxed contrast requirements because it's easier to read at lower contrast ratios.
Do all elements need to meet contrast requirements?
No, there are exceptions. Incidental text (like inactive UI elements), pure decoration, text that's part of a logo or brand name, and text within images that contain significant other visual content don't have contrast requirements. However, any text that users need to read should meet the appropriate contrast standards.

WCAG Color Contrast Checker

Color contrast is one of the most fundamental aspects of web accessibility. When text does not have sufficient contrast against its background, users with low vision, color blindness, or those reading in bright sunlight struggle to read your content. Our free color contrast checker instantly calculates the contrast ratio between any two colors and tells you whether they meet WCAG 2.1 AA or AAA accessibility standards.

The Web Content Accessibility Guidelines (WCAG) require a minimum contrast ratio of 4.5:1 for normal text (AA), 3:1 for large text (AA), and 7:1 for enhanced accessibility (AAA). Enter your foreground and background colors in any format — hex, RGB, or HSL — and get instant pass/fail results for all WCAG levels.

How to Check Color Contrast

  1. 1

    Enter your foreground color

    Input the text color you plan to use — this is the foreground. Enter it as a hex code (#333333), RGB value (rgb(51,51,51)), or use the color picker.

  2. 2

    Enter your background color

    Input the background color behind the text. This is the color of the container, card, or page the text sits on.

  3. 3

    Read the contrast ratio

    The tool instantly calculates the contrast ratio (e.g., 4.5:1) and displays whether it passes or fails WCAG AA and AAA criteria for normal text, large text, and UI components.

  4. 4

    Adjust until it passes

    If your colors fail, use the lightness sliders to adjust the colors until you achieve the required ratio. The tool updates in real time.

  5. 5

    Copy the passing colors

    Once you have passing colors, copy the hex codes to use in your CSS or design system.

Understanding WCAG Contrast Requirements

WCAG AA — Normal Text

Minimum ratio of 4.5:1. This is the standard legal requirement for most accessibility regulations including ADA, Section 508, and EN 301 549.

WCAG AA — Large Text

Minimum ratio of 3:1 for text that is at least 18pt (24px) regular or 14pt (18.67px) bold. Larger text is easier to read at lower contrast.

WCAG AAA — Normal Text

Enhanced ratio of 7:1. Required for the highest accessibility standard. Recommended for text-heavy content or audiences with significant visual impairments.

WCAG AAA — Large Text

Enhanced ratio of 4.5:1 for large text. Provides the best possible reading experience for all users including those with low vision.

UI Components & Icons

Non-text elements like icons, form borders, and focus indicators need a 3:1 contrast ratio against adjacent colors under WCAG 2.1 AA.

Legal Compliance

Many countries require WCAG AA compliance for public-sector websites. Failing contrast checks can expose companies to accessibility lawsuits.

Frequently Asked Questions

What is the contrast ratio formula?
The contrast ratio is calculated as (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. Luminance is computed from the linearized RGB values of each color.
What is the minimum contrast ratio for WCAG AA?
For normal text: 4.5:1. For large text (18pt+ or 14pt+ bold): 3:1. For non-text UI elements: 3:1. These are the most widely adopted standards for web accessibility compliance.
Does contrast ratio matter for decorative images?
No. WCAG contrast requirements only apply to text and meaningful UI components. Purely decorative images, backgrounds, and inactive UI elements are exempt.
My design fails WCAG. What should I do?
Try darkening the text color or lightening the background (for light themes), or the opposite for dark themes. Increasing font size to 18px+ also reduces the required contrast from 4.5:1 to 3:1, which may help you pass.
Is color contrast the only accessibility concern?
No. Color contrast is one of many WCAG criteria. Other important factors include keyboard navigation, ARIA labels, focus indicators, alt text for images, and sufficient touch target sizes for mobile users.

Why Color Contrast Matters

Approximately 300 million people worldwide have color vision deficiency (color blindness), and 246 million have low vision. Ensuring sufficient color contrast is not just a legal requirement — it makes your website more readable for everyone, including users in bright environments or on low-quality displays.

Popular searches: color contrast checker wcag • contrast ratio calculator • wcag aa contrast check • accessibility color checker • color contrast tool online • text background contrast checker • color contrast ratio tool • wcag 2.1 contrast checker

Related guide: WCAG Color Contrast: Making Websites Accessible for Everyone