Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
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 (
);
}
// 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'});
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;
}
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;
}
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;
}
});
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'
}
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'
}
whiteSmall() {
return ty.isReadable('white', this.color, { level: 'AA', size: 'small' });
}
whiteLarge() {
return ty.isReadable('white', this.color, { level: 'AA', size: 'large' });
}
let readable = possibilities.find(c => tinycolor.isReadable(c, background))
if (readable) {