Just-Noticeable Differences

Connor Gramazio

d3-jnd is a D3 extension that supports just-noticeable difference calculations for color based on work done by Maureen Stone, Danielle Albers Szafir, and Vidya Setlur [1].

d3-jnd is open sourced here. If you want to look at or use the compiled extension without downloading the source code, check it out on unpkg.

The just-noticeable difference functions in this library can be used to determine whether two colors are too similar to be easily differentiated. This is often critical for visualization color design because information legibility directly affects usability.

The two functions in d3-jnd are:

The conservativeness of JND distance predictions can be manipulated by changing optional arguments that roughly correspond to what percentage of people can easily see a difference and how large the colored area is in terms of visual angle. The functions' defaults are respectively 50% and 0.1°.

Be sure to check that colors that meet the recommended L*, a*, and b* intervals still fall within displayable RGB color space when considering the intervals that jndLabInterval provides.

Table of contents
  1. Installation
  2. What is a JND?
    1. Size affects discriminability
    2. Individual differences: percent of people that see a difference
    3. Err on the side of caution: display and environmental differences
  3. Examples
  4. Further reading

Installation 📎

To access the latest version of d3-jnd, grab it on unpkg. Be sure to load d3-jnd after d3-color is loaded (be it through d3.v4.js, d3-color.js, or otherwise).

If installing and building from scratch, download the repo either through GitHub or through npm. Once you've downloaded it, just run npm install, which will install the required dependencies. Note that building requires node.js and npm.

D3 module dependencies: d3-color.

What is a JND? 📎

A just-noticeable difference (JND) is, "the amount [that a color] must be changed in order for a difference to be noticeable" [2]. Or, phrased another way, how different do two colors need to be in order for humans to recognize them as different? Given that this differentiability is directly dependent on human color vision, d3-jnd performs JND calculations using CIELAB, which is a perceptually modeled color space.

Aside: CIELAB and perceptual color space

CIELAB defines color in terms of its perceptual lightness (L*), redness-to-greenness (a*), and blueness-to-yellowness (b*). d3-jnd does color conversion for you, so it's not critical to become an expert if you're just using the noticeablyDifferent function. If you're interested in learning more, check out Wikipedia's entry on CIELAB [3] or the d3-cam02 library to learn more about CIECAM02, which is an updated and more accurate perceptual color space. In this library we use CIELAB because it is what Stone, Szafir, and Setlur used in their experiments to derive regression-based JND formulas.

Size affects discriminability 📎

Unfortunately, determining whether two colors are discriminable is an involved process in part because it is harder to discriminate colors that are smaller in area. You can see this for yourself in the example below.

Because size in this context is a physical property that can greatly vary with viewing conditions (e.g., dpi or viewing distance with phones compared to laptops), d3-jnd uses visual angle as a measurement of size rather than pixels. At arms length, the width of a thumb's knuckle is approximately 2° and an index fingernail is approximately 1°. d3-jnd uses a default colored area size assumption of 0.1°, which was selected as a conservatively small size without resulting in overly restrictive color selection; however, the default assumed size can be overridden to create more generous or strict JND distances.

Aside: size

The physical size of visualizations can affect usability in a number of ways that include, but are not limited to, color legibility. If you're interested in learning more, we suggest Connor C. Gramazio, Karen B. Schloss, David H. Laidlaw's paper on size's affect on visualization search [4] and Maureen Stone's IEEE Viewpoint article [5].

Individual differences: percent of people that see a difference 📎

Due to differences between people's perceptual acuity, the JND intervals that d3-jnd provides are predictions, not absolute truth. To accomodate this ambiguity, the d3-jnd functions' percentage argument can be used to incorporate what percentage of your audience should quickly and easily notice a difference in color. The default value used by d3-jnd is 50%, given that using 50% to refer to JNDs is standard practice in perception research; however, whether that threshold is sufficient for a visualization is contextually dependent. We encourage d3-jnd users to carefully consider whether they need to use a more conservative number (e.g., require JND intervals where an estimated 95% of users could reliably differentiate colors).

Aside: atypical color vision

Another important individual difference to consider is people's different perceptions of color (e.g., red-green or blue-yellow color vision deficiencies). Given that a large portion of the population perceive color differently, consider whether the recommended L*, a*, or *b intervals you choose to use are sufficient. For example, a* modulates the redness-to-greeness of color and differences along only this channel might not be visible to all.

Err on the side of caution: display and environmental differences 📎

Although two colors might appear discriminable on your own monitor, consider whether that discriminability would be visible on your audience's displays. Developers and designers often use bright monitors that support wide color gamuts (e.g., any Apple device), which is not representative of displays used by the general population. Further, color can be aversely affected by environment (e.g., indoor vs. outdoor lighting). It is important to treat d3-jnd as only a prediction or recommendation of what may be noticeably different rather than an absolute truth.

Examples 📎

Interactive demo of how changing percent and size JND arguments can alter L*, a*, and b* intervals.

Further reading 📎

Citations

  1. Stone, Szafir, Setlur. "An Engineering Model for Color Difference as a Function of Size," 22nd IS&T Color and Imaging Conference (Boston, November 3-7, 2014). 2014.
  2. Wikipedia's entry on just-noticeable differences
  3. Wikipedia's entry on CIELAB color space
  4. Connor C. Gramazio, Karen B. Schloss, David H. Laidlaw. "The relation between visualization size, grouping, and user performance," IEEE TVCG (Proceedings of Information Visualization). 2014.
  5. Maureen Stone. "In Color Perception, Size Matters," IEEE CG&A Viewpoints. 2012.

Other useful links

  1. Colorgorical, a color palette tool by Connor Gramazio et al., that uses Stone, Szafir, and Setlur's JND function as one way to accomodate color discriminability

Provided free-to-use and open-sourced. See Github for specific licensing information.