colorizr - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

es/index.js

@@ -289,2 +289,124 @@ var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
     /**
+     * Test 2 colors for compliance.
+     *
+     * @param {Object} left
+     * @param {Object} [right]
+     * @returns {Object}
+     */
+
+  }, {
+    key: 'checkContrast',
+    value: function checkContrast() {
+      var left = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : isRequired('left');
+      var right = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.hex;
+
+      var LuminanceLeft = this.getLuminance(left);
+      var LuminanceRight = this.getLuminance(right);
+      var colorDifference = this.getColorDifference(left, right);
+      var colorThreshold = 500;
+      var brightnessDifference = this.getBrightnessDifference(left, right);
+      var brightnessThreshold = 125;
+      var ratio = 1;
+
+      if (LuminanceLeft >= LuminanceRight) {
+        ratio = (LuminanceLeft + 0.05) / (LuminanceRight + 0.05);
+      } else {
+        ratio = (LuminanceRight + 0.05) / (LuminanceLeft + 0.05);
+      }
+
+      ratio = round(ratio, 4);
+
+      var isBright = brightnessDifference >= brightnessThreshold;
+      var hasEnoughDifference = colorDifference >= colorThreshold;
+
+      var compliant = 0;
+
+      if (isBright && hasEnoughDifference) {
+        compliant = 2;
+      } else if (isBright || hasEnoughDifference) {
+        compliant = 1;
+      }
+
+      return {
+        brightnessDifference: brightnessDifference,
+        colorDifference: colorDifference,
+        compliant: compliant,
+        contrastRatio: ratio,
+        w2a: ratio >= 3,
+        w2aaab: ratio >= 7,
+        w2aaaa: ratio >= 4.5,
+        w2b: ratio >= 4.5
+      };
+    }
+
+    /**
+     * Get the brightness difference between 2 colors.
+     *
+     * @param {Object} left
+     * @param {Object} [right]
+     * @returns {number}
+     */
+
+  }, {
+    key: 'getBrightnessDifference',
+    value: function getBrightnessDifference() {
+      var left = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : isRequired('left');
+      var right = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.hex;
+
+      var RGBLeft = this.hex2rgb(left);
+      var RGBRight = this.hex2rgb(right);
+
+      var rightY = (RGBRight.r * 299 + RGBRight.g * 587 + RGBRight.b * 114) / 1000;
+      var leftY = (RGBLeft.r * 299 + RGBLeft.g * 587 + RGBLeft.b * 114) / 1000;
+      return round(Math.abs(rightY - leftY), 4);
+    }
+
+    /**
+     * Get the color difference between 2 colors.
+     *
+     * @param {Object} left
+     * @param {Object} [right]
+     * @returns {number}
+     */
+
+  }, {
+    key: 'getColorDifference',
+    value: function getColorDifference() {
+      var left = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : isRequired('left');
+      var right = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.hex;
+
+      var RGBLeft = this.hex2rgb(left);
+      var RGBRight = this.hex2rgb(right);
+
+      return Math.max(RGBLeft.r, RGBRight.r) - Math.min(RGBLeft.r, RGBRight.r) + (Math.max(RGBLeft.g, RGBRight.g) - Math.min(RGBLeft.g, RGBRight.g)) + (Math.max(RGBLeft.b, RGBRight.b) - Math.min(RGBLeft.b, RGBRight.b));
+    }
+
+    /**
+     * Get the luminance of a color.
+     *
+     * @param hex
+     * @returns {number}
+     */
+
+  }, {
+    key: 'getLuminance',
+    value: function getLuminance() {
+      var hex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.hex;
+
+      var rgb = this.hex2rgb(hex);
+
+      rgb = [rgb.r / 255, rgb.g / 255, rgb.b / 255];
+
+      for (var i = 0; i < rgb.length; i++) {
+        if (rgb[i] <= 0.03928) {
+          rgb[i] /= 12.92;
+        } else {
+          rgb[i] = Math.pow((rgb[i] + 0.055) / 1.055, 2.4);
+        }
+      }
+
+      return round(0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2], 4);
+    }
+
+    /**
      * Parse HEX color.
@@ -291,0 +413,0 @@ *

lib/index.js

@@ -294,2 +294,124 @@ 'use strict';
     /**
+     * Test 2 colors for compliance.
+     *
+     * @param {Object} left
+     * @param {Object} [right]
+     * @returns {Object}
+     */
+
+  }, {
+    key: 'checkContrast',
+    value: function checkContrast() {
+      var left = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : (0, _utils.isRequired)('left');
+      var right = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.hex;
+
+      var LuminanceLeft = this.getLuminance(left);
+      var LuminanceRight = this.getLuminance(right);
+      var colorDifference = this.getColorDifference(left, right);
+      var colorThreshold = 500;
+      var brightnessDifference = this.getBrightnessDifference(left, right);
+      var brightnessThreshold = 125;
+      var ratio = 1;
+
+      if (LuminanceLeft >= LuminanceRight) {
+        ratio = (LuminanceLeft + 0.05) / (LuminanceRight + 0.05);
+      } else {
+        ratio = (LuminanceRight + 0.05) / (LuminanceLeft + 0.05);
+      }
+
+      ratio = (0, _utils.round)(ratio, 4);
+
+      var isBright = brightnessDifference >= brightnessThreshold;
+      var hasEnoughDifference = colorDifference >= colorThreshold;
+
+      var compliant = 0;
+
+      if (isBright && hasEnoughDifference) {
+        compliant = 2;
+      } else if (isBright || hasEnoughDifference) {
+        compliant = 1;
+      }
+
+      return {
+        brightnessDifference: brightnessDifference,
+        colorDifference: colorDifference,
+        compliant: compliant,
+        contrastRatio: ratio,
+        w2a: ratio >= 3,
+        w2aaab: ratio >= 7,
+        w2aaaa: ratio >= 4.5,
+        w2b: ratio >= 4.5
+      };
+    }
+
+    /**
+     * Get the brightness difference between 2 colors.
+     *
+     * @param {Object} left
+     * @param {Object} [right]
+     * @returns {number}
+     */
+
+  }, {
+    key: 'getBrightnessDifference',
+    value: function getBrightnessDifference() {
+      var left = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : (0, _utils.isRequired)('left');
+      var right = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.hex;
+
+      var RGBLeft = this.hex2rgb(left);
+      var RGBRight = this.hex2rgb(right);
+
+      var rightY = (RGBRight.r * 299 + RGBRight.g * 587 + RGBRight.b * 114) / 1000;
+      var leftY = (RGBLeft.r * 299 + RGBLeft.g * 587 + RGBLeft.b * 114) / 1000;
+      return (0, _utils.round)(Math.abs(rightY - leftY), 4);
+    }
+
+    /**
+     * Get the color difference between 2 colors.
+     *
+     * @param {Object} left
+     * @param {Object} [right]
+     * @returns {number}
+     */
+
+  }, {
+    key: 'getColorDifference',
+    value: function getColorDifference() {
+      var left = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : (0, _utils.isRequired)('left');
+      var right = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.hex;
+
+      var RGBLeft = this.hex2rgb(left);
+      var RGBRight = this.hex2rgb(right);
+
+      return Math.max(RGBLeft.r, RGBRight.r) - Math.min(RGBLeft.r, RGBRight.r) + (Math.max(RGBLeft.g, RGBRight.g) - Math.min(RGBLeft.g, RGBRight.g)) + (Math.max(RGBLeft.b, RGBRight.b) - Math.min(RGBLeft.b, RGBRight.b));
+    }
+
+    /**
+     * Get the luminance of a color.
+     *
+     * @param hex
+     * @returns {number}
+     */
+
+  }, {
+    key: 'getLuminance',
+    value: function getLuminance() {
+      var hex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.hex;
+
+      var rgb = this.hex2rgb(hex);
+
+      rgb = [rgb.r / 255, rgb.g / 255, rgb.b / 255];
+
+      for (var i = 0; i < rgb.length; i++) {
+        if (rgb[i] <= 0.03928) {
+          rgb[i] /= 12.92;
+        } else {
+          rgb[i] = Math.pow((rgb[i] + 0.055) / 1.055, 2.4);
+        }
+      }
+
+      return (0, _utils.round)(0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2], 4);
+    }
+
+    /**
      * Parse HEX color.
@@ -296,0 +418,0 @@ *

package.json

 {
   "name": "colorizr",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Manipulate colors like a boss",
@@ -5,0 +5,0 @@ "author": "Gil Barbara <[e-mail]>",

src/index.js

@@ -224,2 +224,106 @@ // @flow
   /**
+   * Test 2 colors for compliance.
+   *
+   * @param {Object} left
+   * @param {Object} [right]
+   * @returns {Object}
+   */
+  checkContrast(left: string = isRequired('left'), right: string = this.hex): Object {
+    const LuminanceLeft = this.getLuminance(left);
+    const LuminanceRight = this.getLuminance(right);
+    const colorDifference = this.getColorDifference(left, right);
+    const colorThreshold = 500;
+    const brightnessDifference = this.getBrightnessDifference(left, right);
+    const brightnessThreshold = 125;
+    let ratio = 1;
+
+    if (LuminanceLeft >= LuminanceRight) {
+      ratio = (LuminanceLeft + 0.05) / (LuminanceRight + 0.05);
+    }
+    else {
+      ratio = (LuminanceRight + 0.05) / (LuminanceLeft + 0.05);
+    }
+
+    ratio = round(ratio, 4);
+
+    const isBright = (brightnessDifference >= brightnessThreshold);
+    const hasEnoughDifference = (colorDifference >= colorThreshold);
+
+    let compliant = 0;
+
+    if (isBright && hasEnoughDifference) {
+      compliant = 2;
+    }
+    else if (isBright || hasEnoughDifference) {
+      compliant = 1;
+    }
+
+    return {
+      brightnessDifference,
+      colorDifference,
+      compliant,
+      contrastRatio: ratio,
+      w2a: ratio >= 3,
+      w2aaab: ratio >= 7,
+      w2aaaa: ratio >= 4.5,
+      w2b: ratio >= 4.5,
+    };
+  }
+
+  /**
+   * Get the brightness difference between 2 colors.
+   *
+   * @param {Object} left
+   * @param {Object} [right]
+   * @returns {number}
+   */
+  getBrightnessDifference(left: string = isRequired('left'), right: string = this.hex): number {
+    const RGBLeft = this.hex2rgb(left);
+    const RGBRight = this.hex2rgb(right);
+
+    const rightY = ((RGBRight.r * 299) + (RGBRight.g * 587) + (RGBRight.b * 114)) / 1000;
+    const leftY = ((RGBLeft.r * 299) + (RGBLeft.g * 587) + (RGBLeft.b * 114)) / 1000;
+    return round(Math.abs(rightY - leftY), 4);
+  }
+
+  /**
+   * Get the color difference between 2 colors.
+   *
+   * @param {Object} left
+   * @param {Object} [right]
+   * @returns {number}
+   */
+  getColorDifference(left: string = isRequired('left'), right: string = this.hex): number {
+    const RGBLeft = this.hex2rgb(left);
+    const RGBRight = this.hex2rgb(right);
+
+    return (Math.max(RGBLeft.r, RGBRight.r) - Math.min(RGBLeft.r, RGBRight.r)) +
+      (Math.max(RGBLeft.g, RGBRight.g) - Math.min(RGBLeft.g, RGBRight.g)) +
+      (Math.max(RGBLeft.b, RGBRight.b) - Math.min(RGBLeft.b, RGBRight.b));
+  }
+
+  /**
+   * Get the luminance of a color.
+   *
+   * @param hex
+   * @returns {number}
+   */
+  getLuminance(hex: string = this.hex): number {
+    let rgb = this.hex2rgb(hex);
+
+    rgb = [rgb.r / 255, rgb.g / 255, rgb.b / 255];
+
+    for (let i = 0; i < rgb.length; i++) {
+      if (rgb[i] <= 0.03928) {
+        rgb[i] /= 12.92;
+      }
+      else {
+        rgb[i] = ((rgb[i] + 0.055) / 1.055) ** 2.4;
+      }
+    }
+
+    return round((0.2126 * rgb[0]) + (0.7152 * rgb[1]) + (0.0722 * rgb[2]), 4);
+  }
+
+  /**
    * Parse HEX color.
@@ -226,0 +330,0 @@ *

No alert changes

Improved metrics

Total package byte prevSize

75724

increased by6.07%

Lines of code

2422

increased by13.44%

Worsened metrics

Number of package files

9

decreased by-10%

No dependency changes