Toolsvana→Design Tools→WCAG Contrast Checker

WCAG Contrast Checker

Check color contrast ratios for WCAG AA and AAA accessibility compliance

Foreground Color (Text)

Background Color

Quick Presets

Contrast Ratio

17.06:1

WCAG AA

Normal Text (≥ 4.5:1)

✅ Pass

WCAG AA

Large Text (≥ 3:1)

✅ Pass

WCAG AAA

Normal Text (≥ 7:1)

✅ Pass

WCAG AAA

Large Text (≥ 4.5:1)

✅ Pass

Live Preview

Normal Text (16px)

The quick brown fox jumps over the lazy dog. This sample text demonstrates how your chosen color combination looks at normal body text size. Readable text is essential for good user experience.

✅ AA Pass✅ AAA Pass

Large Text (18pt+ / 14pt bold)

The quick brown fox jumps over the lazy dog.

Large text has more relaxed contrast requirements.

✅ AA Pass✅ AAA Pass

Technical Details

Foreground Luminance

0.0116

Background Luminance

1.0000

Contrast Ratio

17.0575:1

Tips

WCAG AA requires at least 4.5:1 contrast for normal text and 3:1 for large text (18pt or 14pt bold).

WCAG AAA requires at least 7:1 contrast for normal text and 4.5:1 for large text.

Use the swap button to quickly test text on background versus background on text.

If your color combination fails, check the suggestion for the nearest passing foreground color.

Large text is defined as 18 points (24px) or larger, or 14 points (18.66px) bold or larger.

About WCAG Contrast Checker

Our free online WCAG contrast checker helps designers, developers, and accessibility professionals verify that text and background color combinations meet the Web Content Accessibility Guidelines (WCAG) 2.1 contrast requirements. Accessible color contrast ensures that all users, including those with low vision or color vision deficiencies, can read and interact with your web content.

The tool calculates the contrast ratio between any two colors using the official W3C relative luminance formula and instantly reports whether the combination passes or fails WCAG AA and WCAG AAA compliance levels for both normal and large text. All calculations are performed in real time directly in your browser with no data sent to any server.

Whether you are conducting an accessibility audit, designing a new interface, or reviewing existing content for compliance, this contrast checker gives you precise, standards-compliant results along with live text previews and actionable suggestions to fix failing color combinations.

Understanding WCAG Contrast Requirements

The Web Content Accessibility Guidelines (WCAG) are the internationally recognized standard for web accessibility, published by the World Wide Web Consortium (W3C). WCAG defines specific contrast ratio thresholds to ensure text legibility for users with varying levels of visual ability.

WCAG Level AA (Normal Text): A minimum contrast ratio of 4.5:1 is required. This applies to body text, paragraphs, and any text smaller than 18pt (24px) or 14pt bold (18.66px bold).
WCAG Level AA (Large Text): A minimum contrast ratio of 3:1 is required. Large text is defined as text that is at least 18pt (24px) or 14pt bold (18.66px bold).
WCAG Level AAA (Normal Text): A minimum contrast ratio of 7:1 is required. This is the highest level of accessibility conformance for normal-sized text.
WCAG Level AAA (Large Text): A minimum contrast ratio of 4.5:1 is required for large text at the AAA conformance level.

Meeting at least WCAG AA is considered the baseline standard for accessible web design and is required by many legal frameworks around the world, including the Americans with Disabilities Act (ADA), the European Accessibility Act, and Section 508 of the Rehabilitation Act. WCAG AAA provides an enhanced level of accessibility that is recommended where feasible.

How the Contrast Ratio Is Calculated

The contrast ratio between two colors is determined using the relative luminance of each color, as defined in the WCAG 2.1 specification. Relative luminance measures the perceived brightness of a color on a scale from 0 (darkest black) to 1 (lightest white).

The calculation involves three steps. First, each color channel (red, green, blue) is converted from its 8-bit sRGB value (0-255) to a normalized sRGB value (0-1) by dividing by 255. Second, each normalized value undergoes a gamma correction: if the value is 0.04045 or less, it is divided by 12.92; otherwise, it is transformed using the formula ((value + 0.055) / 1.055) ^ 2.4. Third, the linearized channel values are combined with weighted coefficients: L = 0.2126 * R + 0.7152 * G + 0.0722 * B.

The final contrast ratio is computed 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. The result is a value ranging from 1:1 (no contrast, identical colors) to 21:1 (maximum contrast, pure black on pure white).

Key Features

Real-time contrast ratio calculation using the official W3C WCAG 2.1 luminance formula
Pass/fail indicators for WCAG AA and AAA conformance levels for both normal and large text
Interactive color picker and hex input for both foreground and background colors
One-click color swap to test reversed color combinations
Ten quick preset color combinations including common accessible pairings
Live text preview showing how your colors look at normal and large text sizes
Automatic suggestion of the closest passing foreground color when the current combination fails
Technical luminance details for both foreground and background colors
Full dark mode support for comfortable use in any environment
All processing runs locally in the browser with no data transmitted to external servers

How to Use the WCAG Contrast Checker

Set the foreground color: Click the color picker square or type a hex value (e.g., #1A1A2E) into the text field to set your text or foreground color.
Set the background color: Similarly, use the color picker or hex input to set the background color behind the text.
Review results: The contrast ratio and pass/fail results for all four WCAG levels are displayed instantly as you change colors.
Check live preview: Scroll down to see actual text rendered with your chosen color combination at both normal and large sizes.
Apply suggestions: If the combination fails WCAG AA, a suggested foreground color is shown. Click Apply to use it.
Try presets: Use the Quick Presets to test well-known accessible or inaccessible color combinations.
Swap colors: Click the Swap Colors button to reverse your foreground and background selections.

Why Color Contrast Matters for Accessibility

Approximately 1 in 12 men and 1 in 200 women worldwide have some form of color vision deficiency. Additionally, millions of people experience low vision, age-related vision changes, or situational impairments such as screen glare. Sufficient color contrast is one of the most impactful and straightforward ways to make web content accessible to all of these users.

Poor contrast between text and background is one of the most common accessibility issues found in web audits. By using a WCAG contrast checker during the design and development process, teams can identify and fix contrast issues before they reach production, reducing remediation costs and ensuring compliance with accessibility regulations from the start.

Good color contrast also benefits users without disabilities. It improves readability in bright sunlight, on low-quality displays, and in high-distraction environments. Accessible design is inclusive design that creates a better experience for everyone.

Frequently Asked Questions

What is the difference between WCAG AA and AAA?

WCAG AA is the standard level of conformance recommended for most websites and applications. It requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. WCAG AAA is a more stringent level that requires 7:1 for normal text and 4.5:1 for large text. While AAA is not always achievable for all content, it is recommended for critical text elements and where maximum readability is needed.

What counts as large text in WCAG?

According to WCAG 2.1, large text is defined as text that is at least 18 points (approximately 24 CSS pixels) or 14 points (approximately 18.66 CSS pixels) if bold. Large text has lower contrast requirements because its size inherently makes it easier to read.

Does this tool support transparency or alpha channels?

This tool works with opaque hex colors (6-digit hex codes). For colors with transparency, the effective contrast depends on the background behind the transparent layer, which can vary across the page. To check semi-transparent text, you should first calculate the effective flat color resulting from the transparent overlay on its actual background, then test that flat color here.

Is WCAG compliance legally required?

In many jurisdictions, yes. The ADA in the United States, the European Accessibility Act in the EU, the Accessibility for Ontarians with Disabilities Act (AODA) in Canada, and similar legislation in other countries reference or incorporate WCAG 2.1 Level AA as the standard for digital accessibility. Organizations that fail to meet these requirements may face legal action, fines, and reputational damage.