FM Design | Product Design, Kansas City

How's that Color Change Work?

The code itself is running through a few steps:

Generate a color for the page background
Generate a color for the on-page elements
Check that the contrast between these colors is at least 7:1 (AAA)*
If not, generate a new on-page element color until it is

*At first I was using AA (4:1) but that lead to some seriously rough color combos. AAA contrast tended to yield more visually appealing pairs more often than not.

If you want to know more, I wrote a whole thing about this.

<script>
  function getRandomColor() {
    const letters = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  }

  function calculateContrastRatio(foregroundColor, backgroundColor) {
    const getLuminance = (color) => {
      const hex = color.slice(1);
      const r = parseInt(hex.slice(0, 2, 16), 16) / 255;
      const g = parseInt(hex.slice(2, 4, 16), 16) / 255;
      const b = parseInt(hex.slice(4, 6, 16), 16) / 255;
      const sRGB = [r, g, b].map((channel) =>
        channel <= 0.03928 ? channel / 12.92 : Math.pow((channel + 0.055) / 1.055, 2.4)
      );
      return sRGB[0] * 0.2126 + sRGB[1] * 0.7152 + sRGB[2] * 0.0722;
    };

    const calculateContrast = (foreground, background) => {
      const L1 = getLuminance(foreground);
      const L2 = getLuminance(background);
      return (Math.max(L1, L2) + 0.05) / (Math.min(L1, L2) + 0.05);
    };

    return calculateContrast(foregroundColor, backgroundColor);
  }

  function generateADACompliantColors() {
    let bgColor, elementColor;
    do {
      bgColor = getRandomColor();
      elementColor = getRandomColor();
    } while (
      calculateContrastRatio(elementColor, bgColor) < 7 || // AAA for normal text
      calculateContrastRatio(elementColor, bgColor) < 4.5 || // AA for large text
      calculateContrastRatio(bgColor, elementColor) < 7 // Ensure AAA-level contrast for both combinations
    );

    // Update the background color
    document.body.style.backgroundColor = bgColor;

    // Update all on-page elements
    const elements = document.querySelectorAll("body *");
    for (let i = 0; i < elements.length; i++) {
      elements[i].style.color = elementColor;
      elements[i].style.backgroundColor = bgColor;
      elements[i].style.borderColor = elementColor;
      
      // Update the SVG fill color
const svgElement = document.querySelector(".svg-element");
if (svgElement) {
  svgElement.style.setProperty('--svgFill', elementColor);
}

    }
  }

function setTextColorSameAsBackground() {
  const elements = document.querySelectorAll(".text-same-color");
  const bgColor = getComputedStyle(document.body).backgroundColor; // Get the background color

  elements.forEach((element) => {
    element.style.color = bgColor;
  });
}

    function changeFont() {
    const fonts = ['Arial', 'Helvetica', 'Times New Roman', 'Courier New', 'Verdana', 'Georgia'];
    const randomFont = fonts[Math.floor(Math.random() * fonts.length)];
    document.body.style.fontFamily = randomFont;
  }
  
  
  //

document.addEventListener("DOMContentLoaded", function () {
  const button = document.getElementById("generateColorsButton");
  button.addEventListener("click", function () {
    generateADACompliantColors();
    setTextColorSameAsBackground(); // Call the function to set text color
  });
});

document.addEventListener("DOMContentLoaded", function () {
  const button = document.getElementById("generateColorsButtonNav");
  button.addEventListener("click", function () {
    generateADACompliantColors();
    setTextColorSameAsBackground(); // Call the function to set text color
  });
});

document.addEventListener("DOMContentLoaded", function () {
  const button = document.getElementById("generateColorsButton2");
  button.addEventListener("click", function () {
    generateADACompliantColors();
    setTextColorSameAsBackground(); // Call the function to set text color
  });
});

document.addEventListener("DOMContentLoaded", function () {
  const button = document.getElementById("generateColorsButtonNavMobile");
  button.addEventListener("click", function () {
    generateADACompliantColors();
    setTextColorSameAsBackground(); // Call the function to set text color
  });
});

document.addEventListener("DOMContentLoaded", function () {
    const button = document.getElementById("changeButton");
    button.addEventListener("click", function () {
      generateADACompliantColors();
    	setTextColorSameAsBackground(); // Call the function to set text color
      changeFont();
    });
  });

</script>

chaos

How's that Color Change Work?