♿WCAG 2.1 Accessibility Suite

WCAG Color Contrast Checker

Test foreground and background color combinations against official Web Content Accessibility Guidelines (WCAG 2.1 & 2.2). Check Level AA & AAA compliance, simulate color blindness, and 1-click auto-fix colors that fail.

Loading contrast checker…

Understanding WCAG 2.1 Contrast Standards: Level AA vs Level AAA

The Web Content Accessibility Guidelines (WCAG) are the international benchmark established by the W3C (World Wide Web Consortium) to ensure digital content is perceptible, operable, understandable, and robust for all users, including individuals with low vision, age-related macular degeneration, or color perception deficits.

Level AA (Standard)

Required for Legal & Enterprise Compliance

Mandated by the Americans with Disabilities Act (ADA Title III), Section 508, and the European Accessibility Act (EN 301 549). Requires 4.5:1 for normal text and 3.0:1 for large text and UI components.

Level AAA (Enhanced)

Maximum Clarity for High-Legibility Interfaces

The highest tier of digital accessibility. Requires 7.0:1 for normal body text and 4.5:1 for large text. Recommended for government portals, medical dashboards, and reading apps.

How the Relative Luminance Contrast Formula Works

Under WCAG 2.1, contrast is computed by measuring the relative luminance of the lighter color (L1) compared to the darker color (L2), defined on a scale from 0.0 (pure black) to 1.0 (pure white):

Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)

The constant 0.05 accounts for ambient light reflecting off physical screens. Because the human eye perceives green light far more brightly than blue light, relative luminance weights sRGB channels non-linearly: 21.26% Red, 71.52% Green, and 7.22% Blue.

Color Vision Deficiencies (CVD) in Interface Design

Approximately 8% of men and 0.5% of women have some form of color vision deficiency. When interfaces rely solely on red vs. green indicators (such as error states vs. success states), users with Protanopia (red-blind) or Deuteranopia (green-blind) perceive both hues as nearly identical shades of muddy khaki.

By testing your palettes with SetHue’s built-in CVD simulation, you can ensure that buttons, alerts, and call-to-actions retain distinct luminance borders and legible contrast, independent of chromatic hue.

Frequently Asked Questions About WCAG Contrast

What is the minimum WCAG contrast ratio for body text?

Under WCAG 2.1 Level AA, normal text (under 18pt or under 24px) must maintain a minimum contrast ratio of 4.5:1 against its background. For Level AAA, normal text must meet a 7.0:1 contrast ratio.

What qualifies as "Large Text" under WCAG guidelines?

Large text is defined as text that is at least 18pt (typically 24px) regular weight, or at least 14pt (typically ~18.5px) bold weight. Large text requires a minimum contrast ratio of 3.0:1 for Level AA and 4.5:1 for Level AAA.

How does the SetHue Smart Auto-Fix feature work?

SetHue’s auto-adjustment algorithm isolates the hue and saturation of your original text color and uses binary perceptual steps to adjust only the HSL lightness until it satisfies the exact required contrast ratio (4.5:1 for AA or 7.0:1 for AAA) against your background color.

Do UI components and input borders need to meet contrast ratios?

Yes. Under WCAG 2.1 Success Criterion 1.4.11 (Non-text Contrast), user interface components such as active input borders, toggle switches, checkboxes, and graphical icons must have a contrast ratio of at least 3.0:1 against adjacent colors.

Why simulate Color Vision Deficiencies (color blindness)?

Over 300 million people worldwide have color vision deficiency (such as Protanopia or Deuteranopia). Simulating these conditions ensures that your design communicates hierarchy and clarity through pure contrast and luminance rather than color hue alone.