What is the difference between WCAG AA and AAA?

WCAG Level AA is the minimum standard required by international accessibility laws (like Section 508 and the European Accessibility Act), requiring a minimum 4.5:1 contrast for regular text and 3:1 for large text. Level AAA is the highest tier, requiring 7:1 for regular text and 4.5:1 for large text.

What counts as "Large Text" under WCAG guidelines?

Large text is defined as at least 18pt (24px) regular weight or at least 14pt (18.66px) bold weight.

How do the color blindness simulations work?

The simulations use mathematical color projection matrices (SVG feColorMatrix) calibrated to simulate the wavelength absorptions of the L-cone, M-cone, and S-cone photoreceptors in the human retina.

Web Typography & Contrast Accessibility Engine (WCAG 2.2)

Calculate WCAG 2.2 color contrast ratios, simulate visual color blindness, and test live typography pairing.

Security Guarantee: 100% Client-Side In-Browser Execution. Computations run locally within browser RAM. Zero remote telemetry.

Technical Overview & Architecture

An advanced accessibility suite computing exact relative luminance ratios for WCAG 2.2 AA/AAA compliance. Includes live color blindness simulations (Protanopia, Deuteranopia, Tritanopia, Monochromacy) and typography pairing scales.

The contrast calculation transforms sRGB color values (0-255) into linear relative luminance values using the formula: L = 0.2126*R + 0.7152*G + 0.0722*B after gamma expansion. The contrast ratio is computed as (L_lighter + 0.05) / (L_darker + 0.05). For color deficiency simulations, native SVG feColorMatrix transforms are applied dynamically.

Key Capabilities & Features

WCAG 2.2 Mathematical Engine: Calculates exact relative luminance and contrast ratios following the official W3C formula: (L1 + 0.05) / (L2 + 0.05).
Color Blindness Matrix Simulation: Simulates Protanopia (red-blind), Deuteranopia (green-blind), Tritanopia (blue-blind), Achromatopsia (monochromacy), and Cataracts/Low Vision in real-time.
Live Typography & Scale Lab: Preview body and display font pairings, adjust font size (px/rem), line height, and letter spacing across light and dark backgrounds.
Auto-Fix Compliance Suggester: Automatically shifts color lightness and saturation to the closest compliant shade satisfying AA (4.5:1) or AAA (7:1) thresholds.

Step-by-Step Usage Guide

Choose Foreground & Background Colors: Pick colors using the interactive color picker, enter Hex/RGB values, or use preset accessible palettes.
Check Compliance & Color Blindness: View the instant contrast score (e.g. 7.42:1 AAA) and toggle color deficiency lenses to ensure universal readability.
Fine-Tune Typography & Copy CSS: Adjust font sizes and line heights to preview actual UI components, then copy the auto-suggested compliant colors.

Frequently Asked Questions (FAQ)

What is the difference between WCAG AA and AAA?: WCAG Level AA is the minimum standard required by international accessibility laws (like Section 508 and the European Accessibility Act), requiring a minimum 4.5:1 contrast for regular text and 3:1 for large text. Level AAA is the highest tier, requiring 7:1 for regular text and 4.5:1 for large text.
What counts as "Large Text" under WCAG guidelines?: Large text is defined as at least 18pt (24px) regular weight or at least 14pt (18.66px) bold weight.
How do the color blindness simulations work?: The simulations use mathematical color projection matrices (SVG feColorMatrix) calibrated to simulate the wavelength absorptions of the L-cone, M-cone, and S-cone photoreceptors in the human retina.