How Can You Programmatically Change Font Colour Primarily based on the Background? (Mild/Darkish Mode)

In case you’ve visited Martech Zone currently, you could have seen that we now supply the power to view the location in both gentle or darkish mode. Simply seek for the moon or solar icon subsequent to the date within the prime left navigation bar on the location.

It’s a reasonably cool function and it really works very well. After I launched a brand new conversion device to change HEX to RGB, I wished to really show the colour that the consumer was attempting to calculate. I not solely show the colour, however I additionally added a pleasant function that displayed the title of the colour. However that launched a problem…

If the swatch that displayed the colour had a light-weight background, you wouldn’t have the ability to learn the textual content that I generate dynamically for the swatch. So… I needed to create a operate that set the font colour based mostly on background colour and whether or not or not there was sufficient distinction to view the font.

JavaScript Perform For Mild or Darkish Mode

I wanted to create a operate the place I might cross the hex code for the colour, then return whether or not the font must be white or black based mostly on the distinction. This Javascript operate did the trick…

operate distinction(hex) {
  var threshold = 149;
  let r = 0, g = 0, b = 0;

  // 3 digits
  if (hex.size == 4) {
    r = "0x" + hex[1] + hex[1];
    g = "0x" + hex[2] + hex[2];
    b = "0x" + hex[3] + hex[3];
  // 6 digits
  } else if (hex.size == 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 brink on this operate is used to find out whether or not a selected colour is gentle or darkish. The operate converts the given hexadecimal colour code to its crimson, inexperienced, and blue (RGB) parts, then makes use of a formulation to calculate the perceived brightness of the colour. If the brightness is above the brink, the operate returns #000000, which is the hex code for black. If the brightness is beneath the brink, the operate returns #ffffff, which is the hex code for white.

The aim of this threshold is to make sure that the textual content colour chosen for the given background colour has sufficient distinction to be simply readable. A standard rule of thumb is that gentle textual content (e.g. white or yellow) must be used on a darkish background, and darkish textual content (e.g. black or blue) must be used on a light-weight background. Through the use of a threshold to find out whether or not a colour is gentle or darkish, the operate can routinely select the suitable textual content colour for a given background colour.

Utilizing the above operate, I can programmatically apply the font-color CSS based mostly on the background colour. Take a look at out the converter and also you’ll see how properly it really works!