WCAG Color Contrast Checker
Verify foreground & background color pairs against WCAG Level AA and AAA accessibility thresholds with live preview, color blindness simulation, and auto-fixing.
Optimal accessibility. Fully compliant for all body text, headings, and interface elements.
Normal Text (< 18pt / 24px)
Large Text (≥ 18pt or 14pt bold)
UI Components & Graphical Objects (WCAG 1.4.11)
Required for active user interface components, input focus borders, and icons.
Live Accessibility Preview & Vision Simulator
Inspect how your color pair renders across real-world typography, interactive components, and color vision deficiencies.
Accessible design creates inclusive experiences for everyone.
The quick brown fox jumps over the lazy dog.
WCAG 2.1 requires a minimum contrast of 4.5:1 for normal text and 3.0:1 for large text. AAA compliance requires 7:1 for enhanced visual clarity in high-glare environments.
Comprehensive WCAG Color Contrast Guide
Everything you need to know about Web Content Accessibility Guidelines (WCAG 2.1 & 2.2) compliance rules, mathematical formulas, and typography thresholds.
WCAG 2.1 AA vs. AAA Compliance
Level AA is the legally recognized international benchmark for web accessibility (ADA, Section 508, EN 301 549). It requires at least 4.5:1 for normal text and 3.0:1 for large text.Level AAA is enhanced accessibility (7.0:1 for body text), critical for public health, government, and high-glare environments.
Normal Text vs. Large Text Thresholds
WCAG defines Large Text as font sizes of at least 18pt (24px) for regular weight, or at least 14pt (18.66px) for bold weights (700+). Because larger glyphs feature thicker stroke weights, they remain readable at a lower contrast ratio of 3.0:1.
Non-Text Contrast (Criterion 1.4.11)
Introduced in WCAG 2.1, Criterion 1.4.11 mandates a minimum 3.0:1 contrast ratio for user interface components (button borders, form input outlines, toggle switches, active focus rings) and essential informational graphics or icons against adjacent colors.
The Mathematical Luminance Formula
Contrast is computed using Relative Luminance (L), where L = 0.2126R + 0.7152G + 0.0722B after sRGB gamma expansion. The formula (L1 + 0.05) / (L2 + 0.05) balances perceived human visual sensitivity across green, red, and blue spectrums.
Color Blindness & Low Vision Impact
Over 300 million people worldwide experience Color Vision Deficiency (CVD). Protanopia and Deuteranopia frequently cause red and green hues to appear as muted browns or yellows of equal lightness. Sufficient luminance contrast guarantees readability even when hue discrimination is compromised.
Zero Data Retention Guarantee
Unlike server-reliant auditing suites, ToolsAA calculates all mathematical transformations, CVD matrices, and compliance ratios 100% inside your local browser runtime. Zero network requests or brand color tokens are ever transmitted to external servers.
Frequently Asked Questions (FAQ)
What color formats can I paste into the input fields?
You can input 3-digit, 4-digit, 6-digit, and 8-digit Hex codes (e.g., #FFF, #3B82F6, #18181BCC), RGB and RGBA strings (e.g., rgb(255, 255, 255), rgba(0, 0, 0, 0.8)), HSL and HSLA strings, or standard CSS named colors (e.g., white, black, navy, crimson, cyan).
How does this tool handle semi-transparent (RGBA/alpha) colors?
When a foreground color includes an alpha channel (opacity < 1), our client-side engine automatically performs alpha compositing against the specified background color using standard Porter-Duff alpha blending. This calculates the exact blended pixel color perceived by human vision.
What is the difference between WCAG 2.1 and the upcoming APCA model?
WCAG 2.1 calculates symmetric ratios based solely on mathematical relative luminance. APCA (Accessible Perceptual Contrast Algorithm), proposed for WCAG 3, takes into account spatial frequency, font weight, and polarity (dark-on-light vs. light-on-dark). Currently, WCAG 2.1 Level AA remains the enforceable global legal compliance standard.
Does disabled or inactive text need to meet the 4.5:1 ratio?
Under WCAG Criterion 1.4.3, text that is part of an inactive user interface component (such as disabled submit buttons or purely decorative text elements) is explicitly exempt from the 4.5:1 requirement. However, best UX practice advises keeping disabled text above 3:1 whenever feasible.