improve contrast on generated color palettes

gatsby-node.js

@@ -5,6 +5,7 @@ const { read } = require('fast-exif');
 const iptc = require('node-iptc');
 const Vibrant = require('node-vibrant');
 const R = require('ramda');
+const chroma = require('chroma-js');
 
 const readFile = util.promisify(fs.readFile);
 
@@ -38,19 +39,30 @@ function transformMetaToNodeData(exifData, iptcData, vibrantData) {
     }
   }
 
-  const vibrant = R.map((swatch) => ({
-    rgb: swatch.getRgb(),
-    titleTextColor: swatch.getTitleTextColor(),
-    bodyTextColor: swatch.getBodyTextColor(),
-  })
-  , vibrantData);
+  const vbChroma = R.map((swatch) => (chroma(swatch.getRgb()))
+    , vibrantData);
+
+
+  if (chroma.contrast(vbChroma.DarkVibrant, vbChroma.Vibrant) < 4.5) {
+    // console.log('adjusting colors', chroma.contrast(vbChroma.DarkVibrant, vbChroma.Vibrant));
+    // console.log(vbChroma.DarkVibrant.hex());
+    // console.log(vbChroma.Vibrant.hex());
+    vbChroma.DarkVibrant = vbChroma.DarkVibrant.darken();
+    vbChroma.Vibrant = vbChroma.Vibrant.brighten();
+    // console.log('adjusted', chroma.contrast(vbChroma.DarkVibrant, vbChroma.Vibrant));
+    // console.log(vbChroma.DarkVibrant.hex());
+    // console.log(vbChroma.Vibrant.hex());
+  }
+
+  const vibrantRgb = R.map((color) => color.rgb(), vbChroma);
+
 
   return {
     exif: exifData?.exif,
     gps,
     dateTaken: exifData?.exif?.DateTimeOriginal,
     iptc: iptcData || undefined,
-    vibrant,
+    vibrant: vibrantRgb,
   };
 }
 

package.json

@@ -26,6 +26,7 @@
     "babel-eslint": "^10.1.0",
     "babel-plugin-preval": "^5.0.0",
     "babel-plugin-styled-components": "^1.12.0",
+    "chroma-js": "^2.1.2",
     "classnames": "^2.3.1",
     "eslint": "^7.28.0",
     "eslint-config-react-app": "^6.0.0",

src/fragments.js

@@ -2,35 +2,11 @@ import { graphql } from 'gatsby';
 
 export const VibrantColorsFragment = graphql`
   fragment VibrantColors on ImageSharpFieldsImageMetaVibrant {
-    DarkMuted {
-      titleTextColor
-      bodyTextColor
-      rgb
-    }
-    DarkVibrant {
-      titleTextColor
-      bodyTextColor
-      rgb
-    }
-    LightMuted {
-      titleTextColor
-      bodyTextColor
-      rgb
-    }
-    LightVibrant {
-      titleTextColor
-      bodyTextColor
-      rgb
-    }
-    Vibrant {
-      titleTextColor
-      bodyTextColor
-      rgb
-    }
-    Muted {
-      titleTextColor
-      bodyTextColor
-      rgb
-    }
+    DarkMuted
+    DarkVibrant
+    LightMuted
+    LightVibrant
+    Vibrant
+    Muted
   }
 `;

src/utils.js

@@ -16,12 +16,12 @@ export const getRgba = (palette, alpha) => `rgba(${palette[0]}, ${palette[1]}, $
 // work around SSR bug in react-helmet
 export const getVibrantToHelmetSafeBodyStyle = (vibrant) => {
   const style = {
-    '--muted': vibrant.Muted.rgb,
-    '--dark-muted': vibrant.DarkMuted.rgb,
-    '--light-muted': vibrant.LightMuted.rgb,
-    '--vibrant': vibrant.Vibrant.rgb,
-    '--dark-vibrant': vibrant.DarkVibrant.rgb,
-    '--light-vibrant': vibrant.LightVibrant.rgb,
+    '--muted': vibrant.Muted,
+    '--dark-muted': vibrant.DarkMuted,
+    '--light-muted': vibrant.LightMuted,
+    '--vibrant': vibrant.Vibrant,
+    '--dark-vibrant': vibrant.DarkVibrant,
+    '--light-vibrant': vibrant.LightVibrant,
   };
   if (typeof window === 'undefined') {
     return style;

tailwind.config.js

@@ -36,17 +36,17 @@ module.exports = {
           DEFAULT: 'rgb(var(--vibrant))',
           light: 'rgb(var(--light-vibrant))',
           dark: 'rgb(var(--dark-vibrant))',
-          '75': 'rgba(var(--vibrant), .75)',
-          'light-75': 'rgba(var(--light-vibrant), .75)',
-          'dark-75': 'rgba(var(--dark-vibrant), .75)',
+          '75': 'rgba(var(--vibrant), .8)',
+          'light-75': 'rgba(var(--light-vibrant), .8)',
+          'dark-75': 'rgba(var(--dark-vibrant), .8)',
         },
         muted: {
           DEFAULT: 'rgb(var(--muted))',
           light: 'rgb(var(--light-muted))',
           dark: 'rgb(var(--dark-muted))',
-          '75': 'rgba(var(--muted), .75)',
-          'light-75': 'rgba(var(--light-muted), .75)',
-          'dark-75': 'rgba(var(--dark-muted), .75)',
+          '75': 'rgba(var(--muted), .8)',
+          'light-75': 'rgba(var(--light-muted), .8)',
+          'dark-75': 'rgba(var(--dark-muted), .8)',
         },
       },
     },

yarn.lock

@@ -3699,6 +3699,13 @@ chownr@^1.1.1:
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
   integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
 
+chroma-js@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/chroma-js/-/chroma-js-2.1.2.tgz#1075cb9ae25bcb2017c109394168b5cf3aa500ec"
+  integrity sha512-ri/ouYDWuxfus3UcaMxC1Tfp3IE9K5iQzxc2hSxbBRVNQFut1UuGAsZmiAf2mOUubzGJwgMSv9lHg+XqLaz1QQ==
+  dependencies:
+    cross-env "^6.0.3"
+
 chrome-trace-event@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz#1015eced4741e15d06664a957dbbf50d041e26ac"
@@ -4172,6 +4179,13 @@ create-require@^1.1.0:
   resolved "https://registry.yarnpkg.com/create-require/-/create-require-1.1.1.tgz#c1d7e8f1e5f6cfc9ff65f9cd352d37348756c333"
   integrity sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==
 
+cross-env@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-6.0.3.tgz#4256b71e49b3a40637a0ce70768a6ef5c72ae941"
+  integrity sha512-+KqxF6LCvfhWvADcDPqo64yVIB31gv/jQulX2NGzKS/g3GEVz6/pt4wjHFtFWsHMddebWD/sDthJemzM4MaAag==
+  dependencies:
+    cross-spawn "^7.0.0"
+
 cross-fetch@3.1.4:
   version "3.1.4"
   resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.4.tgz#9723f3a3a247bf8b89039f3a380a9244e8fa2f39"