Accessibility Lab
Stress-test contrast ratios against WCAG 2.2 AA / AAA and APCA criteria. Simulate color vision deficiencies in real time, auto-fix failing color pairs, and generate compliance audit reports.
Foreground (Text / Icon)
Background (Surface / Canvas)
WCAG 2.2 Contrast Ratio
Passes AAA
18.2:1
APCA Lightness Contrast:
Lc 96.8 (Recommended)
WCAG 2.2 AA / AAA Breakdown
Normal Body Text (< 18pt / 24px)
Minimum 4.5:1 for AA • 7.0:1 for AAA
AA Pass
AAA Pass
Large / Headline Text (≥ 24px or bold ≥ 18.5px)
Minimum 3.0:1 for AA • 4.5:1 for AAA
AA Pass
AAA Pass
UI Components & Graphic Elements
Form controls, icon buttons, states (min 3.0:1 for AA)
AA Pass
DESIGN SYSTEM ESSAY
Perceptual Contrast & Inclusive Digital Interfaces
Accessible design isn't about compromising aesthetics; it is the art of ensuring clarity, focus, and effortless legibility for every human being across all viewing conditions.
Small caption text (13px / 400 weight). Tested against WCAG 2.2 AA / AAA contrast standards.
Interactive UI Controls
mock_demo_value_not_a_real_key_0000
WCAG 2.2 Compliant Pairing