Week 320 was posted by Charanjit Chana on 2023-12-11.
A while ago, I came across this site that showed whiter-than-white text on a white background. A couple of caveats; first you need a display and browser that supports HDR (Safari on iPhone for example) and second your brightness needs to be bellow 100%.
Experimenting with HDR colours & demo
I took the original demo from kid.ing and it was really easy to replicate. I also took the base demo and tweaked the colour to be rgb(200,255,255) which was an extremely bright teal colour. It worked a treat, but when I introduced more text it stopped working and no matter what I do I can't get it to show anything other than white anymore.
While I'd love to show you what you should see below, screenshots capture the text as white on white so you loose the HDR aspect (feedback given to Apple: FB13460454).
I started again and built the demo out to show ultra-bright teal text, followed by regular teal text. It worked, but the difference wasn't as stark as I had expected. I left those in but applied the same colour to some overlapping boxes. This time, a screenshot captured some of the difference, but doesn't quite show the contrast the device can show.
You also still get the problem that the brighter box is invisible on other devices, but a fun experiment anyway. This is what the Codepen demo looks like on an iPhone in Safari:
HDR?
The demo is actually above, if you're using Safari on iOS and have a HDR screen (modern OLED iPhones), then you should see a white heading. If not, then you'll just have a gap in the page.
Tags: css