Home▸Computer Science▸WCAG Contrast Ratio Lab

WCAG Contrast Ratio Lab

Interactive 3D simulator of the WCAG 2.x contrast-ratio formula: move a foreground and background color through RGB space and watch relative luminance, contrast ratio and AA/AAA pass/fail update live against the real accessibility thresholds.

Computer Science3DEasy60 FPS📱 Mobile-adapted

Details

CategoryComputer Science

RenderingThree.js · WebGL

DifficultyEasy

Target FPS60

ControlsFour hue/lightness sliders set the foreground and background colors, a large-text checkbox switches which AA/AAA threshold applies, and Swap / Random-pair buttons jump to new color combinations while the 3D markers, luminance bar and pass/fail badges update live.

accessibilitywcagcontrast-ratiocolor-scienceweb-standardsux

Related simulations

Contrast Ratio Field MapA 2D heatmap over the full background/text luminance space shows every WCAG AA and AAA…

Dark Mode Contrast & Luminance LabPick a background and text color and watch the WCAG sRGB-gamma-corrected relative luminance…

Screen Reader Focus Order Map (2D)Top-down 2D diagram of how VoiceOver/TalkBack walk a mobile screen's accessibility tree in… ⊞ All 307 in Computer Science →

Every "sufficient contrast" rule in the WCAG accessibility guidelines — the ones behind the 4.5:1 minimum quoted in every mobile-accessibility checklist — reduces to one formula: relative luminance, gamma-corrected per channel, folded into a ratio. This simulator renders the sRGB color cube in 3D, drops a marker for your chosen foreground and background color at their true RGB coordinates, and projects both onto a live luminance scale. Move either color's hue and lightness and watch the relative luminance, the contrast ratio, and the pass/fail state for AA and AAA (normal and large text) update in real time against the actual WCAG thresholds — including the counter-intuitive cases where two visually distinct hues land on almost the same luminance and fail contrast anyway.

⚙ Under the hood

Interactive 3D simulator of the WCAG 2.x contrast-ratio formula: move a foreground and background color through sRGB space and watch relative luminance, contrast ratio and AA/AAA pass/fail update live against the real accessibility thresholds.

accessibilitywcagcontrast-ratiocolor-scienceweb-standardsux

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