WCAG Contrast Ratio Lab (2D)

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 2D simulator plots a hue/lightness field at fixed saturation, drops a draggable marker for your foreground and background color at their true position, and projects both onto a live luminance scale beneath. Drag either marker (or use the sliders) 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. Pan and zoom the field to inspect any region closely.