color-contrast-checker - npm Package Compare versions

Comparing version 1.3.0 to 1.4.0

package.json

 {
   "name": "color-contrast-checker",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "This is an accessibility validator based on WCAG 2.0 standard for checking the color contrast.",
@@ -5,0 +5,0 @@ "main": "src/color-contrast-checker.js",

README.md

@@ -10,2 +10,6 @@ # Color Contast Checker
 
+It also supports shorthand color codes e.g #FFF or #000 etc. 
+
+https://www.w3.org/TR/2001/WD-css3-color-20010305#colorunits
+
 Installation:
@@ -25,3 +29,3 @@ ------------
     ..
-    "color-contrast-checker": "1.0.0"
+    "color-contrast-checker": "1.4.0"
   }
@@ -28,0 +32,0 @@ }

src/color-contrast-checker.js

@@ -37,39 +37,45 @@ 'use strict';
         },
+        isValidSixDigitColorCode: function (hex){
+            var regSixDigitColorcode = /^(#)?([0-9a-fA-F]{6})([0-9a-fA-F]{6})?$/;
+            return regSixDigitColorcode.test(hex);
+        },
+        isValidThreeDigitColorCode: function (hex){
+            var regThreeDigitColorcode = /^(#)?([0-9a-fA-F]{3})([0-9a-fA-F]{3})?$/;
+            return regThreeDigitColorcode.test(hex);
+        },
         isValidColorCode : function (hex){
-            var regColorcode = /^(#)?([0-9a-fA-F]{6})([0-9a-fA-F]{6})?$/;
-            return regColorcode.test(hex);
+            return this.isValidSixDigitColorCode(hex) || this.isValidThreeDigitColorCode(hex);
         },
-        check : function (colorA, colorB, fontSize){
+        convertColorToSixDigit: function (hex) {
+          return '#' + hex[1] + hex[1] + hex[2] + hex[2] + hex[3] + hex[3];
+        },
+        hexToLuminance: function (color) {
+            if (!this.isValidColorCode(color)) {
+                throw new Error("Invalid Color :" + color);
+            }
 
-            if (typeof fontSize !== 'undefined') {
-                this.fontSize = fontSize;
+            if (this.isValidThreeDigitColorCode(color)) {
+              color = this.convertColorToSixDigit(color);
             }
 
-            if(!colorA || !colorB)
-                return false;
+            color = this.getRGBFromHex(color);
 
-            var color1, color2;
-            var l1; /* higher value */
-            var l2; /* lower value */
+            var LRGB = this.calculateLRGB(color);
 
-
-            if (!this.isValidColorCode(colorA)) {
-                throw new Error("Invalid Color :" + colorA);
+            return this.calculateLuminance(LRGB);
+        },
+        check: function (colorA, colorB, fontSize) {
+            if (typeof fontSize !== 'undefined') {
+                this.fontSize = fontSize;
             }
 
-            if (!this.isValidColorCode(colorB)) {
-                throw new Error("Invalid Color :" + colorB);
+            if(!colorA || !colorB) {
+                return false;
             }
 
-            color1 = this.getRGBFromHex(colorA);
-            color2 = this.getRGBFromHex(colorB);
+            var l1 = this.hexToLuminance(colorA); /* higher value */
+            var l2 = this.hexToLuminance(colorB); /* lower value */
+            var contrastRatio = this.getContrastRatio(l1, l2);
 
-            var l1RGB = this.calculateLRGB(color1);
-            var l2RGB = this.calculateLRGB(color2);
-
-            /* where L is luminosity and is defined as */
-            l1 = this.calculateLuminance(l1RGB);
-            l2 = this.calculateLuminance(l2RGB);
-
-            return this.verifyContrastRatio(this.getContrastRatio(l1, l2));
+            return this.verifyContrastRatio(contrastRatio);
         },
@@ -76,0 +82,0 @@ checkPairs: function (pairs) {

test/color-contrast-checker.js

@@ -7,3 +7,88 @@ 'use strict';
 
+describe('Three Digit Color Code Lengths', function() {
+  it('should accept 3 digit color code', function() {
+    var result = ccc.isValidThreeDigitColorCode("#FFF");
+    expect(result).to.be.true;
+  });
+
+  it('should reject 2 digit color code', function() {
+    var result = ccc.isValidThreeDigitColorCode("#FF");
+    expect(result).to.be.false;
+  });
+
+  it('should reject 4 digit color code', function() {
+    var result = ccc.isValidThreeDigitColorCode("#FFFF");
+    expect(result).to.be.false;
+  });
+});
+
+describe('Six Digit Color Code Lengths', function() {
+  it('should accept 6 digit color code', function() {
+    var result = ccc.isValidSixDigitColorCode("#FFFFFF");
+    expect(result).to.be.true;
+  });
+
+  it('should reject 5 digit color code', function() {
+    var result = ccc.isValidSixDigitColorCode("#FFFFF");
+    expect(result).to.be.false;
+  });
+
+  it('should reject 7 digit color code', function() {
+    var result = ccc.isValidSixDigitColorCode("#FFFFFFF");
+    expect(result).to.be.false;
+  });
+});
+
+describe('Supported Color Code Lengths', function() {
+  it('should accept 3 digit color code', function() {
+    var result = ccc.isValidColorCode("#FFF");
+    expect(result).to.be.true;
+  });
+
+  it('should accept 6 digit color code', function() {
+    var result = ccc.isValidColorCode("#FFFFFF");
+    expect(result).to.be.true;
+  });
+
+  it('should reject 7 digit color code', function() {
+    var result = ccc.isValidColorCode("#FFFFFFF");
+    expect(result).to.be.false;
+  });
+});
+
+describe('Convert Color from 3 digit to 6 digit', function() {
+  it('should convert 3 digit color to 6 digit', function() {
+    var result = ccc.convertColorToSixDigit("#FFF");
+    expect(result).to.equal("#FFFFFF");
+  });
+});
+
+describe('Convert Hex to Luminance', function() {
+  it('should convert 3 digit color luminance value', function() {
+    var result = ccc.hexToLuminance("#FFF");
+    expect(result).to.equal(1);
+  });
+  
+  it('should convert 6 digit color luminance value', function() {
+    var result = ccc.hexToLuminance("#FFFFFF");
+    expect(result).to.equal(1);
+  });
+
+  it('should convert blue color luminance value', function() {
+    var result = ccc.hexToLuminance("#0000FF");
+    expect(result).to.equal(0);
+  });
+
+   it('should convert yellow color luminance value', function() {
+    var result = ccc.hexToLuminance("#ffff00");
+    expect(result).to.equal(1);
+  });
+});
+
 describe('Basic Validation for LevelAA', function() {
+   it('should return true when contrast is valid for three digit color codes', function() {
+    var result = ccc.isLevelAA("#FFF", "#000", 14);
+    expect(result).to.be.true;
+  });
+
   it('should return true when contrast is valid', function() {
@@ -21,2 +106,7 @@ var result = ccc.isLevelAA("#FFFFFF", "#000000", 14);
 describe('Basic Validation for LevelAAA', function() {
+   it('should return true when contrast is valid for three digit color codes', function() {
+    var result = ccc.isLevelAA("#FFF", "#000", 14);
+    expect(result).to.be.true;
+  });
+
   it('should return true when contrast is valid', function() {
@@ -34,3 +124,3 @@ var result = ccc.isLevelAA("#FFFFFF", "#000000", 14);
 
-describe('Pair Validation for LevelAAA', function() {
+describe('Six Digit Pair Validation for LevelAAA', function() {
   var pairs = [
@@ -97,1 +187,64 @@ {
 });
+
+describe('Three Digit Pair Validation for LevelAAA', function() {
+  var pairs = [
+      {
+          'colorA': '#000',
+          'colorB': '#000',  // All should fail
+          'fontSize': 14
+      },
+      {
+          'colorA': '#000',
+          'colorB': '#FFF',  //All should pass
+          'fontSize': 14
+      },
+      {
+          'colorA': '#000',
+          'colorB': '#848',  //AAA should fail
+          'fontSize': 14
+      },
+      {
+          'colorA': '#000',
+          'colorB': '#848',  //All should pass (because of font)
+          'fontSize': 19
+      },
+      {
+          'colorA': '#000',
+          'colorB': '#757',  //AA should pass AAA should fail
+          'fontSize': 14
+      },
+      {
+          'colorA': '#000',
+          'colorB': '#656',  //All should fail
+          'fontSize': 14
+      }
+  ];
+
+
+  var expectedResults = [ 
+    { WCAG_AA: false, WCAG_AAA: false },
+    { WCAG_AA: true, WCAG_AAA: true },
+    { WCAG_AA: true, WCAG_AAA: false },
+    { WCAG_AA: true, WCAG_AAA: true },
+    { WCAG_AA: true, WCAG_AAA: false },
+    { WCAG_AA: false, WCAG_AAA: false } ];
+
+  function objectsAreSame(x, y) {
+     var objectsAreSame = true;
+     for(var propertyName in x) {
+        if(x[propertyName].WCAG_AA !== y[propertyName].WCAG_AA
+           && x[propertyName].WCAG_AAA !== y[propertyName].WCAG_AAA) {
+           objectsAreSame = false;
+           break;
+        }
+     }
+     return objectsAreSame;
+  }
+
+  it('should return the expectedResults for checkPairs', function() {
+    var results = ccc.checkPairs(pairs);
+    expect(results).to.be.an('array');
+    expect(results).to.have.lengthOf(6);
+    expect(objectsAreSame(results, expectedResults)).to.be.true;
+  }); 
+});

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

21043

increased by31.43%

Lines of code

398

increased by54.86%

Number of lines in readme file

133

increased by3.1%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes