[gnome-maps/wip/mlundblad/transit-routing: 9/26] Add color luminance and contrast functions



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

    Add color luminance and contrast functions
    
    Add a new module with utility functions for computing lumninance
    and contrast for background and foreground colors.
    This is needed to compute good contrasting colors for transit route
    labels.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=755808

 src/contrast.js                      |   80 ++++++++++++++++++++++++++++++++++
 src/org.gnome.Maps.src.gresource.xml |    1 +
 2 files changed, 81 insertions(+), 0 deletions(-)
---
diff --git a/src/contrast.js b/src/contrast.js
new file mode 100644
index 0000000..ab54829
--- /dev/null
+++ b/src/contrast.js
@@ -0,0 +1,80 @@
+/* -*- Mode: JS2; indent-tabs-mode: nil; js2-basic-offset: 4 -*- */
+/* vim: set et ts=4 sw=4: */
+/*
+ * Copyright (c) 2017, Marcus Lundblad
+ *
+ * GNOME Maps is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by the
+ * Free Software Foundation; either version 2 of the License, or (at your
+ * option) any later version.
+ *
+ * GNOME Maps is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
+ * or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License
+ * for more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with GNOME Maps; if not, see <http://www.gnu.org/licenses/>.
+ *
+ * Author: Marcus Lundblad <ml update uu se>
+ */
+
+/* Minimum contrast ratio for foreground/background color for i.e. route labels */
+const MIN_CONTRAST_RATIO = 3.0;
+
+/**
+ * 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.2126 * 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;
+    }
+}
diff --git a/src/org.gnome.Maps.src.gresource.xml b/src/org.gnome.Maps.src.gresource.xml
index dbf82a5..768df76 100644
--- a/src/org.gnome.Maps.src.gresource.xml
+++ b/src/org.gnome.Maps.src.gresource.xml
@@ -8,6 +8,7 @@
     <file>checkInDialog.js</file>
     <file>contactPlace.js</file>
     <file>contextMenu.js</file>
+    <file>contrast.js</file>
     <file>epaf.js</file>
     <file>exportViewDialog.js</file>
     <file>facebookBackend.js</file>


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]