[gnome-maps/wip/mlundblad/transit-routing: 5/17] utils: Add color luminance and contrast functions
- From: Marcus Lundblad <mlundblad src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-maps/wip/mlundblad/transit-routing: 5/17] utils: Add color luminance and contrast functions
- Date: Mon, 29 Aug 2016 20:20:41 +0000 (UTC)
commit 6f6ea9409a1264f3e5f2669635b85e0cfcfb19bf
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;
+ }
+}
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]