danhollick

function changeText(id, text) {
  const element = document.getElementById(id)
  element.textContent = text
  return element
}

danhollick

figma.on('selectionchange', () => {
  if (figma.currentPage.selection.length > 1) {
    // assigning values from selection
    calculateAndSendContrast(foregroundColor, foregroundAlpha, backgoundColor)
  }
})
figma.ui.onmessage = msg => {
  if (msg.type === 'swap') {
    // swapping variable values
      calculateAndSendContrast(foregroundColor, foregroundAlpha, backgoundColor)

danhollick

function calculateAndSendContrast(foreground, alpha, backgound) {
// ...
  let contrast = foregroundLuminance / backgroundLuminance
  if (backgroundLuminance > foregroundLuminance) {
    contrast = 1 / contrast
  }
  contrast = Math.floor(contrast * 100) / 100
  return sendContrastInfo(contrast, foreground, backgound)
}

danhollick

//..
let foregroundAlpha
let backgroundAlpha
//...
  if (msg.type === 'swap') {
    if (figma.currentPage.selection.length > 1) {
      ;[foregroundColor, backgoundColor, foregroundAlpha, backgroundAlpha] = [
        backgoundColor,
        foregroundColor,
        backgroundAlpha,

danhollick

figma.ui.onmessage = msg => {
  if (msg.type === 'swap') {
      console.log(msg)
    }
  }
}

danhollick

// ...
<button id="swap"></button>
<script>
window.onmessage = async event => {
 //...
}
document.getElementById('swap').onclick = () => {
  parent.postMessage({ pluginMessage: { type: 'swap' } }, '*')
}
</script>

danhollick

<div id="background">
  <h3 id="foreground">The quick brown fox</h3>
</div>
<h2 id="contrast"> </h2>
<script>
window.onmessage = async event => {
  const message = event.data.pluginMessage
  console.log(message)
  if (message.type === 'selectionChange') {
    const background = document.getElementById('background')

danhollick

let foregroundColor
let foregroundAlpha
//...
// selecton listener
  foregroundColor = getRGB(fills[0].color)
  foregroundAlpha = fills[0].opacity
  backgoundColor = getRGB(fills[1].color)
  const contrast = calculateContrast(
      foregroundColor,
      foregroundAlpha,

danhollick

function calculateContrast(foreground, alpha, backgound) {
  if (alpha < 1) {
    foreground = overlay(foreground, alpha, backgound)
  }
  const foregroundLuminance = calculateLuminance(foreground) + 0.05
  const backgroundLuminance = calculateLuminance(backgound) + 0.05
  let contrast = foregroundLuminance / backgroundLuminance
  if (backgroundLuminance > foregroundLuminance) {
    contrast = 1 / contrast
  }

danhollick

function overlay(foreground, alpha, backgound) {
  const overlaid = foreground.map((channel, i) =>
    Math.round(channel * alpha + backgound[i] * (1 - alpha))
  )
  return overlaid
}