Dual-Standard Contrast & Perception Lab
Evaluate color contrast using the normative WCAG 2.2 relative luminance formula alongside the candidate WCAG 3 APCA perceptual algorithm. Includes live color vision deficiency simulation and font-size recommendations.
Color Inputs
Color Vision Deficiency Simulation
Simulates how this combination appears to users with different forms of color perception.
Note: Matrix transforms approximate average perceptual loss and cannot replace qualitative user testing.
The quick brown fox jumps over the lazy dog.
Web standards ensure content remains legible and accessible across all devices and environmental conditions. Visual hierarchy depends on perceivable contrast differences.
WCAG 2.2 Conformance (Ratified Standard)
Normative W3C Recommendation & legal compliance metric.
WCAG 3 / APCA Analysis (Research Candidate)
Non-NormativePerceptual algorithm modeling human vision, spatial frequency, and display polarity.
APCA Recommended Minimum Font Sizes by Weight
| Font Weight | Min Size | Usability Guidance |
|---|---|---|
| Light (300) | 18px | Recommended |
| Regular (400) | 14px | Recommended |
| Medium (500) | 13px | Recommended |
| Semi-Bold (600) | 12px | Recommended |
| Bold (700) | 12px | Recommended |
| Black (900) | 12px | Recommended |
Why Mathematical Contrast Ratios Fail Real Human Eyes
The WCAG 2.2 relative luminance formula relies on static sRGB coefficients established in the late 1990s. Human eyes do not perceive color through static division: our photoreceptors adapt dynamically based on spatial frequency, font thickness, and background intensity.
Pure Blue on Black Surface
WCAG 2.2 Ratio: 2.44:1 (Passes UI Component Threshold)
The Optical Problem: Less than two percent of retinal cone photoreceptors in the central fovea are S-cones (blue sensitive). When users stare directly at thin blue text on dark screens, the central vision area experiences a biological blindspot.
How APCA Evaluates It: APCA calculates this as Lc 14, an immediate rejection for all text and iconography, protecting readers from extreme optical fatigue.
Pure White on Pitch Black
WCAG 2.2 Ratio: 21:1 (Maximum Theoretical Contrast)
The Optical Problem: In a dark environment, human pupils dilate to capture light. Unfiltered high-luminance pure white text on pitch black causes light to scatter across the cornea, creating visual ghosting and halos for 33 percent of people with astigmatism.
The Solution: Professional design systems cap dark mode contrast between Lc 75 and 85, pairing soft off-white text with deep charcoal surfaces.
Semantic Color Token Architecture for Design Systems
Leading design systems bridge the gap between WCAG 2.2 legal requirements and APCA visual comfort by establishing explicit Lc target bands for design tokens.
| Token Name | Target Usage | APCA Lc Band | WCAG 2.2 Baseline |
|---|---|---|---|
| text-primary | Editorial body copy, data tables, primary interface controls. | Lc 75 to 90 | Minimum 4.5:1 (Level AA) |
| text-secondary | Metadata, breadcrumbs, supporting captions, input hints. | Lc 60 to 75 | Minimum 4.5:1 (Normal) or 3:1 (Large) |
| border-interactive | Text input borders, radio outlines, custom checkbox rings. | Lc 45 to 60 | Minimum 3.0:1 (SC 1.4.11) |
| surface-disabled | Inactive buttons, disabled options, non-interactive placeholders. | Under Lc 30 | Exempt from minimums |
Frequently Asked Questions
Concise answers regarding visual science, dark mode perception, and contrast compliance.