danhollick

let foregroundColor
let backgoundColor
// ...
// inside selection listener
  const fills = selection.map(node => node.fills[0])
  foregroundColor = getRGB(fills[0].color)
  backgoundColor = getRGB(fills[1].color)
  const contrast = calculateContrast(
    foregroundColor,
    backgoundColor

danhollick

function getRGB({ r, g, b }) {
  const rgbColorArray = [r, g, b].map(channel => Math.round(channel * 255))
  return rgbColorArray
}

danhollick

function sendContrastInfo(contrast, foreground, background) {
  figma.ui.postMessage({
    type: 'selectionChange',
    foreground: convertRgbToHex(foreground),
    background: convertRgbToHex(background),
    contrast,
    scores: getContrastScores(contrast),
  })
}

danhollick

function getContrastScores(contrast) {
  let largeText
  let normalText
  switch (true) {
    case contrast > 7:
      largeText = 'AAA'
      normalText = 'AAA'
      break
    case contrast > 4.5:
      largeText = 'AAA'

danhollick

function sendContrastInfo(contrast, foregroundColor, backgroundColor) {
  figma.ui.postMessage({
    type: 'selectionChange',
    foreground: convertRgbToHex(foregroundColor),
    background: convertRgbToHex(backgroundColor),
    contrast,
  })
}

danhollick

function convertRgbToHex(color) {
  const { r, g, b } = color
  const hex = [r, g, b]
    .map(col => {
      const hexColor = normalizedColor.toString(16)
      return `0${hexColor}`.slice(-2)
    })
    .join('')
  return `#${hex}`
}

danhollick

function calculateContrast(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
  }
  // round to two decimal places
  contrast = Math.floor(contrast * 100) / 100
  return contrast

danhollick

function calculateLuminance(color) {
  const normalizedColor = color.map(channel => channel / 255)
  const gammaCorrectedRGB = normalizedColor.map(channel =>
    channel <= 0.03928
      ? channel / 12.92
      : Math.pow((channel + 0.055) / 1.055, 2.4)
  )
  const luminance =
    gammaCorrectedRGB[0] * 0.2126 +
    gammaCorrectedRGB[1] * 0.7152 +

danhollick

<script>
window.onmessage = async event => {
  const message = event.data.pluginMessage
  console.log(message)
}
</script>

danhollick

figma.on('selectionchange', () => {
  if (figma.currentPage.selection.length > 1) {
    const selection = figma.currentPage.selection.filter(
      node => node.fills.length > 0 && node.fills[0].type === 'SOLID'
    )
    const fills = selection.map(node => node.fills[0])
    const contrast = calculateContrast(fills[0].color, fills[1].color)
    sendContrastInfo(contrast, fills[0].color, fills[1].color)
  }
}