Skip to content

Color Contrast Checker

Check any two colors against WCAG 2.2 contrast ratio requirements. See instant pass/fail results for AA and AAA compliance.

FreeNo SignupNo Server UploadsZero Tracking
Text Color
RGB: 26, 26, 46
Background Color
RGB: 255, 255, 255

Normal text preview (16px)

Large text preview (18px bold)

24px text preview

Contrast Ratio

17.06:1

WCAG AA

Normal text (4.5:1)PASS
Large text (3:1)PASS

WCAG AAA

Normal text (7:1)PASS
Large text (4.5:1)PASS
Embed code
<iframe src="https://wcagkit.com/embed/contrast-checker" width="100%" height="600" frameborder="0" title="Color Contrast Checker - wcagkit"></iframe>
<p style="font-size:12px;text-align:center;margin-top:4px;">
  <a href="https://wcagkit.com/tools/contrast-checker" target="_blank" rel="noopener">Powered by wcagkit</a>
</p>
Attribution preview

Powered by wcagkit

How to Use Color Contrast Checker

  1. 1

    Enter text color

    Type a hex color code or use the color picker to select your text (foreground) color.

  2. 2

    Enter background color

    Type a hex color code or use the color picker to select your background color.

  3. 3

    Review results

    See the contrast ratio and WCAG AA/AAA pass or fail status for both normal and large text instantly.

  4. 4

    Adjust colors

    Tweak your colors until they meet the desired WCAG compliance level, or use the swap button to reverse them.

Frequently Asked Questions

WCAG 2.2 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text to meet Level AA. For the stricter Level AAA, you need 7:1 for normal text and 4.5:1 for large text. Higher ratios mean better readability for all users.

Large text is defined as 18pt (24px) and above for regular weight, or 14pt (approximately 18.5px) and above for bold weight. Large text has a lower contrast requirement because larger characters are easier to read.

This tool currently accepts hex color codes (e.g. #1a1a2e or #fff). You can also use the built-in color picker to select any color visually. The RGB values are displayed alongside each color for reference.

Approximately 300 million people worldwide have color vision deficiencies. Low contrast text can be difficult or impossible to read for people with low vision, color blindness, or those using screens in bright environments. Meeting WCAG contrast requirements ensures your content is readable by the widest possible audience.

No. All calculations happen entirely in your browser using JavaScript. No color data is ever transmitted to any server. Your design work stays completely private.

Related Tools

Heading Analyzer

Validate heading hierarchy

Try it

Alt Text Checker

Find images missing alt text

Try it

Link Checker

Find inaccessible link text

Try it

ARIA Validator

Validate ARIA attributes

Try it

Understanding Color Contrast and Web Accessibility

Color contrast is one of the most fundamental aspects of web accessibility. When text does not have sufficient contrast against its background, it becomes difficult or impossible for many users to read. This affects people with low vision, color blindness, aging eyes, and even those using devices in suboptimal lighting conditions. The Web Content Accessibility Guidelines (WCAG), maintained by the W3C, provide specific contrast ratios that designers and developers should meet to ensure their content is perceivable by the widest audience possible.

How Contrast Ratio Is Calculated

The contrast ratio between two colors is determined using the relative luminance of each color. Relative luminance measures the brightness of a color as perceived by the human eye, weighted according to how our eyes respond to red, green, and blue light. The formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the luminance of the lighter color and L2 is the luminance of the darker color. This produces a ratio between 1:1 (no contrast, same color) and 21:1 (maximum contrast, black on white).

The relative luminance calculation first converts each sRGB color channel to a linear value by removing gamma correction. Channels at or below 0.04045 are divided by 12.92, while higher values use the formula ((value + 0.055) / 1.055) ^ 2.4. The final luminance is then computed as 0.2126 * R + 0.7152 * G + 0.0722 * B, reflecting the fact that human eyes are most sensitive to green light, followed by red, then blue.

WCAG 2.2 Contrast Requirements

WCAG defines two conformance levels relevant to color contrast. Level AA is the baseline standard that most accessibility laws reference. It requires a contrast ratio of at least 4.5:1 for normal-sized text and 3:1 for large text. Level AAA is the enhanced standard, requiring 7:1 for normal text and 4.5:1 for large text. Large text is defined as 18 points (24 CSS pixels) for regular weight or 14 points (roughly 18.5 CSS pixels) for bold weight.

These requirements apply to text and images of text. They do not apply to logos, brand names used in logos, or purely decorative text. UI components and graphical objects that convey information have their own contrast requirement of 3:1 against adjacent colors under WCAG 2.1 Success Criterion 1.4.11 (Non-text Contrast).

Why Color Contrast Matters Legally

Accessibility lawsuits have surged in recent years. In the United States, the Americans with Disabilities Act (ADA) has been interpreted by courts to apply to websites. The European Accessibility Act, which took effect in 2025, requires digital products and services to meet accessibility standards across EU member states. Section 508 of the Rehabilitation Act mandates WCAG compliance for U.S. federal agencies. Ensuring adequate color contrast is one of the most straightforward and impactful steps toward compliance.

Tips for Choosing Accessible Color Combinations

Start with high-contrast pairs and adjust from there. Pure black (#000000) on white (#ffffff) provides the maximum 21:1 ratio but can cause visual fatigue for some users with dyslexia or light sensitivity. A soft black like #1a1a2e on white provides a ratio around 16:1, which is well above AAA requirements while being easier on the eyes. Avoid relying on color alone to convey information. Always pair color indicators with text labels, icons, or patterns.

Test your color combinations in this tool before finalizing your design system. Consider how colors interact across different states: hover, focus, active, and disabled. Each state should maintain adequate contrast. Also remember to check contrast for text on images and gradients, where the effective background color may vary across the element.

Common Mistakes to Avoid

Light gray text on a white background is the most common contrast failure on the web. Placeholder text in form fields frequently fails contrast requirements. Colored links that are distinguished from surrounding text only by color, without meeting the 3:1 ratio against that text, also fail. Buttons with white text on light-colored backgrounds are another frequent offender. This tool makes it easy to catch these issues during the design phase, before they reach production.