diff --git a/js/controller/BoardController.js b/js/controller/BoardController.js
index 01990f108..be414f923 100644
--- a/js/controller/BoardController.js
+++ b/js/controller/BoardController.js
@@ -320,4 +320,11 @@ app.controller('BoardController', function ($rootScope, $scope, $stateParams, St
 		}
 	};
 
+	$scope.labelStyle = function (color) {
+		return {
+			'background-color': '#' + color,
+			'color': $filter('textColorFilter')(color)
+		};
+	};
+
 });
diff --git a/js/controller/CardController.js b/js/controller/CardController.js
index 4556b5b08..567a045cd 100644
--- a/js/controller/CardController.js
+++ b/js/controller/CardController.js
@@ -22,7 +22,7 @@
 
 /* global app moment */
 
-app.controller('CardController', function ($scope, $rootScope, $routeParams, $location, $stateParams, $interval, $timeout, BoardService, CardService, StackService, StatusService) {
+app.controller('CardController', function ($scope, $rootScope, $routeParams, $location, $stateParams, $interval, $timeout, $filter, BoardService, CardService, StackService, StatusService) {
 	$scope.sidebar = $rootScope.sidebar;
 	$scope.status = {
 		lastEdit: 0,
@@ -176,4 +176,11 @@ app.controller('CardController', function ($scope, $rootScope, $routeParams, $lo
 		});
 	};
 
+	$scope.labelStyle = function (color) {
+		return {
+			'background-color': '#' + color,
+			'color': $filter('textColorFilter')(color)
+		};
+	};
+
 });
\ No newline at end of file
diff --git a/templates/part.board.mainView.php b/templates/part.board.mainView.php
index f1184f43a..34b3b134e 100644
--- a/templates/part.board.mainView.php
+++ b/templates/part.board.mainView.php
@@ -67,7 +67,7 @@
 							<h4>{{ c.title }}</h4>
 							<ul class="labels">
 								<li ng-repeat="label in c.labels"
-									ng-style="{'background-color':'#{{ label.color }}'}" title="{{ label.title }}">
+									ng-style="labelStyle(label.color)" title="{{ label.title }}">
 									<span>{{ label.title }}</span>
 								</li>
 							</ul>
diff --git a/templates/part.card.php b/templates/part.card.php
index eaf9258be..0acdad1c1 100644
--- a/templates/part.card.php
+++ b/templates/part.card.php
@@ -41,11 +41,11 @@
 				   on-select="labelAssign($item, $model)"
 				   on-remove="labelRemove($item, $model)" ng-disabled="!boardservice.canEdit() || archived">
 			<ui-select-match placeholder="<?php p($l->t('Select tags')); ?>">
-				<span class="select-label" ng-style="{'background-color':'#{{$item.color}}','color':'{{ $item.color|textColorFilter }}'}">{{$item.title}}&nbsp;</span>
+				<span class="select-label" ng-style="labelStyle($item.color)">{{$item.title}}&nbsp;</span>
 			</ui-select-match>
 			<ui-select-choices
 				repeat="label in boardservice.getCurrent().labels | filter:$select.search">
-				<span class="choose-label" ng-style="{'background-color':'#{{label.color}}','color':'{{ label.color|textColorFilter }}'}">{{label.title}}</span>
+				<span class="choose-label" ng-style="labelStyle(label.color)">{{label.title}}</span>
 			</ui-select-choices>
 		</ui-select>
 	</div>