How to use the chroma-js.contrast function in chroma-js

To help you get started, we’ve selected a few chroma-js examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github influxdata / clockface / src / Components / Tabs / Tab.tsx View on Github external
const textColor = (): InfluxColors => {
      const darkContrast = chroma.contrast(
        `${backgroundColor}`,
        InfluxColors.Kevlar
      )
      const lightContrast = chroma.contrast(
        `${backgroundColor}`,
        InfluxColors.White
      )

      if (darkContrast > lightContrast) {
        return InfluxColors.Kevlar
      }
      return InfluxColors.White
    }
github Automattic / color-studio / docs / source / javascripts / example-marketing / example-colors-dark.js View on Github external
function formatContrastRatio(title, foreground, background) {
  const colorContrast = contrast(foreground, background)
  const contrastIcon = colorContrast >= 4.5 ? '✅' : '🔴'

  return `${contrastIcon} ${title} (${floor(colorContrast, 2)})`
}
github jxnblk / colorable-app / src / utils.js View on Github external
export const getContrast = (a, b) => chroma.contrast(hslToHex(a), hslToHex(b))
github influxdata / clockface / src / Components / Label / Label.tsx View on Github external
private get textColor(): string {
    const {color} = this.props

    const darkContrast = chroma.contrast(color, InfluxColors.Kevlar)
    const lightContrast = chroma.contrast(color, InfluxColors.White)

    if (darkContrast > lightContrast) {
      return InfluxColors.Kevlar
    } else {
      return InfluxColors.White
    }
  }
}
github influxdata / clockface / src / Types / Types.stories.tsx View on Github external
const colorCardClassName = (hexcode: string): string => {
      const lightContrast = chroma.contrast(InfluxColors.White, hexcode)
      const darkContrast = chroma.contrast(InfluxColors.Obsidian, hexcode)
      const cardTextColor =
        lightContrast >= darkContrast ? 'light-text' : 'dark-text'

      return `colors-grid--card ${cardTextColor}`
    }
github CoreyGinnivan / whocanuse / src / components / table / vision-row.js View on Github external
simulatedForeground = blinder
        .achromatomaly(`#${foreground}`)
        .replace("#", "");
      simulatedBackground = blinder
        .achromatomaly(`#${background}`)
        .replace("#", "");
    }
    if (simType === "achromatopsia") {
      simulatedForeground = blinder
        .achromatopsia(`#${foreground}`)
        .replace("#", "");
      simulatedBackground = blinder
        .achromatopsia(`#${background}`)
        .replace("#", "");
    }
    const contrast = chroma.contrast(simulatedForeground, simulatedBackground);

    const fontSizeNum = Number(fontSize);
    const modifiedContrast = contrast + contrast * contrastModifier;

    let { wcagGrade } = getWcagScore(fontSizeNum, bold, modifiedContrast);
    const pass = wcagGrade !== "FAIL";

    return (
      
        
          
            {percent}
            <span style="{{">%</span>
github cosmicjs / vue-music-website / components / Album.vue View on Github external
style2 () {
      if (this.album.color) {
        const bg = this.album.color
        const white = chroma.contrast(bg, 'white')
        const black = chroma.contrast(bg, 'black')
        return {
          backgroundColor: bg,
          color: white > black ? '#ffffff' : '#000000'
        }
      } else {
        return this.style
      }
    },
    releaseDate () {
github jxnblk / hello-color / src / index.js View on Github external
const getColor = (base, {
  multiplier,
  lightness,
  saturation,
}) =&gt; {
  const neg = negate(base)
  if (multiplier === 1) {
    return neg
  }

  const isDark = chroma.contrast(neg, '#000') &lt; chroma.contrast(neg, '#fff')
  const isDull = chroma(neg).hsl()[1] &lt; .5

  return chroma(neg)
    .saturate(isDull ? multiplier * saturation : 0)
    .desaturate(isDull ? 0 : multiplier * saturation)
    .darken(isDark ? 0 : multiplier * lightness)
    .brighten(isDark ? multiplier * lightness : 0)
    .hex()
}
github JedWatson / react-select / docs / examples / StyledSingle.js View on Github external
option: (styles, { data, isDisabled, isFocused, isSelected }) => {
    const color = chroma(data.color);
    return {
      ...styles,
      backgroundColor: isDisabled
        ? null
        : isSelected
        ? data.color
        : isFocused
        ? color.alpha(0.1).css()
        : null,
      color: isDisabled
        ? '#ccc'
        : isSelected
        ? chroma.contrast(color, 'white') > 2
          ? 'white'
          : 'black'
        : data.color,
      cursor: isDisabled ? 'not-allowed' : 'default',
    };
  },
  input: styles => ({ ...styles, ...dot() }),