diff --git a/src/styles/components/kanban.scss b/src/styles/components/kanban.scss
index ca342890..2bbf5bda 100644
--- a/src/styles/components/kanban.scss
+++ b/src/styles/components/kanban.scss
@@ -60,15 +60,6 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 8px';
           border-width: 2px;
         }
 
-        .color {
-          width: 4px;
-          height: 24px;
-          display: block;
-          float: left;
-          border-radius: 0 2px 2px 0;
-          margin-left: -.5em;
-        }
-
         h3 {
           font-family: $family-sans-serif;
           font-size: .85rem;
@@ -81,6 +72,7 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 8px';
 
           .icon {
             margin-right: 2px;
+            margin-left: 5px;
           }
 
           &.overdue {
@@ -163,6 +155,26 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 8px';
         span {
           width: auto;
         }
+
+        &.has-light-text {
+          color: $white;
+
+          .task-id {
+            color: $grey-lighter;
+          }
+
+          .footer .icon,
+          .due-date,
+          .priority-label {
+            background: darken($task-background, 80%);
+          }
+
+          .footer {
+            .icon svg {
+              fill: $white;
+            }
+          }
+        }
       }
 
       .drop-preview {
diff --git a/src/views/list/views/Kanban.vue b/src/views/list/views/Kanban.vue
index cdf09395..67e37738 100644
--- a/src/views/list/views/Kanban.vue
+++ b/src/views/list/views/Kanban.vue
@@ -47,14 +47,11 @@
 								tag="div"
 								:class="{
 							'is-loading': taskService.loading && taskUpdating[task.id],
-							'draggable': !taskService.loading || !taskUpdating[task.id]
+							'draggable': !taskService.loading || !taskUpdating[task.id],
+							'has-light-text': !colorIsDark(task.hexColor) && task.hexColor !== `#${task.defaultColor}`,
 						}"
+								:style="{'background-color': task.hexColor !== '#' && task.hexColor !== `#${task.defaultColor}` ? task.hexColor : false}"
 						>
-							<span
-									class="color"
-									:style="{ 'background-color': task.hexColor }"
-									v-if="task.hexColor !== '#' + task.defaultColor">
-							</span>
 							<span class="task-id">
 								<span class="is-done" v-if="task.done">Done</span>
 								<template v-if="task.identifier === ''">