The Science of Color Harmony, Relative Luminance & WCAG Accessibility
Colorimetry Standards • W3C Web Content Accessibility Guidelines 2.1
1. Mathematical Definition of Relative Luminance
The human eye has varying sensitivity to light across different wavelengths, reacting most acutely to green photons. To compute perceived brightness accurately, W3C standards specify the relative luminance formula:
Contrast Ratio is then determined by: \[ \text{Contrast} = \frac{L_1 + 0.05}{L_2 + 0.05} \] where \(L_1\) is the lighter color and \(L_2\) is the darker color. Level AA compliance mandates a contrast ratio of \(\ge 4.5:1\) for body text and \(\ge 3.0:1\) for large typography.
2. Color Harmonies: Analogous, Triadic and Split-Complementary
Cohesive user interfaces rarely pick random colors. Our engine applies algorithmic angles across the 360° HSL color wheel—generating complementary (180° opposite), triadic (120° offsets), and analogous (30° adjacent) palettes with balanced saturation and lightness distributions.
3. Design Guidelines (FAQ)
What is the spacebar lock feature?
Clicking the lock icon freezes that specific swatch. Pressing spacebar then generates new harmonious hues anchored strictly around your locked favorites.
How does image palette extraction work?
Uploading an image samples pixel color clusters using k-means color quantization on a local HTML5 canvas, completely without network uploads.