diff --git a/src/components/NcColorPicker/NcColorPicker.vue b/src/components/NcColorPicker/NcColorPicker.vue
index fae041ee54..dbaea477f2 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"
@@ -386,6 +386,40 @@ 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
+		},
+
+		/**
+		 * gets the contrast color to use for the user chosen color
+		 *
+		 * @returns {string} representing the hex value to change the check color to contrast with the background color
+		 *  
+		 */
+		 contrastColor() {
+			const black = "#000000"
+			const white = "#FFFFFF"
+			return (this.calculateLuma(this.currentColor) > .5) ? black : white
+		},
 	},
 }