Home▸Colour Science & Perceptual Design▸Contrast Ratio Field Map

Contrast Ratio Field Map

Interactive WCAG contrast-ratio field map: a 2D heatmap over background/text luminance space shows every AA and AAA boundary as an iso-contrast contour, with a live gamma-linearization curve and cone-weighted channel bar chart driven by the same sRGB math as a real dark-mode accessibility check.

Colour Science & Perceptual Design2DEasy60 FPS📱 Mobile-adapted⇄ 3D 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. Instead of scoring only the one background/text pair you picked, this simulator renders the entire luminance-vs-luminance parameter space as a 2D field map — every possible pair of luminances, colored by its contrast ratio, with the AAA/AA/large-text/fail boundaries drawn as exact iso-contrast contour lines. A crosshair marks your current pick so you can see, spatially, how close it sits to the next threshold and which direction to nudge it. A companion gamma-linearization curve and a cone-weighted R/G/B bar chart (green dominates, blue barely registers) complete the same math the 3D lab shows, computed independently on a 2D canvas.

⚙ Under the hood

A 2D heatmap over the full background/text luminance space shows every WCAG AA and AAA contrast boundary as an exact iso-contrast contour line, with a live crosshair for your chosen colors, a gamma-linearization curve, and a cone-weighted R/G/B bar chart — the same sRGB relative-luminance math as a real dark-mode accessibility check, computed independently on a 2D canvas.

color-scienceaccessibilitywcagcontrast-ratioluminancedark-modefield-map

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install