Home▸Colour Science & Perceptual Design▸Dark Mode Contrast & Luminance Lab

Dark Mode Contrast & Luminance Lab

Interactive WCAG relative-luminance and contrast-ratio simulator: pick a background and text color, watch sRGB gamma-corrected channel weights drive the contrast score, and see whether your dark-mode palette actually passes accessibility thresholds.

Colour Science & Perceptual Design3DEasy60 FPS📱 Mobile-adapted⇄ 2D version

A real dark-mode theme lives or dies on one formula: the WCAG relative-luminance calculation that turns an sRGB color into a perceptual brightness value, and the contrast-ratio comparison built on top of it. This simulator renders your chosen background and text colors as floating panels in 3D, plus a live instanced bar chart of the gamma-corrected, cone-weighted R/G/B contributions that make up each color's luminance — so you can see directly why green dominates perceived brightness while blue barely moves it. Drag the RGB sliders (or jump to the dark/light presets), and the contrast ratio, WCAG pass/fail verdict and both luminance values update in real time, exactly as a browser's accessibility checker would score your palette.

⚙ Under the hood

Pick a background and text color and watch the WCAG sRGB-gamma-corrected relative luminance formula compute the real contrast ratio behind any dark-mode palette, with a live instanced bar chart of each color channel's weighted contribution.

color-scienceaccessibilitywcagcontrast-ratioluminancedark-mode

3D · Three.js / WebGL renderer · 60 FPS target · runs fully client-side, no install