Sandbox
A real <nocap-secret> with the masking engine exposed. The
numbers under it are measured on each change, not looked up. Fonts and colours
live on the styling page.
input.value where anything can read it. That is demo
scaffolding rather than the component. The
security check has no field for exactly this reason.
The two frames a capture can land on. You never see these live, because they cancel in the average your eye computes. That is the point, and it is why they are shown here.
…
Choosing colours
The palette decides whether any of this works. Masking ratio is
min(swing(text), swing(background)) / |text − background|, where
swing is how far a colour can travel in code values before it clips. A fully
saturated colour has no swing at all, so it cannot carry noise and cannot be
masked at any amplitude.
It will not match a near-black page, and that is not a bug.
#6d6d6d on #404040 is about the darkest pair that
still reaches a ratio of 1.0 with enough separation to read. At
#0d0d0e the best text colour that still hides the value is
#1a1a1a, which nobody can read, and every readable choice leaks
0.53 or worse. If your design is darker than this, put the secret on a panel at
this level rather than on the page itself, which is what this site does.
If the colours look off against a dark page, that is simultaneous contrast rather than the split: the same physical grey reads lighter on a dark surround than on a mid one. The split itself is exact, and every authored colour round-trips to itself.