How to use the tinycolor2.readability 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.
apinf / platform / apinf_packages / core / client / custom_stylesheet / custom_stylesheet.js View on Github 
backgroundColor = branding.colors.primary;
}
if (branding && branding.colors && branding.colors.primaryText) {
// Get text color
textColor = branding.colors.primaryText;
}
if (backgroundColor && textColor) {
// Lighten and darken the background color, for contrast comparison
const lighterBackground = tinycolor(backgroundColor).lighten();
const darkerBackground = tinycolor(backgroundColor).darken();
// Get readability values for each combination of background/text color
lighterBackgroundReadability = tinycolor.readability(lighterBackground, textColor);
darkerBackgroundReadability = tinycolor.readability(darkerBackground, textColor);
// Select darker or lighter background based on best readability
if (lighterBackgroundReadability > darkerBackgroundReadability) {
// lighter background is most readable
mostReadableBackground = lighterBackground;
} else {
// darker background is most readable
mostReadableBackground = darkerBackground;
}
}
return mostReadableBackground;
},
primaryColor () {// Get background color
backgroundColor = branding.colors.primary;
}
if (branding && branding.colors && branding.colors.primaryText) {
// Get text color
textColor = branding.colors.primaryText;
}
if (backgroundColor && textColor) {
// Lighten and darken the background color, for contrast comparison
const lighterBackground = tinycolor(backgroundColor).lighten();
const darkerBackground = tinycolor(backgroundColor).darken();
// Get readability values for each combination of background/text color
lighterBackgroundReadability = tinycolor.readability(lighterBackground, textColor);
darkerBackgroundReadability = tinycolor.readability(darkerBackground, textColor);
// Select darker or lighter background based on best readability
if (lighterBackgroundReadability > darkerBackgroundReadability) {
// lighter background is most readable
mostReadableBackground = lighterBackground;
} else {
// darker background is most readable
mostReadableBackground = darkerBackground;
}
}
return mostReadableBackground;
},
primaryColor () {return palette.map((item) => {
const c = item.color;
const hueRgbStr = `rgb(${c.r},${c.g},${c.b})`;
const rLight = tinycolor2.readability(hueRgbStr, `rgb(${lightText})`);
const rDark = tinycolor2.readability(hueRgbStr, `rgb(${darkText})`);
const contrastStr = (rLight > rDark)
? lightText
: darkText;
const sLight = contrastStr.split(',').map(v => +v);
const cco = {r: sLight[0], g: sLight[1], b: sLight[2], a: 1};
return {
...item,
contrast: {
...cco,
str: `rgb(${cco.r},${cco.g},${cco.b})`
},
};
});
}return palette.map((item) => {
const c = item.color;
const hueRgbStr = `rgb(${c.r},${c.g},${c.b})`;
const rLight = tinycolor2.readability(hueRgbStr, `rgb(${lightText})`);
const rDark = tinycolor2.readability(hueRgbStr, `rgb(${darkText})`);
const contrastStr = (rLight > rDark)
? lightText
: darkText;
const sLight = contrastStr.split(',').map(v => +v);
const cco = {r: sLight[0], g: sLight[1], b: sLight[2], a: 1};
return {
...item,
contrast: {
...cco,
str: `rgb(${cco.r},${cco.g},${cco.b})`
},
};
});
}if(showY) {
var hLinePoint = closestPoints.hLinePoint;
var hLinePointX, hLinePointY;
xa = hLinePoint && hLinePoint.xa;
ya = hLinePoint && hLinePoint.ya;
var ySnap = ya.spikesnap;
if(ySnap === 'cursor') {
hLinePointX = evt.pointerX;
hLinePointY = evt.pointerY;
} else {
hLinePointX = xa._offset + hLinePoint.x;
hLinePointY = ya._offset + hLinePoint.y;
}
var dfltHLineColor = tinycolor.readability(hLinePoint.color, contrastColor) < 1.5 ?
Color.contrast(contrastColor) : hLinePoint.color;
var yMode = ya.spikemode;
var yThickness = ya.spikethickness;
var yColor = ya.spikecolor || dfltHLineColor;
var xEdge = Axes.getPxPosition(gd, ya);
var xBase, xEndSpike;
if(yMode.indexOf('toaxis') !== -1 || yMode.indexOf('across') !== -1) {
if(yMode.indexOf('toaxis') !== -1) {
xBase = xEdge;
xEndSpike = hLinePointX;
}
if(yMode.indexOf('across') !== -1) {
var xAcross0 = ya._counterDomainMin;
var xAcross1 = ya._counterDomainMax;
if(ya.anchor === 'free') {.filter(function(color) {
const ratio = tinycolor.readability(color, comparisonColor);
if (ratio < minValidRatio && ratio >= WCAG_AA) {
a11yColor = color;
minValidRatio = ratio;
}
});if(showX) {
var vLinePoint = closestPoints.vLinePoint;
var vLinePointX, vLinePointY;
xa = vLinePoint && vLinePoint.xa;
ya = vLinePoint && vLinePoint.ya;
var xSnap = xa.spikesnap;
if(xSnap === 'cursor') {
vLinePointX = evt.pointerX;
vLinePointY = evt.pointerY;
} else {
vLinePointX = xa._offset + vLinePoint.x;
vLinePointY = ya._offset + vLinePoint.y;
}
var dfltVLineColor = tinycolor.readability(vLinePoint.color, contrastColor) < 1.5 ?
Color.contrast(contrastColor) : vLinePoint.color;
var xMode = xa.spikemode;
var xThickness = xa.spikethickness;
var xColor = xa.spikecolor || dfltVLineColor;
var yEdge = Axes.getPxPosition(gd, xa);
var yBase, yEndSpike;
if(xMode.indexOf('toaxis') !== -1 || xMode.indexOf('across') !== -1) {
if(xMode.indexOf('toaxis') !== -1) {
yBase = yEdge;
yEndSpike = vLinePointY;
}
if(xMode.indexOf('across') !== -1) {
var yAcross0 = xa._counterDomainMin;
var yAcross1 = xa._counterDomainMax;
if(xa.anchor === 'free') {const shadesWithRatios = [...Array(shadeCount).keys()].map(index => {
const shade = tinycolor({ h, s, l: index * shadeValue });
return {
contrast: tinycolor.readability(shade, background),
hex: formatHex(shade),
};
});export function getReadabilityRatio(backgroundColor = '', foregroundColor = '') {
return tinycolor.readability(tinycolor(backgroundColor), tinycolor(foregroundColor));
}
