contrastingColor.js

/**
{
    "api": 1,
    "name": "Contrasting Color",
    "description": "Determine whether black or white contrasts better with the given color(s) (one per line).",
    "author": "Sunny Walker",
    "icon": "color-wheel",
    "tags": "contrast,color,wcag"
}
**/

function main(input) {
  let lines = input.fullText.split("\n");
  let o = lines.map(c => betterColor(c));
  input.fullText = o.join("\n");
}

// convert #rrggbb into its integer r, g, b components
const hex2Rgb = hex => {
  const rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return rgb ? {
    r: parseInt(rgb[1], 16),
    g: parseInt(rgb[2], 16),
    b: parseInt(rgb[3], 16)
  } : null;
};

// calculate the luminance of a color
const luminance = hex => {
  var rgb = hex2Rgb(hex);
  var a = [rgb.r, rgb.g, rgb.b].map(v => {
    v /= 255;
    return (v <= 0.03928) ? v / 12.92 : Math.pow(((v + 0.055) / 1.055), 2.4);
  });
  return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
};

// calculate the contrast ratio between two colors
const contrast = (c1, c2) => {
  const l1 = luminance(c1) + .05;
  const l2 = luminance(c2) + .05;
  let ratio = l1 / l2;
  if (l2 > l1) {
    ratio = 1 / ratio;
  }
  return Math.floor(ratio * 100) / 100;
};

// convert #rbg to #rrggbb
const normalizeHex = hex => hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, '#$1$1$2$2$3$3');

// determine the WCAG 2.0 contrast ratio level
const wcagLevel = ratio => ratio >= 7 ? 'AAA' : ratio >= 4.5 ? 'AA' : 'fail';

// determine the better contrasting color for a color
const betterColor = hex => {
  const h = normalizeHex(hex);
  if (!h.match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i)) {
    return hex;
  }
  var w = contrast(h, '#ffffff');
  var b = contrast(h, '#000000');
  var r = Math.max(w, b);
  return hex + ' // contrasts best with ' + (w > b ? '#fff' : '#000') + ' with a ratio of ' + r + ' to 1; WCAG 2.0: ' + wcagLevel(r);
};