replace hsl's l with relative luminance for better lightness detection

This commit is contained in:
Henry Jameson 2020-01-12 17:58:26 +02:00
parent 88f83fc9fa
commit 39dd08e694
4 changed files with 10 additions and 12 deletions

View file

@ -1,4 +1,4 @@
import { invertLightness, convert, contrastRatio } from 'chromatism'
import { invertLightness, contrastRatio } from 'chromatism'
// useful for visualizing color when debugging
export const consoleColor = (color) => console.log('%c##########', 'background: ' + color + '; color: ' + color)
@ -185,8 +185,8 @@ export const rgba2css = function (rgba) {
* @param {Boolean} preserve - try to preserve intended text color's hue/saturation (i.e. no BW)
*/
export const getTextColor = function (bg, text, preserve) {
const bgIsLight = convert(bg).hsl.l > 50
const textIsLight = convert(text).hsl.l > 50
const bgIsLight = relativeLuminance(bg) > 0.5
const textIsLight = relativeLuminance(text) > 0.5
if ((bgIsLight && textIsLight) || (!bgIsLight && !textIsLight)) {
const base = typeof text.a !== 'undefined' ? { a: text.a } : {}