CLIENT ENGINE // AIR-GAPPED

WCAG 2.1 Color Contrast Checker

Verify foreground and background color pairs against W3C WCAG 2.1 AA and AAA accessibility thresholds with live typography and UI component previews.

APPARATUS // CONTRAST-CHECKER VERIFIED OK // 0.0ms

Quick Reference Benchmarks

WCAG AA Normal Text ≥ 4.5 : 1 Ratio

WCAG AAA Normal Text ≥ 7.0 : 1 Ratio

WCAG AA Large Text ≥ 3.0 : 1 Ratio

UI Components & Icons ≥ 3.0 : 1 (SC 1.4.11)

Maximum Theoretical Ratio 21.0 : 1 (#000 vs #FFF)

Mathematical Formula

C = \frac{L_{\max} + 0.05}{L_{\min} + 0.05}, \quad L = 0.2126 R_{\text{lin}} + 0.7152 G_{\text{lin}} + 0.0722 B_{\text{lin}}

W3C WCAG 2.1 contrast ratio derived from gamma-linearized sRGB relative luminance values.

Overview & Background

Digital accessibility regulations—including the W3C Web Content Accessibility Guidelines (WCAG 2.1 / ISO/IEC 40500), the Americans with Disabilities Act (ADA Title II and Title III), Section 508, and the European Accessibility Act (EN 301 549)—mandate strict luminance contrast ratios between foreground text or graphical user interface elements and their underlying background surfaces. Sufficient contrast ensures that users with moderate low vision, age-related macular degeneration, protanopia, deuteranopia, or glare-heavy mobile screens can read content without assistive magnification.

Unlike simple RGB difference formulas, WCAG 2.1 calculates contrast from linearized sRGB relative luminance (L). Because human photoreceptor cones are overwhelmingly more sensitive to green wavelengths (71.52%) than red (21.26%) or blue (7.22%), pure saturated blue (#0000FF) has a relative luminance of just 0.0722 whereas pure green (#00FF00) reaches 0.7152. Each 8-bit sRGB channel is first gamma-expanded to linear light intensity and weighted before computing the contrast ratio (L1 + 0.05) / (L2 + 0.05), yielding a scale from 1:1 (invisible identical colors) to 21:1 (pure black against pure white).

Kitiverse's WCAG 2.1 Color Contrast Checker evaluates Normal Text, Large Text (18pt+ or 14pt+ bold), and Non-Text UI Components in real time as you adjust hex codes or color pickers. All calculations execute 100% registration-free, zero account walls, private client-side compute, and local device storage.

How to check WCAG 2.1 color contrast ratios online

Test any foreground text color and background surface to verify AA and AAA accessibility compliance.

Enter your Foreground (Text) HEX code and Background Surface HEX code, or pick colors visually using the native color swatches.

Inspect the live WCAG 2.1 Contrast Ratio and the four PASS/FAIL badges for AA Normal (4.5:1), AAA Normal (7.0:1), AA Large (3.0:1), and UI Icons (3.0:1).

Click 'Swap' to invert the foreground and background roles and verify how your color pair behaves in reverse badge or button states.

Click 'Copy CSS Report' to copy the verified CSS color and background-color declarations annotated with their exact WCAG contrast ratio.

Frequently Asked Questions

What is the minimum contrast ratio required for WCAG 2.1 Level AA?

Under WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum), normal body text under 18pt (24px) or under 14pt bold (18.66px bold) must achieve a contrast ratio of at least 4.5:1 against its background. Large text and active UI borders/icons require at least 3.0:1.

When is WCAG 2.1 Level AAA (7.0:1) required?

WCAG Level AAA requires a minimum 7.0:1 contrast ratio for normal text and 4.5:1 for large text. While Level AA is the standard legal baseline for most public websites, Level AAA is strongly recommended for healthcare portals, financial statements, legal documentation, and long-form editorial reading.

Does swapping foreground and background change the WCAG contrast ratio?

No. The mathematical WCAG 2.1 formula divides (L_lighter + 0.05) by (L_darker + 0.05), which is symmetric regardless of which color is assigned to text or background. However, human visual perception (addressed in upcoming WCAG 3.0 APCA) can perceive light text on dark backgrounds slightly differently due to halation.

What counts as 'Large Text' under W3C WCAG specifications?

W3C defines large-scale text as at least 18 point (which equals 24 CSS pixels at 96 DPI) for regular weight fonts, or at least 14 point ( approximately 18.66 CSS pixels) for bold weight fonts (font-weight: 700 or higher).

Do form input borders and icons need to pass contrast checks?

Yes. WCAG 2.1 Success Criterion 1.4.11 (Non-text Contrast) requires that user interface components (such as text input borders, focus rings, checkboxes, and standalone actionable icons) maintain at least a 3.0:1 contrast ratio against adjacent colors.

Are my design system colors stored or tracked on external servers?

No. Kitiverse is 100% registration-free, zero account walls, private client-side compute, and local device storage. Every luminance and contrast calculation happens locally inside your browser.

Related Instruments in This Workbench

All Color & Design Tools →

Color & Design →

HEX, RGB, HSL & CMYK Color Converter

Bidirectional 24-bit color code converter translating between hexadecimal (#RRGGBB), CSS RGB/RGBA, cylindrical HSL, and subtractive print CMYK.

Color & Design →

Color Picker & Palette Generator

Multi-format color conversion (HEX, RGB, HSL, OKLCH), instant WCAG 2.1 accessibility contrast calculation, and harmonic pastel chalk palette generation.

Image & Graphics →

Image Resizer & Aspect Ratio Calculator

Resize PNG, JPEG, and WebP images to exact pixel dimensions, lock aspect ratios with GCD simplification (16:9, 4:5, 1:1), and calculate 300 DPI print sizes locally.

Video Studio →

Video Cropper

Crop video files online to 9:16 for TikTok and Reels, 1:1 for Instagram, or custom aspect ratios directly in your browser. Fast, 100% private, zero server uploads.

Video Studio →

Video Audio Remover

Remove audio and sound tracks from MP4, MOV, and WebM videos online directly in your browser. Fast, 100% private, and zero server uploads.

Document & PDF →

PDF Organizer & Splitter

Organize, reorder, rotate, split, and merge PDF pages directly in your browser. Features visual thumbnail reordering, custom page range extraction, multi-document merging, and 100% private zero-upload processing.

Client-Side Execution & Verification Note:

This utility runs 100% locally in your browser with local device storage and zero server uploads. All outputs are provided on an "as-is" basis—please validate critical data, code, and files before deploying to production.