How to use the Color Perception Test
- Choose a track. All three mixes hue, value and saturation grids — 12 of each, 36 in total. Pick Hue, Value or Saturation alone for a 20-grid run that gives a steadier estimate for that one dimension.
- Decide on the clock. The test has no time limit by default, which measures what you can see. Tick Timed mode for 5 seconds per grid, which measures what you can see quickly — a different and harder skill.
- Find the odd tile. Click or tap it, or move with the arrow keys and press Enter. The grid grows from 2×2 to 7×7 as you go. If you genuinely can’t see a difference, press Can’t tell — guessing only blurs the estimate.
- Read your results. Each track shows the smallest difference you could reliably spot, a short verdict and a staircase chart of every grid: green dots for hits, red for misses, the dashed line at your estimate.
- Compare and share. Your best results stay in this browser. Share result builds a link that shows your numbers as a challenge to whoever opens it.
What the ΔE number means
RGB numbers are a poor ruler for perception. One step from #F0F0F0 to #F1F1F1 near white is a smaller visual change than one step in the middle of the gray scale, and a step in blue is not the same as a step in green. So the test measures differences in CIELAB, a color space designed so that equal distances look roughly equally different, using the CIEDE2000 formula (published by the CIE in 2001) that corrects the original Lab distance for hue, chroma and lightness quirks.
The result is a single number, ΔE. A value of 0 means identical, and around 1 is a common working definition of a just-noticeable difference for two colors side by side. Here is what real pairs measure:
| Pair | What changes | ΔE 2000 |
|---|---|---|
#F0F0F0 → #F1F1F1 |
One 8-bit step near white | 0.21 |
#808080 → #818181 |
One 8-bit step of mid gray | 0.38 |
#808080 → #838383 |
Three steps of gray | 1.13 |
#C04040 → #B84848 |
Saturation only, same lightness | 2.35 |
#C04040 → #C04A40 |
Hue nudged toward orange | 2.94 |
#808080 → #8A8A8A |
Ten steps of gray | 3.66 |
#808080 → #959595 |
Twenty-one steps of gray | 7.39 |
Notice the red pair that only loses saturation: its WCAG contrast ratio is 1.002:1 — effectively zero — yet the difference is easy to see side by side. Contrast ratios only track luminance; your eye tracks all three dimensions, which is why the test splits them into separate tracks.
How the test finds your threshold
Each track runs its own adaptive staircase, a method borrowed from vision research. The first grid shows a difference of about ΔE 12. Every hit shrinks the next difference — by 40% until your first miss, then by 20% — and every miss enlarges it by 60%. Because a miss pushes the difference up further than a hit pulls it down, the staircase settles where you are right about two times out of three.
After the first few grids the staircase stops falling and hovers around your limit, stepping a little below it and a little above. The estimate is the geometric mean of the differences on your last six grids in that track — an average taken on a logarithmic scale, where going from 1 to 2 counts as much as going from 2 to 4. If you never miss, the staircase never turns around, so the result is reported as “≤” the smallest difference you were shown.
Chance can’t carry you far: with one odd tile in a 2×2 grid a blind guess is right 25% of the time, but in a 7×7 grid it’s about 2%. The grids grow as the differences shrink, so lucky guesses fade out exactly when they would distort the estimate most.
Why your score changes from screen to screen
The tiles are exact sRGB values, but your display decides what reaches your eyes. Night or eye-comfort modes warm the whole screen and squeeze blues. Low brightness compresses dark values. Cheap and older panels can shift color with viewing angle, so tiles near the edge of a big grid may look different from those in the middle. Glare from a window lifts the darks. An uncalibrated laptop can easily be off by more than the differences you are trying to judge, so compare scores on the same screen, in the same light.
Tips from practice
Run the value track first if you only do one. Value carries form and readability in a painting far more than hue does. If your value threshold is high, a habit of squinting at your reference and checking work in grayscale pays off faster than any palette upgrade.
Look at the whole grid, not tile by tile. Peripheral vision is good at spotting the one patch that breaks a pattern. Relax your gaze over the center and let the odd tile pop out before you go hunting.
Test at the same time of day. Eye fatigue after a long session at the screen raises thresholds. If you’re tracking progress, compare morning scores with morning scores.
Use the result when matching colors. A low saturation threshold means you’ll notice a slightly dull mix that others won’t. If you’re matching a client’s brand color, check with numbers too — the Color Name Finder and Contrast Checker report exact values instead of impressions.
Treat a sudden change as a cue to check your screen. If your hue score jumps from 1.5 to 5 overnight, look for a night mode, a new color profile or a brightness change before you blame your eyes.