Bug 1478156 - Make color picker tooltip screen reader accessible, r=yzen,gl

Differential Revision: https://phabricator.services.mozilla.com/D35980

--HG--
extra : moz-landing-system : lando

devtools/client/locales/en-US/inspector.properties

@@ -517,3 +517,24 @@ rulePreviewTooltip.noAssociatedRule=No associated rule
 # against, used together with the actual background color. %S in the content will be replaced by a
 # span (containing bg color swatch) and textNode (containing bg color hex string) at run time
 colorPickerTooltip.contrastAgainstBgTitle=Calculated against background: %S
+
+# LOCALIZATION NOTE (colorPickerTooltip.spectrumDraggerTitle): A title text for the
+# spectrum dragger panel in the color picker tooltip.
+colorPickerTooltip.spectrumDraggerTitle=Spectrum
+
+# LOCALIZATION NOTE (colorPickerTooltip.eyedropperTitle): A title text for the
+# eyedropper in the color picker tooltip.
+colorPickerTooltip.eyedropperTitle=Pick color on page
+
+# LOCALIZATION NOTE (colorPickerTooltip.colorNameTitle): A title text for the
+# closest color name shown in the color picker tooltip, used together with the actual color.
+# %S in the content will be replaced by the color name the current color is closest to.
+colorPickerTooltip.colorNameTitle=Closest to: %S
+
+# LOCALIZATION NOTE (colorPickerTooltip.hueSliderTitle): A title text for the
+# hue slider in the color picker tooltip.
+colorPickerTooltip.hueSliderTitle=Hue
+
+# LOCALIZATION NOTE (colorPickerTooltip.alphaSliderTitle): A title text for the
+# alpha slider in the color picker tooltip.
+colorPickerTooltip.alphaSliderTitle=Opacity

devtools/client/shared/test/browser_spectrum.js

@@ -25,7 +25,7 @@ const REGULAR_TEXT_PROPS = {
   "font-size": { value: "11px" },
   "font-weight": { value: "bold" },
 };
-const ZERO_ALPHA_COLOR = [240, 32, 124, 0];
+const ZERO_ALPHA_COLOR = [0, 255, 255, 0];
 
 add_task(async function() {
   const [host, , doc] = await createHost("bottom", TEST_URI);
@@ -243,6 +243,32 @@ function setSpectrumProps(spectrum, props, updateUI = true) {
   }
 }
 
+function testAriaAttributesOnSpectrumElements(
+  spectrum,
+  colorName,
+  rgbString,
+  alpha
+) {
+  for (const slider of [spectrum.dragger, spectrum.hueSlider]) {
+    is(
+      slider.getAttribute("aria-describedby"),
+      "spectrum-dragger",
+      "Slider contains the correct describedby text."
+    );
+    is(
+      slider.getAttribute("aria-valuetext"),
+      rgbString,
+      "Slider contains the correct valuetext text."
+    );
+  }
+
+  is(
+    spectrum.colorPreview.title,
+    colorName,
+    "Spectrum element contains the correct title text."
+  );
+}
+
 function testSettingColorShoudUpdateTheUI(container) {
   const s = new Spectrum(container, cssColors.white);
   s.show();
@@ -265,6 +291,12 @@ function testSettingColorShoudUpdateTheUI(container) {
     "Drag helper has moved"
   );
   ok(s.hueSlider.value !== hueSliderOriginalVal, "Hue helper has moved");
+  testAriaAttributesOnSpectrumElements(
+    s,
+    "Closest to: aqua",
+    "rgba(50, 240, 234, 0.2)",
+    0.2
+  );
 
   hueSliderOriginalVal = s.hueSlider.value;
 
@@ -274,6 +306,7 @@ function testSettingColorShoudUpdateTheUI(container) {
     hueSliderOriginalVal !== s.hueSlider.value,
     "Hue slider should have move again"
   );
+  testAriaAttributesOnSpectrumElements(s, "aqua", "rgba(0, 255, 255, 0)", 0);
 
   s.destroy();
 }

devtools/client/shared/widgets/Spectrum.js

@@ -16,9 +16,16 @@ const [ArrowUp, ArrowRight, ArrowDown, ArrowLeft] = ARROW_KEYS;
 const XHTML_NS = "http://www.w3.org/1999/xhtml";
 const COLOR_HEX_WHITE = "#ffffff";
 const SLIDER = {
-  MIN: "0",
-  MAX: "128",
-  STEP: "1",
+  hue: {
+    MIN: "0",
+    MAX: "128",
+    STEP: "1",
+  },
+  alpha: {
+    MIN: "0",
+    MAX: "1",
+    STEP: "0.01",
+  },
 };
 
 loader.lazyRequireGetter(this, "colorUtils", "devtools/shared/css/color", true);
@@ -28,6 +35,12 @@ loader.lazyRequireGetter(
   "devtools/shared/css/color-db",
   true
 );
+loader.lazyRequireGetter(
+  this,
+  "labColors",
+  "devtools/shared/css/color-db",
+  true
+);
 loader.lazyRequireGetter(
   this,
   "getContrastRatioScore",
@@ -75,10 +88,16 @@ function Spectrum(parentEl, rgb) {
   // eslint-disable-next-line no-unsanitized/property
   this.element.innerHTML = `
     <section class="spectrum-color-picker">
-      <div class="spectrum-color spectrum-box" tabindex="0">
+      <div
+        class="spectrum-color spectrum-box"
+        tabindex="0"
+        role="slider"
+        title="${L10N.getStr("colorPickerTooltip.spectrumDraggerTitle")}"
+        aria-describedby="spectrum-dragger"
+      >
         <div class="spectrum-sat">
           <div class="spectrum-val">
-            <div class="spectrum-dragger"></div>
+            <div class="spectrum-dragger" id="spectrum-dragger"></div>
           </div>
         </div>
       </div>
@@ -90,17 +109,13 @@ function Spectrum(parentEl, rgb) {
         <div class="spectrum-alpha spectrum-checker spectrum-box"></div>
       </div>
     </section>
-    <section
-      class="spectrum-color-contrast accessibility-color-contrast"
-      role="presentation"
-    >
-      <span class="contrast-ratio-label">
+    <section class="spectrum-color-contrast accessibility-color-contrast">
+      <span class="contrast-ratio-label" role="presentation">
         ${L10N.getStr("accessibility.contrast.ratio.label")}
       </span>
-      <span class="accessibility-contrast-value" role="presentation"></span>
+      <span class="accessibility-contrast-value"></span>
       <span
         class="accessibility-color-contrast-large-text"
-        role="presentation"
         title="${L10N.getStr("accessibility.contrast.large.title")}"
       >
         ${L10N.getStr("accessibility.contrast.large.text")}
@@ -131,10 +146,15 @@ function Spectrum(parentEl, rgb) {
   eyedropper.id = "eyedropper-button";
   eyedropper.className = "devtools-button";
   eyedropper.style.pointerEvents = "auto";
+  eyedropper.setAttribute(
+    "aria-label",
+    L10N.getStr("colorPickerTooltip.eyedropperTitle")
+  );
   this.controls.insertBefore(eyedropper, this.colorPreview);
 
   // Hue slider and alpha slider
   this.hueSlider = this.createSlider("hue", this.onHueSliderMove.bind(this));
+  this.hueSlider.setAttribute("aria-describedby", this.dragHelper.id);
   this.alphaSlider = this.createSlider(
     "alpha",
     this.onAlphaSliderMove.bind(this)
@@ -401,6 +421,28 @@ Spectrum.prototype = {
     ];
   },
 
+  /**
+   * Map current rgb to the closest color available in the database by
+   * calculating the delta-E between each available color and the current rgb
+   *
+   * @return {String}
+   *         Color name or closest color name
+   */
+  get colorName() {
+    const labColorEntries = Object.entries(labColors);
+
+    const deltaEs = labColorEntries.map(color =>
+      colorUtils.calculateDeltaE(color[1], colorUtils.rgbToLab(this.rgb))
+    );
+
+    // Get the color name for the one that has the lowest delta-E
+    const minDeltaE = Math.min(...deltaEs);
+    const colorName = labColorEntries[deltaEs.indexOf(minDeltaE)][0];
+    return minDeltaE === 0
+      ? colorName
+      : L10N.getFormatStr("colorPickerTooltip.colorNameTitle", colorName);
+  },
+
   get rgbNoSatVal() {
     const rgb = Spectrum.hsvToRgb(this.hsv[0], 1, 1);
     return [Math.round(rgb[0]), Math.round(rgb[1]), Math.round(rgb[2]), rgb[3]];
@@ -465,16 +507,18 @@ Spectrum.prototype = {
     const slider = this.document.createElementNS(XHTML_NS, "input");
     slider.className = `spectrum-${sliderType}-input`;
     slider.type = "range";
-    slider.min = SLIDER.MIN;
-    slider.max = SLIDER.MAX;
-    slider.step = SLIDER.STEP;
+    slider.min = SLIDER[sliderType].MIN;
+    slider.max = SLIDER[sliderType].MAX;
+    slider.step = SLIDER[sliderType].STEP;
+    slider.title = L10N.getStr(`colorPickerTooltip.${sliderType}SliderTitle`);
     slider.addEventListener("input", onSliderMove);
 
     container.appendChild(slider);
     return slider;
   },
 
-  updateAlphaSliderBackground: function() {
+  updateAlphaSlider: function() {
+    // Set alpha slider background
     const rgb = this.rgb;
 
     const rgbNoAlpha = "rgb(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + ")";
@@ -493,9 +537,13 @@ Spectrum.prototype = {
     // tuple is great.
     const colorLuminance = colorUtils.calculateLuminance(this.rgb);
     this.colorPreview.classList.toggle("high-luminance", colorLuminance > 0.85);
+
+    // Set title on color preview for better UX
+    this.colorPreview.title = this.colorName;
   },
 
-  updateDraggerBackgroundColor: function() {
+  updateDragger: function() {
+    // Set dragger background color
     const flatColor =
       "rgb(" +
       this.rgbNoSatVal[0] +
@@ -505,6 +553,14 @@ Spectrum.prototype = {
       this.rgbNoSatVal[2] +
       ")";
     this.dragger.style.backgroundColor = flatColor;
+
+    // Set dragger aria attributes
+    this.dragger.setAttribute("aria-valuetext", this.rgbCssString);
+  },
+
+  updateHueSlider: function() {
+    // Set hue slider aria attributes
+    this.hueSlider.setAttribute("aria-valuetext", this.rgbCssString);
   },
 
   updateHelperLocations: function() {
@@ -592,8 +648,9 @@ Spectrum.prototype = {
     this.updateHelperLocations();
 
     this.updateColorPreview();
-    this.updateDraggerBackgroundColor();
-    this.updateAlphaSliderBackground();
+    this.updateDragger();
+    this.updateHueSlider();
+    this.updateAlphaSlider();
     this.updateContrast();
   },
 

devtools/shared/css/color-db.js

@@ -159,4 +159,171 @@ const cssColors = {
   yellowgreen: [154, 205, 50, 1],
 };
 
+// Lab values generated using formula from http://www.easyrgb.com/en/math.php.
+// X_10, Y_10, Z_10 (CIE 1964) reference values for D65 illuminant
+// (Daylight, sRGB, Adobe-RGB) were used.
+const labColors = {
+  aliceblue: [97.17890760827636, -0.9397756746095665, -5.246475627032843],
+  antiquewhite: [93.73077088204487, 2.236373679139203, 10.649604819299775],
+  aqua: [91.11652110946342, -47.73670577664391, -15.108617112376965],
+  aquamarine: [92.03615371984776, -45.172410289053445, 8.849868350925295],
+  azure: [98.93278063011066, -4.468521315692032, -2.6738855376031267],
+  beige: [95.9488798865349, -3.7925176714859177, 11.156542330042662],
+  bisque: [92.0124490871158, 4.82408891282099, 18.18700912515505],
+  black: [0, 0, 0],
+  blanchedalmond: [93.91948969581235, 2.528359387620638, 16.175210959201024],
+  blue: [32.302586667249486, 79.43492388715862, -108.79669359538693],
+  blueviolet: [42.18810476642369, 70.12395877232036, -75.62885995423268],
+  brown: [37.521829744034335, 49.932241625757406, 30.23890786161597],
+  burlywood: [77.01689872654846, 7.390609044482909, 29.376190715516536],
+  cadetblue: [61.15461539950293, -19.415767005661277, -8.112231649104906],
+  chartreuse: [89.87420853068858, -67.74722658691745, 85.31006761317337],
+  chocolate: [55.98605299432204, 37.34619405020917, 56.41475927486582],
+  coral: [67.29048083264607, 45.696749904176436, 47.02073461855407],
+  cornflowerblue: [61.92818670495679, 9.628987440020332, -50.20264083555141],
+  cornsilk: [97.45526614880224, -1.8103271448461355, 13.39924085969022],
+  crimson: [47.02980511087301, 71.21981659922766, 33.22842672949625],
+  cyan: [91.11652110946342, -47.73670577664391, -15.108617112376965],
+  darkblue: [14.757156815274186, 50.58098497783475, -69.27738650827831],
+  darkcyan: [52.207519815998296, -30.3968264791159, -9.620563573304297],
+  darkgoldenrod: [59.2185428516686, 10.142719410772493, 62.4074048759456],
+  darkgray: [69.23779560557699, 0.30845909288851336, -0.725035226776094],
+  darkgreen: [36.20351872497333, -43.22004822584333, 41.62418791981264],
+  darkgrey: [69.23779560557699, 0.30845909288851336, -0.725035226776094],
+  darkkhaki: [73.38127833356914, -8.475096082350364, 38.72716132653318],
+  darkmagenta: [32.59748369188066, 62.78988696261057, -39.34048012552456],
+  darkolivegreen: [42.2340254244788, -18.63594475603103, 30.256085481863913],
+  darkorange: [69.48104411888188, 37.16688167941806, 75.14386507030734],
+  darkorchid: [43.37926695780136, 65.43267508264566, -60.90252187934995],
+  darkred: [28.084732284208997, 51.2102293904998, 41.189776600752445],
+  darksalmon: [69.85346453844176, 28.509213259811705, 27.1173578088314],
+  darkseagreen: [72.08740631745533, -23.522932623842696, 17.379064372791554],
+  darkslateblue: [30.829287209616794, 26.247343305352388, -42.688380574102695],
+  darkslategray: [31.25607829935253, -11.558209436609623, -4.143133638795559],
+  darkslategrey: [31.25607829935253, -11.558209436609623, -4.143133638795559],
+  darkturquoise: [75.29307531314078, -39.74330458218445, -14.353628151972542],
+  darkviolet: [39.57886745488795, 76.59826422688023, -71.18960396554851],
+  deeppink: [55.95428053659428, 84.8834888580915, -6.348160442712891],
+  deepskyblue: [72.54923231908798, -17.34624248545108, -43.501223759829614],
+  dimgray: [44.41356014781601, 0.21862498706087807, -0.513879541005613],
+  dimgrey: [44.41356014781601, 0.21862498706087807, -0.513879541005613],
+  dodgerblue: [59.381725677880596, 10.24722110279519, -64.33873493803226],
+  firebrick: [39.11257274771978, 56.17110340915579, 37.36856201227712],
+  floralwhite: [98.40143252802201, 0.37693631302881947, 4.4296183363891295],
+  forestgreen: [50.59443111773345, -49.389501730047996, 44.675247183324544],
+  fuchsia: [60.319933664076004, 98.60839787805526, -61.78226947982015],
+  gainsboro: [87.76088811005116, 0.3754905813360132, -0.8825932030137817],
+  ghostwhite: [97.7572735023453, 1.6602117625886814, -4.329673676949475],
+  gold: [86.9285847161576, -1.5580031594539245, 86.69625851871493],
+  goldenrod: [70.81571317667877, 8.842268163696321, 68.36969220318736],
+  gray: [53.585013452169036, 0.2518147023348183, -0.5918921958278478],
+  grey: [53.585013452169036, 0.2518147023348183, -0.5918921958278478],
+  green: [46.22881784262658, -51.520138371609654, 49.61780491379323],
+  greenyellow: [91.95763180408608, -52.141510237787294, 81.35705222692138],
+  honeydew: [98.56580137512647, -7.15743440652189, 4.528336799358468],
+  hotpink: [65.48186958181394, 64.59515848582348, -11.397593830097975],
+  indianred: [53.3911485087161, 45.12118404819798, 21.633935524110235],
+  indigo: [20.46961954096429, 51.86802044661362, -53.88700686969674],
+  ivory: [99.63977381109996, -2.1358046127358254, 6.214520241062194],
+  khaki: [90.32729582034386, -8.636557330944761, 44.29884008040395],
+  lavender: [91.82769059829121, 4.102249854337825, -10.62634890559453],
+  lavenderblush: [96.06837944039779, 6.29813340018881, -1.5503003307978824],
+  lawngreen: [88.87798766318886, -67.54051106102659, 84.48686421833247],
+  lemonchiffon: [97.6476983766357, -5.022220605824412, 21.377483194761602],
+  lightblue: [83.81410256512628, -10.538570949192195, -12.381398199756767],
+  lightcoral: [66.15316216626996, 43.146382854120255, 18.95210780303691],
+  lightcyan: [97.86814756512815, -9.540634546450377, -4.3595592568243635],
+  lightgoldenrodyellow: [
+    97.36879732328356,
+    -6.078213524913445,
+    18.368452638973686,
+  ],
+  lightgray: [84.5561167363605, 0.36389313370355225, -0.8553333223096704],
+  lightgreen: [86.54957590580997, -45.99957827642365, 36.262226875570526],
+  lightgrey: [84.5561167363605, 0.36389313370355225, -0.8553333223096704],
+  lightpink: [81.05253594361857, 28.338879720153866, 4.233248736979411],
+  lightsalmon: [74.70287844017, 31.832905786707443, 33.947175894873574],
+  lightseagreen: [65.78768757989991, -37.24749389368925, -7.0553625579029555],
+  lightskyblue: [79.72503275959482, -10.490259345458607, -29.455091101479304],
+  lightslategray: [
+    55.917349372007195,
+    -1.9881568917105574,
+    -11.774175139854615,
+  ],
+  lightslategrey: [
+    55.917349372007195,
+    -1.9881568917105574,
+    -11.774175139854615,
+  ],
+  lightsteelblue: [78.45233742822654, -0.9392458669100212, -16.08913657631925],
+  lightyellow: [99.28483637693047, -4.695918870143368, 13.930783736002962],
+  lime: [87.73703347354422, -85.88539046866318, 82.71415186197115],
+  limegreen: [72.60854102811317, -66.86592102874306, 60.99160141799125],
+  linen: [95.31120096478845, 2.0811899572744097, 5.104906068897774],
+  magenta: [60.319933664076004, 98.60839787805526, -61.78226947982015],
+  maroon: [25.530784572416174, 48.24348236957932, 37.97194526317749],
+  mediumaquamarine: [75.6931293906138, -38.036553589818666, 7.571354765719218],
+  mediumblue: [24.97615723043893, 67.38641044652589, -92.29465191227868],
+  mediumorchid: [53.64213313573549, 59.370412003217574, -48.23242669563843],
+  mediumpurple: [54.97523587308039, 37.09186250486124, -50.94130373794006],
+  mediumseagreen: [65.27341001550978, -47.96643007935963, 23.721501577817094],
+  mediumslateblue: [52.15750471109439, 41.35727328020744, -66.29828530971085],
+  mediumspringgreen: [87.3411479783456, -70.37364235921007, 31.74790377903216],
+  mediumturquoise: [76.8834686242291, -37.053452849746925, -9.183510559800713],
+  mediumvioletred: [44.76162545138306, 71.28274660137451, -15.767834030225348],
+  midnightblue: [15.859552026439893, 31.860128204191234, -50.08845915164022],
+  mintcream: [99.15659662605985, -3.7499332041522893, 0.27328356915989893],
+  mistyrose: [92.65558901260384, 9.147609792762356, 3.9347415624175097],
+  moccasin: [91.72208952705464, 2.8291906794328248, 25.573953055107125],
+  navajowhite: [90.10007935356519, 4.895862633988224, 27.509525419099212],
+  navy: [12.975311577716514, 47.65069178672376, -65.26396023609063],
+  oldlace: [96.77967120416257, 0.5784959274544033, 7.247216630469544],
+  olive: [51.86833136334822, -12.698958090622824, 56.38276716821539],
+  olivedrab: [54.650773976467136, -27.99433891007591, 49.33893945670905],
+  orange: [74.93219484533535, 24.28083176103374, 78.57643571179258],
+  orangered: [57.57499421872107, 68.11461778155586, 68.68889341848478],
+  orchid: [62.8009876658991, 55.621167174625064, -35.24868649820956],
+  palegoldenrod: [91.14038954621267, -6.970467434592564, 30.213907174487264],
+  palegreen: [90.75103714758299, -47.95503269332063, 37.81303534889619],
+  paleturquoise: [90.06142407788806, -19.270453187271997, -7.332269935129032],
+  palevioletred: [60.564787867661266, 45.838854731426515, -0.25065577032372666],
+  papayawhip: [95.07544110280504, 1.6725420650229306, 13.652324626448543],
+  peachpuff: [89.34875285782702, 8.471965039192453, 20.229897875280955],
+  peru: [61.751663684265665, 21.6941378210313, 47.496113355477334],
+  pink: [83.58479885775868, 24.525540181552508, 2.4934778968259685],
+  plum: [73.37274280928348, 32.885443900333215, -22.856650741159747],
+  powderblue: [86.13359115282357, -13.734412712450183, -8.914802708654769],
+  purple: [29.782100092098077, 59.15229907621816, -37.06137976602428],
+  rebeccapurple: [32.90243720302775, 43.10251060523782, -47.79866704780537],
+  red: [53.23288178584245, 80.42312097443104, 66.96552840294578],
+  osybrown: [63.6060381979233, 17.31557480446677, 5.964013673186241],
+  royalblue: [47.83284750656463, 26.523923842683427, -66.12638984604963],
+  saddlebrown: [37.46692024400534, 26.659518429642898, 40.73548402580912],
+  salmon: [67.25995258561211, 45.569072753010865, 28.527978009408052],
+  sandybrown: [73.95154071958171, 23.37100127546693, 46.25858205082345],
+  seagreen: [51.53535112854968, -39.50584886698982, 19.578964107165852],
+  seashell: [97.12111642889012, 2.5730542225586572, 3.614216901880374],
+  sienna: [43.796139581025685, 29.564844221078523, 35.307185975723435],
+  silver: [77.7043635899527, 0.339097964550894, -0.7970521060836511],
+  skyblue: [79.20897459092869, -14.504258485788124, -22.18979862749155],
+  slateblue: [45.33730589003685, 36.29854743329886, -58.578448229379696],
+  slategray: [52.83625796271889, -1.894387969799849, -11.208348578862527],
+  slategrey: [52.83625796271889, -1.894387969799849, -11.208348578862527],
+  snow: [98.64376394836441, 2.073027231003055, -0.3849225040892579],
+  springgreen: [88.47265520282772, -76.59140183507563, 46.37560569696295],
+  steelblue: [52.46747241512048, -3.828873386915843, -32.93153861676517],
+  tan: [74.97454643298407, 5.353040309039603, 23.775061853275446],
+  teal: [48.25607381337552, -28.635856151982775, -9.063218319038114],
+  thistle: [80.07734471203901, 13.57781031097305, -10.092571203748268],
+  tomato: [62.20136881808274, 58.18874059980511, 45.985101486056514],
+  turquoise: [81.26705459794431, -43.765218870671475, -4.872758326234994],
+  violet: [69.69362286537107, 56.72140058020769, -37.7245806568902],
+  wheat: [89.35068099788126, 1.8921211283112749, 23.23051272657026],
+  white: [100, 0.41978155958710683, -0.9866994530830286],
+  whitesmoke: [96.53748961423615, 0.40725140432995577, -0.9572472366698781],
+  yellow: [97.13824698129729, -21.169488449187533, 93.99151723968109],
+  yellowgreen: [76.5351984302265, -37.69097531845872, 66.13250570541341],
+};
+
 exports.cssColors = cssColors;
+exports.labColors = labColors;

devtools/shared/css/color.js

@@ -79,12 +79,14 @@ function CssColor(colorValue, supportsCssColor4ColorFunction = false) {
 module.exports.colorUtils = {
   CssColor: CssColor,
   rgbToHsl: rgbToHsl,
+  rgbToLab: rgbToLab,
   setAlpha: setAlpha,
   classifyColor: classifyColor,
   rgbToColorName: rgbToColorName,
   colorToRGBA: colorToRGBA,
   isValidCSSColor: isValidCSSColor,
   calculateContrastRatio: calculateContrastRatio,
+  calculateDeltaE: calculateDeltaE,
   calculateLuminance: calculateLuminance,
   blendColors: blendColors,
 };
@@ -559,6 +561,66 @@ function rgbToHsl([r, g, b]) {
   return [roundTo(h, 1), roundTo(s * 100, 1), roundTo(l * 100, 1)];
 }
 
+/**
+ * Convert rgb value to CIE LAB colorspace (https://en.wikipedia.org/wiki/CIELAB_color_space).
+ * Formula from http://www.easyrgb.com/en/math.php.
+ *
+ * @param {array} rgb
+ *        Array of rgb values
+ * @return {array}
+ *         Array of lab values.
+ */
+function rgbToLab([r, g, b]) {
+  // Convert rgb values to xyz coordinates.
+  r = r / 255;
+  g = g / 255;
+  b = b / 255;
+
+  r = r > 0.04045 ? Math.pow((r + 0.055) / 1.055, 2.4) : r / 12.92;
+  g = g > 0.04045 ? Math.pow((g + 0.055) / 1.055, 2.4) : g / 12.92;
+  b = b > 0.04045 ? Math.pow((b + 0.055) / 1.055, 2.4) : b / 12.92;
+
+  r = r * 100;
+  g = g * 100;
+  b = b * 100;
+
+  let [x, y, z] = [
+    r * 0.4124 + g * 0.3576 + b * 0.1805,
+    r * 0.2126 + g * 0.7152 + b * 0.0722,
+    r * 0.0193 + g * 0.1192 + b * 0.9505,
+  ];
+
+  // Convert xyz coordinates to lab values.
+  // Divisors used are X_10, Y_10, Z_10 (CIE 1964) reference values for D65
+  // illuminant (Daylight, sRGB, Adobe-RGB) taken from http://www.easyrgb.com/en/math.php
+  x = x / 94.811;
+  y = y / 100;
+  z = z / 107.304;
+
+  x = x > 0.008856 ? Math.pow(x, 1 / 3) : 7.787 * x + 16 / 116;
+  y = y > 0.008856 ? Math.pow(y, 1 / 3) : 7.787 * y + 16 / 116;
+  z = z > 0.008856 ? Math.pow(z, 1 / 3) : 7.787 * z + 16 / 116;
+
+  return [116 * y - 16, 500 * (x - y), 200 * (y - z)];
+}
+
+/**
+ * Calculates the CIE Delta-E value for two lab values (http://www.colorwiki.com/wiki/Delta_E%3a_The_Color_Difference#Delta-E_1976).
+ * Formula from http://www.easyrgb.com/en/math.php.
+ *
+ * @param {array} lab1
+ *        Array of lab values for the first color
+ * @param {array} lab2
+ *        Array of lab values for the second color
+ * @return {Number}
+ *         DeltaE value between the two colors
+ */
+function calculateDeltaE([l1, a1, b1], [l2, a2, b2]) {
+  return Math.sqrt(
+    Math.pow(l1 - l2, 2) + Math.pow(a1 - a2, 2) + Math.pow(b1 - b2, 2)
+  );
+}
+
 function roundTo(number, digits) {
   const multiplier = Math.pow(10, digits);
   return Math.round(number * multiplier) / multiplier;