How to use the tinycolor2.isReadable function in tinycolor2

To help you get started, we’ve selected a few tinycolor2 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 WordPress / gutenberg / packages / block-editor / src / components / contrast-checker / index.js View on Github external
function ContrastChecker( {
	backgroundColor,
	fallbackBackgroundColor,
	fallbackTextColor,
	fontSize, // font size value in pixels
	isLargeText,
	textColor,
} ) {
	if ( ! ( backgroundColor || fallbackBackgroundColor ) || ! ( textColor || fallbackTextColor ) ) {
		return null;
	}
	const tinyBackgroundColor = tinycolor( backgroundColor || fallbackBackgroundColor );
	const tinyTextColor = tinycolor( textColor || fallbackTextColor );
	const hasTransparency = tinyBackgroundColor.getAlpha() !== 1 || tinyTextColor.getAlpha() !== 1;

	if ( hasTransparency || tinycolor.isReadable(
		tinyBackgroundColor,
		tinyTextColor,
		{ level: 'AA', size: ( isLargeText || ( isLargeText !== false && fontSize >= 24 ) ? 'large' : 'small' ) }
	) ) {
		return null;
	}

	return (
		
	);
}
github corygibbons / iromi / packages / iromi / helpers / decideDirection.js View on Github external
// prevent us from an infinite loop
  let safety = 0;

  // take an educated guess and try to cut down on iterations
  if (color.isDark()) {

      while (!readable && safety < options.maxIterations) {
        colorText = colorText.lighten(options.increment);
        readable = tinycolor.isReadable(colorText, colorBackground, {level: 'AAA', size: 'small'});
        safety++;
      }
      if (!readable) {
        safety = 0;
        while (!readable && safety < options.maxIterations) {
          colorText = colorText.darken(options.increment);
          readable = tinycolor.isReadable(colorText, colorBackground, {level: 'AAA', size: 'small'});
          safety++;
        }
      }

  } else {

    while (!readable && safety < options.maxIterations) {
      colorText = colorText.darken(options.increment);
      readable = tinycolor.isReadable(colorText, colorBackground, {level: 'AAA', size: 'small'});
      safety++;
    }
    if (!readable) {
      safety = 0;
      while (!readable && safety < options.maxIterations) {
        colorText = colorText.lighten(options.increment);
        readable = tinycolor.isReadable(colorText, colorBackground, {level: 'AAA', size: 'small'});
github corygibbons / iromi / packages / iromi / helpers / meetCompliance.js View on Github external
const meetCompliance = function (color, level, size, direction) {

  const colorBackground = color.clone();
  let safety = 0;
  let readable = tinycolor.isReadable(color, colorBackground, {level: level, size: size});

  // check if we have a direction to go in
  if (direction != 'light' || direction != 'dark') {
    direction = colorBackground.isDark() ? 'light' : 'dark';
  }

  while (!readable && safety < options.maxIterations) {
    color = direction == 'light' ? color.lighten(options.increment) : color.darken(options.increment);
    readable = tinycolor.isReadable(color, colorBackground, {level: level, size: size});
    safety++;
  }

  color.direction = direction;
  return color;

}
github corygibbons / iromi / packages / iromi / helpers / meetCompliance.js View on Github external
const meetCompliance = function (color, level, size, direction) {

  const colorBackground = color.clone();
  let safety = 0;
  let readable = tinycolor.isReadable(color, colorBackground, {level: level, size: size});

  // check if we have a direction to go in
  if (direction != 'light' || direction != 'dark') {
    direction = colorBackground.isDark() ? 'light' : 'dark';
  }

  while (!readable && safety < options.maxIterations) {
    color = direction == 'light' ? color.lighten(options.increment) : color.darken(options.increment);
    readable = tinycolor.isReadable(color, colorBackground, {level: level, size: size});
    safety++;
  }

  color.direction = direction;
  return color;

}
github mozilla / FirefoxColor / src / lib / generators.js View on Github external
const createA11yColor = (testColor, comparisonColor) => {
  // Just return if A11y already
  if (tinycolor.isReadable(testColor, comparisonColor)) return testColor;

  let a11yColor = null;
  let minValidRatio = MAX_CONTRAST_RATIO;

  // Otherwise, create an array of colors with the same hue as the test color
  // and get the one closest to, but above the WCAG_AA Limit
  tinycolor(testColor)
    .monochromatic()
    .filter(function(color) {
      const ratio = tinycolor.readability(color, comparisonColor);
      if (ratio < minValidRatio && ratio >= WCAG_AA) {
        a11yColor = color;
        minValidRatio = ratio;
      }
    });
github corygibbons / iromi / packages / iromi / helpers / decideDirection.js View on Github external
safety++;
        }
      }

  } else {

    while (!readable && safety < options.maxIterations) {
      colorText = colorText.darken(options.increment);
      readable = tinycolor.isReadable(colorText, colorBackground, {level: 'AAA', size: 'small'});
      safety++;
    }
    if (!readable) {
      safety = 0;
      while (!readable && safety < options.maxIterations) {
        colorText = colorText.lighten(options.increment);
        readable = tinycolor.isReadable(colorText, colorBackground, {level: 'AAA', size: 'small'});
        safety++;
      }
    }

  }

  return colorText.isDark() ? 'dark' : 'light'
}
github corygibbons / iromi / packages / iromi / helpers / decideDirection.js View on Github external
safety++;
      }
      if (!readable) {
        safety = 0;
        while (!readable && safety < options.maxIterations) {
          colorText = colorText.darken(options.increment);
          readable = tinycolor.isReadable(colorText, colorBackground, {level: 'AAA', size: 'small'});
          safety++;
        }
      }

  } else {

    while (!readable && safety < options.maxIterations) {
      colorText = colorText.darken(options.increment);
      readable = tinycolor.isReadable(colorText, colorBackground, {level: 'AAA', size: 'small'});
      safety++;
    }
    if (!readable) {
      safety = 0;
      while (!readable && safety < options.maxIterations) {
        colorText = colorText.lighten(options.increment);
        readable = tinycolor.isReadable(colorText, colorBackground, {level: 'AAA', size: 'small'});
        safety++;
      }
    }

  }

  return colorText.isDark() ? 'dark' : 'light'
}
github LekoArts / gatsby-remark-design-system / src / Specimens / Color.js View on Github external
whiteSmall() {
    return ty.isReadable('white', this.color, { level: 'AA', size: 'small' });
  }
github LekoArts / gatsby-remark-design-system / src / Specimens / Color.js View on Github external
whiteLarge() {
    return ty.isReadable('white', this.color, { level: 'AA', size: 'large' });
  }
github StoDevX / AAO-React-Native / modules / colors / util.js View on Github external
	let readable = possibilities.find(c => tinycolor.isReadable(c, background))
	if (readable) {