How to use the @ctrl/tinycolor.isReadable function in @ctrl/tinycolor
To help you get started, we’ve selected a few @ctrl/tinycolor 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.
GoogleChromeLabs / ProjectVisBug / app / features / accessibility.js View on Github 
const determineColorContrast = el => {
// question: how to know if the current node is actually a black background?
// question: is there an api for composited values?
const foreground = el instanceof SVGElement
? (getStyle(el, 'fill') || getStyle(el, 'stroke'))
: getStyle(el, 'color')
const textSize = getWCAG2TextSize(el)
let background = getComputedBackgroundColor(el)
const [ aa_contrast, aaa_contrast ] = [
isReadable(background, foreground, { level: "AA", size: textSize.toLowerCase() }),
isReadable(background, foreground, { level: "AAA", size: textSize.toLowerCase() })
]
return foreground === background
? `🤷♂️ foreground matches background`
: `
<span>Color contrast</span>
<span value="">
<span style="background-color:${background};
color:${foreground};">${Math.floor(readability(background, foreground) * 100) / 100}</span>
</span>
<span>› AA ${textSize}</span>
<span style="${aa_contrast ? 'color:green;' : 'color:red'}" value="">${aa_contrast ? '✓' : '×'}</span>
<span>› AAA ${textSize}</span>
<span style="${aaa_contrast ? 'color:green;' : 'color:red'}" value="">${aaa_contrast ? '✓' : '×'}</span>const determineColorContrast = el => {
// question: how to know if the current node is actually a black background?
// question: is there an api for composited values?
const foreground = el instanceof SVGElement
? (getStyle(el, 'fill') || getStyle(el, 'stroke'))
: getStyle(el, 'color')
const textSize = getWCAG2TextSize(el)
let background = getComputedBackgroundColor(el)
const [ aa_contrast, aaa_contrast ] = [
isReadable(background, foreground, { level: "AA", size: textSize.toLowerCase() }),
isReadable(background, foreground, { level: "AAA", size: textSize.toLowerCase() })
]
return foreground === background
? `🤷♂️ foreground matches background`
: `
<span>Color contrast</span>
<span value="">
<span style="background-color:${background};
color:${foreground};">${Math.floor(readability(background, foreground) * 100) / 100}</span>
</span>
<span>› AA ${textSize}</span>
<span style="${aa_contrast ? 'color:green;' : 'color:red'}" value="">${aa_contrast ? '✓' : '×'}</span>
<span>› AAA ${textSize}</span>@ctrl/tinycolor
Fast, small color manipulation and conversion for JavaScript
