src/components/lists/ShowList.vue

@@ -242,7 +242,7 @@
 												label="title"
 												track-by="id">
 											<template slot="tag" slot-scope="{ option, remove }">
-												<span class="tag" :style="{'background': '#' + option.hex_color}">
+												<span class="tag" :style="{'background': '#' + option.hex_color, 'color': option.hasDarkColor() ? '#e5e5e5' : '#4a4a4a'}">
 													<span>{{ option.title }}</span>
 													<button class="delete is-small" @click="removeLabel(option)"></button>
 												</span>

src/models/label.js

@@ -20,4 +20,15 @@ export default class LabelModel extends AbstractModel {
 			updated: 0
 		}
 	}
+	
+	hasDarkColor() {
+		let rgb = parseInt(this.hex_color, 16);   // convert rrggbb to decimal
+		let r = (rgb >> 16) & 0xff;  // extract red
+		let g = (rgb >>  8) & 0xff;  // extract green
+		let b = (rgb >>  0) & 0xff;  // extract blue
+		
+		// luma will be a value 0..255 where 0 indicates the darkest, and 255 the brightest
+		let luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709
+		return luma < 128
+	}
 }