Color Palette Generator & WCAG 2.1 Contrast Accessibility Checker
Check color contrast ratios against WCAG 2.1 Level AA and AAA standards. Generate harmonic palettes with instant relative luminance preview. 100% in-browser.
WCAG 2.1 Compliance Matrix
W3C RecommendationSC 1.4.11 Non-text contrast compliance
Live Design Component Preview
Actual Browser Text RenderingHigh-Contrast Web Typography
This live sandbox demonstrates real-world legibility, chromatic harmony, and optical accessibility against WCAG 2.1 compliance criteria in modern browser rendering.
Harmonic Color Palettes
Reserved high-performance space. Zero Cumulative Layout Shift (CLS) guaranteed.
Understanding WCAG 2.1 Contrast Ratios, Relative Luminance & Color Accessibility
Web Content Accessibility Guidelines (WCAG) 2.1 define strict contrast ratio standards to ensure digital content is comfortably legible for users with low vision, color blindness, or situational visual impairments such as screen glare in direct sunlight.
The mathematical calculation of contrast ratio is based on Relative Luminance (L), which normalizes the perceived brightness of any sRGB color from 0.0 (darkest black) to 1.0 (lightest white). Because human photopic vision is non-linear and significantly more sensitive to green wavelengths than red or blue, the standard coefficients apply: L = 0.2126*R + 0.7152*G + 0.0722*B after sRGB gamma expansion.
The resulting contrast ratio formula is (L1 + 0.05) / (L2 + 0.05), producing values ranging from 1:1 (identical colors) to 21:1 (pure black on pure white). WCAG Level AA requires a minimum ratio of 4.5:1 for body copy and 3.0:1 for large text or graphical boundaries. Level AAA mandates 7.0:1 for standard body text.
OmniTools calculates all luminance conversions and harmony vectors 100% client-side in your local browser memory. Hex codes, palette ideas, and design tokens never transmit across the network.
Frequently Asked Questions (FAQ)
Level AA requires a minimum contrast ratio of 4.5:1 for normal body text and 3:1 for large text (18pt or 14pt bold). Level AAA represents the gold standard for accessibility, requiring 7:1 for normal text and 4.5:1 for large text.
The human eye's cone receptors are peaked around green wavelengths (555nm). Therefore, WCAG relative luminance weights green at 71.52%, red at 21.26%, and blue at only 7.22%.
Yes. The WCAG contrast formula always places the lighter color's luminance (L1) over the darker color's luminance (L2), guaranteeing identical contrast ratios regardless of which color is foreground or background.