WCAG 2.2 Color Contrast Checker

Under WCAG 2.2 Level AA, the minimum required contrast ratios depend on the size and type of visual content:

• Normal Body Text (< 18pt or < 14pt bold): Requires a minimum contrast ratio of 4.5:1 against its background (Success Criterion 1.4.3).
• Large Text (≥ 18pt / 24px regular or ≥ 14pt / ~18.66px bold): Requires a minimum contrast ratio of 3.0:1 (Success Criterion 1.4.3).
• Non-Text UI Elements & Graphical Objects: Requires a minimum contrast ratio of 3.0:1 against adjacent colors for active user interface components (such as form field borders, button outlines, checkboxes, and radio buttons) and meaningful graphical icons (Success Criterion 1.4.11).

Exceptions: Purely decorative text, inactive (disabled) interface controls, and brand logos have no minimum contrast requirements under WCAG 2.2.

WCAG 2.2 Level AA is the recognized international benchmark for web and digital accessibility, serving as the legal foundation for the Americans with Disabilities Act (ADA Title III), US Section 508, and the European Accessibility Act (EN 301 549).

To satisfy Level AA conformance, digital products must fulfill all Level A and Level AA success criteria across four foundational principles: Perceivable, Operable, Understandable, and Robust. Primary color and visual contrast requirements include:

• SC 1.4.3 Contrast (Minimum): Requires at least 4.5:1 for normal body text and 3.0:1 for large text.
• SC 1.4.11 Non-text Contrast: Requires at least 3.0:1 for user interface boundaries, focus states, and standalone informative graphics.
• SC 1.4.1 Use of Color: Color must never be the single visual cue used to convey status, errors, or navigation state; indicators like icons, text labels, or underlines must accompany color differences.
• SC 2.4.11 Focus Not Obscured (Minimum) (New in 2.2): When a user interface component receives keyboard focus, it must not be completely obscured by author-created overlays or sticky banners (paired with SC 1.4.11's 3.0:1 focus indicator contrast and SC 2.4.13 for Level AAA Focus Appearance).
• SC 2.5.8 Target Size (Minimum) (New in 2.2): Interactive touch targets must occupy at least 24×24 CSS pixels or feature sufficient surrounding clearance.

A 4.5:1 contrast ratio means that the lighter of two colors reflects 4.5 times more perceived relative luminance than the darker color. The W3C calculates this using the normalized relative luminance formula:

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

where L1 is the relative luminance of the lighter color (from 0.0 for pure black to 1.0 for pure white) and L2 is the relative luminance of the darker color. The constant 0.05 accounts for typical ambient room flare reflected off computer monitors.

The 4.5:1 threshold was established through empirical clinical research: it compensates for the contrast sensitivity loss experienced by individuals with moderate visual impairments (approximately 20/40 visual acuity, common in aging adults around age 80), ensuring they can distinguish text without requiring specialized assistive magnification.

Under WCAG 2.2 (as well as WCAG 2.1 and 2.0), text is classified as Large Text if it satisfies either of the following physical criteria:

• At least 18 point (pt) at regular font weight (400): In CSS pixels, 1pt equals 1.333px (18pt × 1.333 = 24px). Therefore, any text sized at 24px (or 1.5rem with default root sizing) or larger qualifies as large text.
• At least 14 point (pt) with bold weight (700 / bold or heavier): In CSS pixels, 14pt equals 18.66px (14pt × 1.333 ≈ 18.66px, commonly rounded to 19px or styled with Tailwind's text-lg font-bold).

Because larger letterforms have wider stroke widths and larger visual footprints on retina displays, human eyes perceive their boundaries more easily. Therefore, Large Text is permitted a lower minimum threshold of 3.0:1 under WCAG AA (and 4.5:1 under Level AAA).

Level AA and Level AAA are the two compliance tiers defined by the W3C for digital visual accessibility:

• Level AA (Standard Compliance): The internationally enforced legal benchmark across enterprise, commerce, and public websites. Requires a minimum contrast ratio of 4.5:1 for normal text, 3.0:1 for large text, and 3.0:1 for essential non-text UI elements and graphical components.
• Level AAA (Enhanced Accessibility): The highest level of accessibility, designed for specialized high-legibility environments, government portals, and readers with severe vision loss who do not use assistive zoom tools. Requires 7.0:1 for normal text and 4.5:1 for large text.

Note: The W3C does not recommend requiring Level AAA compliance across an entire website as a blanket policy, because some rich brand palettes, photographs, and complex charts cannot achieve 7.0:1 without compromising design. However, primary reading surfaces—such as blog articles, legal documentation, and transaction flows—should strive for AAA.

WCAG 2.2 is the current official Recommendation published by the W3C (released October 2023) and represents the modern standard for accessibility engineering.

• Current Legal Landscape: Many existing statutory regulations (such as US Section 508 and older government procurement rules) still explicitly reference WCAG 2.0 or 2.1 Level AA. However, international regulatory updates—including the European Accessibility Act (EAA 2025) and updated US Department of Justice Title II guidance—are actively harmonizing with WCAG 2.2.
• Strict Backward Compatibility: WCAG 2.2 is completely backward-compatible with 2.1 and 2.0. Conforming to WCAG 2.2 Level AA automatically satisfies all criteria for WCAG 2.1 and WCAG 2.0 Level AA. Designing to WCAG 2.2 guarantees future-proof compliance without requiring future refactors.

Introduced in WCAG 2.1 and continued in WCAG 2.2, Success Criterion 1.4.11 Non-text Contrast requires a minimum contrast ratio of 3.0:1 against adjacent colors for visual indicators necessary to identify:

• User Interface Components: Visual boundaries and state indicators for interactive controls, such as input box borders, checkbox checkmarks, radio button circles, toggle switches, and button boundaries (when the boundary is needed to perceive the clickable hit area). It also applies to keyboard focus indicators and hover/active state outlines.
• Graphical Objects: Standalone meaningful icons (such as a search magnifying glass, shopping cart, or alert warning badge) and data visualization components (such as slices of a pie chart, segments of a bar graph, or lines on a metric chart) where color conveys information necessary to understand the content.

Exceptions: If an element's border is purely decorative (e.g. a button already has a solid high-contrast background and distinct text label), or if the element is disabled/inactive, the 3.0:1 non-text requirement does not apply.

A "good" contrast ratio delivers effortless reading comfort while avoiding eye fatigue or optical glare:

• 4.5:1 – 6.9:1 (Passing Level AA): The minimum legal standard for normal body text. Good for secondary captions, metadata badges, and navigation links.
• 7.0:1 – 11.9:1 (Passing Level AAA): Excellent, high-legibility contrast recommended for long-form editorial copy, blog posts, documentation, and data tables. Significantly reduces visual strain in bright ambient lighting or on mobile screens.
• 12.0:1 – 16.0:1 (Ergonomic Sweet Spot): Considered ideal by leading design systems. For instance, dark charcoal (#111111) on clean white (#FFFFFF) achieves ~16:1, offering crisp readability without the harsh visual vibration of pure black on pure white.
• 21.0:1 (Maximum Theoretical Contrast): Pure black (#000000) on pure white (#FFFFFF). While passing all criteria, maximum contrast can produce "halation" (a vibrating blur effect) for readers with astigmatism or light sensitivity.
• Below 4.5:1: Fails WCAG AA for body text and should be avoided for readable interface copy.

The Advanced Perceptual Contrast Algorithm (APCA) is the next-generation contrast method developed for upcoming WCAG 3 standards. It addresses several fundamental scientific shortcomings in WCAG 2's static relative luminance formula:

• Spatial Frequency Awareness (Font Size & Weight): WCAG 2 evaluates color pairs with a single static ratio regardless of whether text is an 11px hairline caption or an 80px ultra-bold banner. APCA calculates a Lightness Contrast score (Lc) and matches it to a matrix of required font sizes and weights, recognizing that thin strokes lose legibility much faster than thick letterforms.
• Polarity Sensitivity (Dark Mode vs. Light Mode): WCAG 2 produces the exact same ratio whether text is dark-on-light or light-on-dark. Human vision perceives light text on a dark background differently due to screen halation and pupil dilation. APCA generates signed scores (+Lc for dark text on light backgrounds and -Lc for light text on dark backgrounds), applying different perceptual curves for each.
• Physiological Adaptation Models: APCA incorporates modern non-linear cone photoreceptor adaptation curves rather than simplified sRGB gamma approximations, eliminating WCAG 2's false-passes (e.g. saturated blue on black) and false-fails (e.g. saturated yellow/orange buttons).

Real Colour Picker calculates and displays both WCAG 2.2 ratios and APCA Lc scores side-by-side for full forward compatibility.

Color Vision Deficiencies (CVD) affect how retinal cone photoreceptors in the eye absorb light wavelengths, altering both perceived hue and perceived brightness:

• Protanopia & Protanomaly (Red-Blindness): Caused by defective or missing Long-wavelength (L) cones. Because the human eye's luminance channel is heavily weighted toward red (Y = 0.2126R + 0.7152G + 0.0722B), red light appears substantially darker ("red darkening"). A deep red button (#E11D48) on a dark gray card might pass mathematical WCAG contrast for trichromatic vision, but for a protanopic user, the red text can appear nearly black, resulting in an unreadable interface failure!
• Deuteranopia & Deuteranomaly (Green-Blindness): Caused by defective or missing Medium-wavelength (M) cones. This compresses chromatic separation between greens, yellows, and reds.
• Tritanopia (Blue-Yellow Blindness): Caused by defective Short-wavelength (S) cones, distorting contrast between blues, teals, pinks, and yellows.
• Achromatopsia (Total Monochromacy): The complete absence of functional cone photoreceptors, where the user perceives the interface entirely through rod-based grayscale luminance.

Real Colour Picker incorporates live Brettel-Vienot CVD simulation matrices right into the contrast studio, allowing you to test how your color pair performs under each specific condition.

When a brand's signature accent color fails the 4.5:1 contrast ratio, designers often make the mistake of shifting the hue or desaturating the color into a dull grey, which compromises brand recognition and visual identity.

Real Colour Picker's Auto-Fix Lightness engine solves this through perceptual color science:

1. Hue & Chroma Locking: The engine isolates the color in polar perceptual space (OKLCH and HSL) and strictly locks the Hue angle (H) and Chroma (C) constant.
2. Directional Luminance Calculation: It analyzes the background color's relative luminance to determine whether the foreground needs to be lightened or darkened to increase contrast.
3. Precision Stepping: The algorithm steps the Lightness channel (L) in fine 0.5% increments until the exact mathematical threshold (4.5:1 for AA or 7.0:1 for AAA) is reached.

Because the hue and saturation remain unchanged, the resulting swatch retains 100% of your brand's unique chromatic character while meeting legal accessibility requirements in a single click.

You can check the contrast of any color combination online in real time using Real Colour Picker:

1. Open the Studio: Navigate to the WCAG 2.2 Contrast Checker.
2. Enter Your Colors: Input your Foreground (text) and Background colors via 6-digit HEX (#3B82F6), RGB, or HSL values. You can also click the color swatch to open the visual color picker or use the eyedropper to sample any pixel.
3. Read Instant Scores: The tool calculates the exact relative luminance contrast ratio along with clear Pass/Fail badges for WCAG 2.2 AA (Normal Text, Large Text, UI Components), AAA, and APCA Lc readability.
4. Inspect Live UI Previews: Scroll through the interactive UI mockups—including buttons, input fields, warning cards, and typography paragraphs—to inspect how your pair reads in real-world layouts.
5. Auto-Fix or Export: If your pair fails, click "Auto-Fix AA" to automatically tune lightness, or click "Export" to copy accessible tokens directly into Tailwind CSS v4 @theme or CSS variables.

Google Chrome provides built-in accessibility inspection tools directly within Chrome DevTools:

1. Inspect Element: Right-click the text or UI element on any webpage and select Inspect (or press Ctrl+Shift+I on Windows/Linux or Cmd+Option+I on macOS).
2. Locate CSS Color: In the Elements panel, inspect the Styles sub-pane and find the CSS rule defining color.
3. Open Chrome Color Picker: Click the small color square directly next to the color value.
4. Inspect Contrast Ratio: At the bottom of the popup, expand the Contrast ratio row. Chrome displays the computed ratio against the element's background and shows green checkmarks for WCAG AA and AAA compliance.
5. Visual Guideline Curves: Expanding the contrast section reveals two curved lines superimposed on the 2D color picker spectrum representing the AA and AAA thresholds, showing the exact color regions that pass.
6. Automated Audits via Lighthouse: To audit the entire page at once, switch to the Lighthouse tab in DevTools, select the Accessibility category, and run an audit to identify all contrast violations across the DOM.

Real Colour Picker's WCAG 2.2 Contrast Studio is recognized as the most versatile, developer-friendly contrast checker available today:

• Dual-Standard Verification: Computes both classical WCAG 2.2 relative luminance ratios and the modern APCA (Lc) candidate metric for WCAG 3.
• 1-Click Auto-Fix Engine: Solves failing color contrast without changing hue, micro-tuning lightness while locking brand identity.
• Complete Color Blindness Testing: Live simulation for Protanopia, Deuteranopia, Tritanopia, and Achromatopsia with instant re-calculation.
• Real-World UI Previews: Live rendered interactive controls, button states, form inputs, notification cards, and paragraph typography.
• Tailwind CSS v4 & Design Token Export: Copy certified accessible pairs directly formatted for Tailwind CSS v4 @theme, CSS variables, and design system JSON.
• Zero-Latency & 100% Client-Side Privacy: All calculations execute in local browser memory with no telemetry, no tracking, and no server roundtrips.

You can use Real Colour Picker (realcolourpicker.com) as an all-in-one suite to create, test, and audit color palettes:

• Palette Studio: Extract harmonious palettes from uploaded photos or clipboard screenshots using median-cut quantization, and explore complementary, triadic, tetradic, and analogous harmonies on the Color Wheel.
• WCAG 2.2 Contrast Checker: Audit individual color pairs or full palette matrices against international accessibility criteria (Level AA 4.5:1, AAA 7.0:1, and Non-text UI 3.0:1) with live pass/fail indicators.
• Interactive UI Mockup & 60-30-10 Testing: Preview how your palette distributes across real interface components (backgrounds, cards, buttons, badges) to test visual balance before writing code.
• Design Token Exporter: Export validated color palettes directly to Tailwind CSS v4, CSS custom properties, or design system JSON files.