feat: Colour Accessibility restriction #56 #45 #25

sergiomrebelo · Aug 11, 2023 · 4560a34 · 4560a34
1 parent 3c52f05
commit 4560a34
Show file tree

Hide file tree

Showing 5 changed files with 208 additions and 75 deletions.
diff --git a/evo-poster.config.js b/evo-poster.config.js
@@ -50,6 +50,13 @@ const TYPEFACES = {
     }
 }
 
+const COLOR = {
+    MIN_CONTRAST: 2.5,
+    MAX_COLOR_SCHEME_ATTEMPT: 200,
+}
+
+
 export default {
-    typography: TYPEFACES !== undefined ? TYPEFACES : {}
+    typography: TYPEFACES !== undefined ? TYPEFACES : {},
+    color: COLOR !== undefined ? COLOR : {}
 }
diff --git a/src/client/controllers/ColorGenerator.js b/src/client/controllers/ColorGenerator.js
@@ -1,12 +1,24 @@
 import {harmony, analogue, complement, triad } from 'simpler-color';
+import * as config from '../../../evo-poster.config.js';
+
+const MIN_CONTRAST = config["default"].color !== null ? config["default"].color.MIN_CONTRAST : 10;
 
 export const randomScheme = () => {
     const baseColour = randomColour();
     return complementAndAnalogueScheme(baseColour);
 }
 
+export const contrastChecker = (baseColor, colorA, colorB) => {
+    const baseColorLuminance = luminance(baseColor);
+    const colorALuminance = luminance(colorA);
+    const colorBLuminance = luminance(colorB);
+    const min = Math.min(contrastRatio(baseColorLuminance, colorALuminance), contrastRatio(baseColorLuminance, colorBLuminance));
+    return min > MIN_CONTRAST;
+}
+
 export const complementAndAnalogueScheme = (baseColour) => {
     const colorA = complement(baseColour, 1);
+
     const colorB = analogue(colorA, Math.round(-2+(Math.random()*4)));
     return {
         baseColour: baseColour,
@@ -55,4 +67,33 @@ export const randomColour = () => {
 }
 
 
+
+const hexToRGB = (hex) => {
+    let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16)
+    } : null;
+}
+
+const luminance = (c) => {
+    c = hexToRGB(c);
+    let [lumR, lumG, lumB] = Object.keys(c).map(key => {
+        let proportion = c[key] / 255;
+        return proportion <= 0.03928
+            ? proportion / 12.92
+            : Math.pow((proportion + 0.055) / 1.055, 2.4);
+    });
+    return 0.2126 * lumR + 0.7152 * lumG + 0.0722 * lumB;
+}
+
+const contrastRatio = (luminance1, luminance2) => {
+    let lighterLum = Math.max(luminance1, luminance2);
+    let darkerLum = Math.min(luminance1, luminance2);
+
+    return (lighterLum + 0.05) / (darkerLum + 0.05);
+}
+
+
 export default randomScheme;
diff --git a/src/client/controllers/Population.js b/src/client/controllers/Population.js
@@ -1,10 +1,14 @@
 import {Params} from "../Params.js";
 import Poster, {Grid} from "./Poster.js";
-import {randomScheme} from "./ColorGenerator.js";
+import {contrastChecker, randomScheme} from "./ColorGenerator.js";
 import {shuffleArr, sumArr, sus, swap} from "../utils.js";
 
+import * as config from './../../../evo-poster.config.js';
+
+
 const SIZE_MUTATION_ADJUST = 5;
 const TOURNAMENT_SIZE = 10;
+const MAX_COLOR_SCHEME_ATTEMPT = config["default"]["COLOR"] !== undefined ? config["default"]["COLOR"]["MAX_COLOR_SCHEME_ATTEMPT"] : 200;
 
 export class Population {
     #typefaces;
@@ -196,7 +200,15 @@ export class Population {
 
         // colours scheme
         if (Math.random() < prob) {
-            const colorScheme = randomScheme();
+            let colorContrast = false;
+            let colorScheme;
+            let colorAttempt = 0;
+            while (!colorContrast || colorAttempt > MAX_COLOR_SCHEME_ATTEMPT) {
+                colorScheme = randomScheme();
+                colorContrast = contrastChecker(colorScheme["baseColour"], colorScheme["colorA"], colorScheme["colorB"]);
+                colorAttempt++;
+            }
+
             // mutate background colours
             if (!this.params["background"]["lock"][1]) {
                 ind.genotype["background"]["colors"][0] = colorScheme.colorA;

diff --git a/src/client/controllers/Poster.js b/src/client/controllers/Poster.js
@@ -2,10 +2,13 @@ import {Params} from "../Params.js";
 import backgroundStyles from "./BackgroundStyles.js";
 
 import * as evaluator from "../../@evoposter/evaluator/src/index.mjs";
-import {randomScheme} from "./ColorGenerator.js";
+import {randomScheme, contrastChecker} from "./ColorGenerator.js";
 import {sumArr} from "../utils.js";
 import {alignment, semanticsEmphasis, whiteSpaceFraction} from "../../@evoposter/evaluator/src/index.mjs";
 
+import * as config from './../../../evo-poster.config.js';
+const MAX_COLOR_SCHEME_ATTEMPT = config["default"]["COLOR"] !== undefined ? config["default"]["COLOR"]["MAX_COLOR_SCHEME_ATTEMPT"] : 200;
+
 
 class Poster {
     #showGrid = false;
@@ -79,8 +82,16 @@ class Poster {
         return new Poster(this.n, this.generation, this.params, genotypeCopy);
     }
 
-    #generateGenotype = (params) => {
-        const colorScheme = randomScheme();
+    #generateGenotype = (params, ) => {
+        // generate scheme
+        let colorContrast = false;
+        let colorScheme;
+        let colorAttempt = 0;
+        while (!colorContrast || colorAttempt > MAX_COLOR_SCHEME_ATTEMPT) {
+            colorScheme = randomScheme();
+            colorContrast = contrastChecker(colorScheme["baseColour"], colorScheme["colorA"], colorScheme["colorB"]);
+            colorAttempt++;
+        }
 
         // define grid
         const grid = new Grid(