Display the mean contrast ratio of a color palette

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - :rocket: Ignore invalid colors.
 - :rocket: Don't calculate unnecessary contrast ratios.
+- :rocket: Display the mean contrast ratio of a color palette.
 - :hammer: Replace TravisCI with GitHub Actions.
 
 ## [1.1.0] - 2020-10-28

examples/all.sh

@@ -1,5 +1,6 @@
 #!/usr/bin/env bash
 
+../bin/a11y-contrast.js black-white.json
 ../bin/a11y-contrast.js ibm-v1.json
 ../bin/a11y-contrast.js ibm-v2.1.json --min-ratio-3=40 --min-ratio-4.5=50 --min-ratio-7=70
 ../bin/a11y-contrast.js open-color.json

examples/black-white.json

@@ -0,0 +1,8 @@
+{
+  "black": {
+    "black-100": "#000000"
+  },
+  "white": {
+    "white-0": "#ffffff"
+  }
+}

examples/uswds.json

@@ -1,4 +1,10 @@
 {
+  "black": {
+    "black-100": "#000000"
+  },
+  "white": {
+    "white-0": "#ffffff"
+  },
   "blue": {
     "blue-5": "#eff6fb",
     "blue-10": "#d9e8f6",

package.json

@@ -48,7 +48,8 @@
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",
     "prepublishOnly": "npm run ci",
-    "start": "node ./bin/a11y-contrast.js examples/uswds.json",
+    "start": "node ./bin/a11y-contrast.js examples/black-white.json",
+    "run-all": "cd examples && sh all.sh",
     "test": "jest"
   }
 }

src/index.js

@@ -23,7 +23,7 @@ const verifyContrastRatio = (palette, magicNumber) => {
 
   palette.forEach((color1) => {
     palette.forEach((color2) => {
-      if (color1.grade > color2.grade) {
+      if (color1.grade > color2.grade || color1 === color2) {
         return; // don't compare same colors to each other
       }
 
@@ -94,6 +94,25 @@ const removeInvalidColors = (palette) => {
   });
 };
 
+const calculateMeanContrastRatio = (palette) => {
+  let mean = 0;
+  let count = 0;
+
+  palette.forEach((color1) => {
+    palette.forEach((color2) => {
+      if (color1.grade > color2.grade || color1 === color2) {
+        return; // don't compare same colors to each other
+      }
+
+      const contrastRatio = color1.onecolorValue.contrast(color2.onecolorValue);
+      count++;
+      mean += (contrastRatio - mean) / count;
+    });
+  });
+
+  return Math.round(mean * 1000) / 1000;
+};
+
 const run = (colors, config) => {
   logger.info(`${green("Analyzing")}: ${config.file}`);
 
@@ -103,6 +122,11 @@ const run = (colors, config) => {
   const magicNumbers = calculateMagicNumbers(validPalette);
 
   logger.log(`${green("Colors:")} ${validPalette.length}`);
+  logger.log(
+    `${green("Mean contrast ratio:")} ${calculateMeanContrastRatio(
+      validPalette
+    )}`
+  );
   logger.log(green("Magic numbers:"));
   Object.entries(magicNumbers).forEach(([grade, magicNumber]) => {
     logger.log(