How Can You Programmatically Change Font Color Based on the Background? (Light/Dark Mode)

If you’ve visited Martech Zone lately, you may have noticed that we now offer the ability to view the site in either light or dark mode. Just search for the moon or sun icon next to the date in the top left navigation bar on the site.

It’s a pretty cool feature and it works really well. When I launched a new conversion tool to change HEX to RGB, I wanted to actually display the color that the user was trying to calculate. I not only display the color, but I also added a nice feature that displayed the name of the color. But that introduced an issue…

If the swatch that displayed the color had a light background, you wouldn’t be able to read the text that I generate dynamically for the swatch. So… I had to create a function that set the font color based on background color and whether or not there was enough contrast to view the font.

JavaScript Function For Light or Dark Mode

I needed to create a function where I could pass the hex code for the color, then return whether the font should be white or black based on the contrast. This JavaScript function did the trick…

function contrast(hex) {
  var threshold = 149;
  let r = 0, g = 0, b = 0;

  // 3 digits
  if (hex.length == 4) {
    r = "0x" + hex[1] + hex[1];
    g = "0x" + hex[2] + hex[2];
    b = "0x" + hex[3] + hex[3];
  // 6 digits
  } else if (hex.length == 7) {
    r = "0x" + hex[1] + hex[2];
    g = "0x" + hex[3] + hex[4];
    b = "0x" + hex[5] + hex[6];
  }
  return ((r*0.299 + g*0.587 + b*0.114) > threshold) ? '#000000' : '#ffffff';
}

The threshold in this function is used to determine whether a particular color is light or dark. The function converts the given hexadecimal color code to its red, green, and blue (RGB) components, then uses a formula to calculate the perceived brightness of the color. If the brightness is above the threshold, the function returns #000000, which is the hex code for black. If the brightness is below the threshold, the function returns #ffffff, which is the hex code for white.

The purpose of this threshold is to ensure that the text color chosen for the given background color has enough contrast to be easily readable. A common rule of thumb is that light text (e.g. white or yellow) should be used on a dark background, and dark text (e.g. black or blue) should be used on a light background. By using a threshold to determine whether a color is light or dark, the function can automatically choose the appropriate text color for a given background color.

Using the above function, I can programmatically apply the font-color CSS based on the background color. Test out the converter and you’ll see how well it works!