50% grey test

HTML

<center>On a correctly calibrated sRGB monitor, if viewed from a distance, the central hatched rectangle<br>should appear to be of equal colour and brightness to the surrounding field.</center><div />

CSS

body{background:#bbb}div{position:absolute;left:25%;top:25%;width:50%;height:50%;background:url(data:image/bmp;base64,Qk0iAAAAAAAAABoAAAAMAAAAAQACAAEAGABMTEwA9vb2AA==)}

JavaScript

document.body.onload=_=>document.body.children[1].style.backgroundSize=1/devicePixelRatio+"px"