Skip to content

Commit

Permalink
enh(aria): changed check color to adhere to 3:1 ratio
Browse files Browse the repository at this point in the history
Signed-off-by: Eduardo Morales <emoral435@gmail.com>
  • Loading branch information
emoral435 committed Dec 14, 2023
1 parent d0a4f5b commit be16c8a
Showing 1 changed file with 35 additions and 1 deletion.
36 changes: 35 additions & 1 deletion src/components/NcColorPicker/NcColorPicker.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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
*
* @return {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) > 0.5) ? black : white
},
},
}
Expand Down

0 comments on commit be16c8a

Please sign in to comment.