Show HN: What's my JND? – a colour guessing game

Posted by Keithamus 15 hours ago

https://www.keithcirkel.co.uk/too-much-color/

Comments

Comment by OisinMoran 46 minutes ago

This is fun! I just played once and got 0.0016, which it says is "absurdly below the theoretical limit"...

Okay, tried again and got 0.0034 which is still says is beyond the human limit! I'll have to give this to my mum because we often argue about colours and I suspect she might be a tetrachromat.

Both tests on a Pixel 10 btw

Comment by vunderba 1 hour ago

Nice job. Kind of reminds me of this one which increases the number of squares with the odd-one out becoming more subtle as you progress further in the game, but I prefer your sliding mechanic better for this kind of game.

https://vectorization.eu/color-perception-test

Comment by OisinMoran 39 minutes ago

Ooh this one is fun too! Though it doesn't get quite as hard as the slider one. Breezed through all 47 levels of this pretty easily while there were one or two impossible seeming ones in the slider.

Comment by hatthew 1 hour ago

To me this seems primarily like an aim test, not a color perception test

Comment by vova_hn2 23 minutes ago

0.0025

Had to turn off the "Night Light" (reducing blue) and set brightness to max.

Comment by brikym 1 hour ago

Nice game very engaging. I got 0.0046

It helps if I move side to side like a party parrot. I'd love to see a histogram of where I stand.

Comment by john_strinlai 2 hours ago

surprisingly fun.

not knowing anything about color, i will admit i am a bit confused. i scored 0.0034 and was told "if you're not already calibrating displays for a living, you're leaving money on the table". which, to me, implied i did quite well!

but, reading the scores posted here, most people are doing a lot better than me. i doubt all of us are crazy good...

so, i assume the front page is a typo: "most people land around 0.02" (should be 0.002, not 0.02)? if yes, then i am back to not understanding the message i got about calibrating displays, because i did quite a bit worse than 0.002.

edit: nerd-sniping myself a little bit. but it appears (stressing: i know nothing) the "0.02" is accurate, but calculated by showing someone two colors and asking "are these different" until the person answers the question correctly 50% of the time. which is a different question than "where, precisely, is the line between these two colors". with the different question, it ends up compressing the result down by about an order of magnitude.

Comment by Keithamus 2 hours ago

Right. The average score is under different test conditions. Obviously this game is a little silly version with very little accuracy to the lab testing, but hopefully it gets people thinking about this stuff a bit more! Which given your investigations into this, I would say it has succeeded.

Comment by itishappy 1 hour ago

I'm colorblind, but I ended up getting a 0.0028 "much better than average" score. Hmm... Fun site!

To promote some further reading:

OKLab isn't actually a perceptually uniform colorspace. It's better than others, but it was specifically chosen as a tradeoff between accuracy and speed (hence the name OK). When you start digging this deep, you quickly learn that we have yet to invent any perceptually uniform colorspaces; even the most precise models we have end up using fits and approximations. Color has some really inconvenient properties like depending strongly on brightness and background. Frankly, given the differences in human biology (having orders of magnitude differences in relative numbers of each cone, for instance), it's surprising we agree as much as we do! Human color perception is an endless pit of complexity.

(Note, I don't say any of this to detract from what you've built here, merely expand. Your site is awesome and I love it!)

Comment by john_strinlai 2 hours ago

>[...] but hopefully it gets people thinking about this stuff a bit more! Which given your investigations into this, I would say it has succeeded.

absolutely! thanks for posting it and the associated article.

Comment by erikig 9 hours ago

On a good monitor, I got to 0.0032 and then it all fell apart.

Here's the related article on how much accuracy is really needed in CSS values. https://www.keithcirkel.co.uk/too-much-color/

Comment by patrakov 4 hours ago

It's worse.

The code contains a function that, given the target ΔE, generates two colors in floating-point Oklab representation, separated by that distance. But there is no check whether the two generated colors end up rounding to exactly the same one on 8-bit displays. So, I was asked to find a boundary (while the claim was that there were two distinct colors 0.0013 ΔE apart) between RGB(80, 83, 152) and RGB(80, 83, 152). Obviously unfair.

Comment by Keithamus 2 hours ago

I will get around to fixing this. An oversight. Apologies.

Comment by refulgentis 1 hour ago

Are you using Oklab channels to measure delta-E / difference? If so, Oklab is a hacky way to approximate a real colorspace with just one matrix multiplication, the channels have no meaning and are not related to delta-E. Use real Lab*, it'll take 10 minutes with an LLM.

EDIT: Just read the blog post. I thought HSL was bad for design, Oklab is much worse. It just goes right ahead and reuses color science terms so it sounds it got it all right. (dEOK existing and its "JND" being 0.02 absolutely made my head spin. None of this is recognizable to a color scientist)

Comment by whalesalad 13 minutes ago

0.0028 -- I think a few of these surpassed the capabilities of my M2 air display.

Comment by filmgirlcw 10 hours ago

This is such a cool deep dive into CSS colors and color theory and finding the right way to mess with color values.

Comment by dominikh 5 hours ago

If 0.02 is the JND of deltaEOK, how come everybody is getting results an order of magnitude smaller? Even the author himself (at https://www.keithcirkel.co.uk/too-much-color/) says they get 0.0028, but never elaborate on the significance of that result.

Comment by Keithamus 2 hours ago

JND is an average. A lot of people will do a lot worse. The measure, as I understand it, is also under different test conditions, while this is a game where people are on their own and able to - for example - tilt their head trying to find the exact angle to see the difference.

Comment by rahimnathwani 9 hours ago

This is interesting but the result must depend on the screen and the brightness, no?

I tried it on a recent Pixel with brightness set to two-thirds, and this is my result:

https://www.keithcirkel.co.uk/whats-my-jnd/?r=ArggKP__c4_b

Comment by jaffathecake 15 hours ago

The associated deep-dive article is great https://www.keithcirkel.co.uk/too-much-color/

Comment by alexanderameye 14 hours ago

Fun game! I could never quite clear the 0.0030 threshold. I wonder how much screen quality/calibration impacts it.

Comment by jaffathecake 14 hours ago

A lot. My scores:

- 0.0028 on my MacBook pro screen

- 0.0045 on my Dell monitor

- 0.0033 on my Pixel 10 pro

And those scores are pretty consistent.

Comment by filmgirlcw 10 hours ago

Super fun game! My best is 0.0018 but am usually in the ~0.0030 range

Comment by nickdothutton 9 hours ago

Eizo EV3285 and MkI eyeball probably ruined by years of screen time: 0.0052 https://www.keithcirkel.co.uk/whats-my-jnd/?r=AgcgKP__PX8P

Comment by 9 hours ago

Comment by dreday 12 hours ago

This takes something as nerdy as decimal places in CSS colors and turns it into a fun, practical read. It feels like you’re being walked through the rabbit hole by a friend who’s done way too much homework, then hands you a few simple rules you can actually remember and use.

Comment by stonedge 2 hours ago

Is higher or lower "better"?

Comment by john_strinlai 2 hours ago

lower is better.

it is measuring the smallest color distance you can still detect. so a lower number means you can spot the difference between two more-alike colors.

Comment by Biganon 2 hours ago

0.0023, but now my eyes are tired

Comment by zakki 2 hours ago

is 0.0052 good or bad?

Comment by pestatije 11 hours ago

JND - Just Noticeable Difference - the smallest colour change that can actually be seen