diff --git a/src/components/NcColorPicker/NcColorPicker.vue b/src/components/NcColorPicker/NcColorPicker.vue
index fae041ee54..5aa9df5215 100644
--- a/src/components/NcColorPicker/NcColorPicker.vue
+++ b/src/components/NcColorPicker/NcColorPicker.vue
@@ -173,7 +173,7 @@ export default {
 						:style="{ backgroundColor: color }"
 						class="color-picker__simple-color-circle"
 						:class="{ 'color-picker__simple-color-circle--active' : color === currentColor }">
-						<Check v-if="color === currentColor" :size="20" />
+						<Check v-if="color === currentColor" :size="20" :fill-color="contrastColor" />
 						<input type="radio"
 							class="hidden-visually"
 							:aria-label="name"
@@ -323,6 +323,11 @@ export default {
 		uid() {
 			return GenRandomId()
 		},
+		contrastColor() {
+			const black = '#000000'
+			const white = '#FFFFFF'
+			return (this.calculateLuma(this.currentColor) > 0.5) ? black : white
+		},
 	},
 
 	watch: {
@@ -386,6 +391,28 @@ export default {
 			this.$emit('input', color)
 
 		},
+
+		/**
+		 * Calculate luminance of provided hex color
+		 *
+		 * @param {string} color the hex color
+		 */
+		 calculateLuma(color) {
+			const [red, green, blue] = this.hexToRGB(color)
+			return (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255
+		},
+
+		/**
+		 * Convert hex color to RGB
+		 *
+		 * @param {string} hex the hex color
+		 */
+		 hexToRGB(hex) {
+			const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+			return result
+				? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)]
+				: null
+		},
 	},
 }