[gnome-maps/wip/mlundblad/transit-routing: 23/34] utils: Add color luminance and contrast functions

[Marcus Lundblad <mlundblad src gnome org>]

commit 108caf222eca81067993af14f73d9c33afddeef7
Author: Marcus Lundblad <ml update uu se>
Date:   Fri Jun 3 00:23:43 2016 +0200

    utils: Add color luminance and contrast functions
    
    This is needed to compute good contrasting colors for transit route
    labels.

 src/utils.js |   60 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 60 insertions(+), 0 deletions(-)
---
diff --git a/src/utils.js b/src/utils.js
index f9c7151..a8b1b18 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -38,6 +38,9 @@ const IMPERIAL_LOCALES = ['unm_US', 'es_US', 'es_PR', 'en_US', 'yi_US'];
 // Matches all unicode stand-alone accent characters
 const ACCENTS_REGEX = /[\u0300-\u036F]/g;
 
+// Minimum contrast ratio for foreground/background color for i.e. route labels
+const MIN_CONTRAST_RATIO = 4.0;
+
 let debugInit = false;
 let debugEnabled = false;
 let measurementSystem = null;
@@ -388,3 +391,60 @@ function normalizeString(string) {
     let normalized = GLib.utf8_normalize(string, -1, GLib.NormalizeMode.ALL);
     return normalized.replace(ACCENTS_REGEX, '');
 }
+
+/**
+ * Returns the relative luminance (0.0 - 1.0) of a color, expressed in HTML
+ * notation (i.e. ffffff for white) according to the W3C WCAG definition:
+ * https://www.w3.org/WAI/GL/wiki/Relative_luminance
+ */
+function relativeLuminance(color) {
+    let rsRGB = parseInt(color.substring(0, 2), 16) / 255;
+    let gsRGB = parseInt(color.substring(2, 4), 16) / 255;
+    let bsRGB = parseInt(color.substring(4, 6), 16) / 255;
+    let r = rsRGB <= 0.03928 ?
+            rsRGB / 12.92 : Math.pow(((rsRGB + 0.055) / 1.055), 2.4);
+    let g = gsRGB <= 0.03928 ?
+            gsRGB / 12.92 : Math.pow(((gsRGB + 0.055) / 1.055), 2.4);
+    let b = bsRGB <= 0.03928 ?
+            bsRGB / 12.92 : Math.pow(((bsRGB + 0.055) / 1.055), 2.4);
+
+    return 0.216 * r + 0.7152 * g + 0.0722 * b;
+}
+
+/**
+ * Returns the contrast ratio between two colors, expressed in HTML notation
+ * (i.e. ffffff for white) according to the W3C WCAG defintion:
+ * https://www.w3.org/WAI/GL/wiki/Contrast_ratio
+ */
+function contrastRatio(color1, color2) {
+    let lc1 = relativeLuminance(color1);
+    let lc2 = relativeLuminance(color2);
+    /* order by luminance, lighter before darker */
+    let l1 = Math.max(lc1, lc2);
+    let l2 = Math.min(lc1, lc2);
+
+    return (l1 + 0.05) / (l2 + 0.05);
+}
+
+/**
+ * Finds a suitable foreground (text) color for a given background color.
+ * If the desiredForegroundColor argument is defined, return this color if it
+ * has enough contrast against the background, otherwise (or if that argument
+ * is undefined), return the one of black or white giving the higest contrast
+ */
+function getContrastingForegroundColor(backgroundColor,
+                                       desiredForegroundColor) {
+    if (!desiredForegroundColor ||
+        (contrastRatio(backgroundColor, desiredForegroundColor) <
+         MIN_CONTRAST_RATIO)) {
+        let contrastAgainstWhite = contrastRatio(backgroundColor, 'ffffff');
+        let contrastAgainstBlack = contrastRatio(backgroundColor, '000000');
+
+        if (contrastAgainstWhite > contrastAgainstBlack)
+            return 'ffffff';
+        else
+            return '000000';
+    } else {
+        return desiredForegroundColor;
+    }
+}