你有沒有想過，自己的眼睛到底能分辨多細微的顏色差異？這次要介紹的，是一款由前端開發者 Keith Cirkel 製作的免費互動測驗工具，What's My JND，它能用一場簡單的視覺遊戲，幫你找出屬於你個人的「最小可感色差」臨界值。這個工具完全免費、免安裝，直接在瀏覽器就能玩，對設計師、前端工程師、或是單純好奇自己眼力的人來說，都是一個很有意思的體驗。
什麼是「JND」？先搞懂這個關鍵名詞
JND 是「Just Noticeable Difference」的縮寫，中文可以翻成「最小可感差異」。這次工具測量的是色彩感知版本的 JND，也就是你的眼睛在什麼時候會開始「看不出兩個顏色的差別」。實際上，這不是什麼玄學概念，而是有一套嚴謹的科學公式在背後支撐，業界使用的是由國際照明委員會（CIE）制定的 ΔE（Delta-E）色差公式。根據官網的介紹，工具採用的是針對 Oklab 色彩空間優化過的版本，稱為 ΔEok，數值越低代表兩個顏色在視覺上越接近。一般人的 JND 落點大約在 0.02，但你可能比這更厲害，也可能沒那麼厲害，測完就知道。
工具怎麼玩？操作超直覺
遊戲規則非常簡單：畫面上會出現兩個色塊，中間有一條分界線，你只需要點擊那條線就好。聽起來很容易，但這款工具的聰明之處在於，它會隨著每一回合不斷縮小兩個顏色之間的差距，直到你「看不出來了」為止。整個過程大約 40 回合，系統會自動計算出你的 ΔEok JND 數值。對不習慣任何技術背景的人來說，你只要記得一件事：分數越低，代表你的色彩辨識力越強。完成後還可以把成績分享出去，跟朋友比拼一下。
為什麼這個工具值得試試？背後有紮實的研究
這款工具並不是隨手做的小玩意，它其實來自 Keith Cirkel 的一篇深度技術文章《Too Much Color》。這次他在研究如何優化 CSS 顏色的 minifier 時，意外深入研究起「CSS 顏色寫到小數點第幾位才夠用」這個問題。實際上，文章最後的結論相當有力：對大多數色彩空間來說，3 位小數就足夠了，人眼根本感知不到第 4 位以後的差異。這個工具就是為了讓讀者直觀感受這件事而生的，數據有理論支撐，也有互動體驗配合，說服力十足。
誰最適合用這個工具？
對設計師來說，這個測驗能讓你更清楚自己的色彩感知能力極限在哪裡，避免在一些根本不會被注意到的細節上花太多時間調色。對前端工程師來說，了解 ΔEok 的概念，有助於在選用 oklch 或 oklab 這類現代 CSS 色彩空間時，更理性地決定要寫幾位小數。對一般使用者來說，這就是一個好玩的視覺挑戰，拿來跟朋友比誰眼力好，完全沒問題。這款工具甚至還有「Hard Mode」版本，如果你覺得普通模式太簡單，可以直接跳進去挑戰更極端的色差測試。
實際體驗後的感受：這數字出乎你意料
根據官網的介紹，一般人的 JND 平均落在 0.02 左右，但在實際遊戲條件下（螢幕亮度、環境光、眼睛距離等因素），有些人可以達到 0.003 甚至更低。工具本身也坦白說了，這是「遊戲環境」而非「實驗室條件」，所以你可以放心享受一些「搖頭晃腦找線條」的樂趣，不用太認真對待數字本身。實際上，這個測驗最大的收穫不是那個分數，而是過程中你會開始對「顏色差異」這件事產生一種全新的感知意識，原來有些顏色看起來一樣，其實根本不一樣。
延伸閱讀：搭配《Too Much Color》一起看更有收穫
如果你對工具背後的原理感興趣，非常推薦直接去讀 Keith 的原文《Too Much Color》。這篇文章不只說結論，還附上了多個互動式的色彩比較 widget，讓你可以自己拖拉色彩節點、觀察不同小數位數對色差的影響。對前端工程師來說，這篇文章幾乎是現代 CSS 色彩精度問題的最佳入門參考。整篇文章的最終結論清晰有力：3 位小數就夠了，人眼不會察覺，minifier 幫你處理就好。這次 Keith 不只是提出觀點，還一路附上數學、互動圖表、甚至邀請 Jake Archibald 和 Lea Verou 審稿，誠意相當足。
這次介紹的 What's My JND，是一款結合科學研究與互動體驗的有趣工具。不管你是設計師、工程師，還是單純好奇自己眼力的人，都可以花 5 分鐘玩一遍。測完你會知道自己的 ΔEok JND 是多少，也會對「人眼感知色彩的極限」有更真實的理解。如果你剛好在學習 CSS 現代色彩空間（oklch、oklab），那麼搭配《Too Much Color》一起看，效果會更好。連結都在上面，直接點進去試試看吧。
工具連結：