How to Choose the Font Color Based on the Background

Question

In the web browser, the font color is set to black by default. Have you ever thought about why? It's not rocket science, just because of the background and the text has high contrast so you can tell apart the text and the background.

When the background is white, you use the black font and when it's black you choose the opposite. But what if the background is not black and white but other colors? (Suppose we only have the black and white font in this world )

The text on these buttons looks harmonious, right? (I take them from the Bootstrap document)

If I reverse the font color:

You still can see the text on most of the buttons but the contrast becomes lower.

Here's another example. On the dark blue background, the white font is easier to read. However, the black font is a better choice on the water blue background.

As a software engineer, I always implement the UI based on the design, I barely think about how the designer chooses the font color until a question comes up in my mind. What if I want to display a text on the background that will change its color dynamically? Like, on Monday it's white but on Tuesday it changes to blue.

How do you choose the font color?

We can choose font color based on the background luminance. According to the contrast ratio formula given by W3C Recommendation:

contrast ratio = (L1 + 0.05) / (L2 + 0.05)

• L1 is the relative luminance of the lighter of the colors, and
• L2 is the relative luminance of the darker of the colors
• L_black is 0
• L_white is 1

I will use L to represent the luminance of the background color. Now, we can say if (L + 0.05) / (Lblack + 0.05) > (Lwhite + 0.05) / (L + 0.05) we can use black(#000000) as the font color. Otherwise, use white(#ffffff).

Let's simplify the formula:

(L + 0.05) / (0.0 + 0.05) > (1.0 + 0.05) / (L + 0.05) 

(L + 0.05)<sup>2</sup> > (1.05 * 0.05)

(L + 0.05) > √(1.05 * 0.05)

L > √(1.05 * 0.05) - 0.05

L > 0.179

We only need to calculate the L. The formula to calculate the relative luminance is given by W3C Recommendation.

// suppose background color in hexadecimal formart: #ff00ee
function textColorBasedOnBackground(backgroundColor) {
  backgroundColor = backgroundColor.substring(1);
  const r = parseInt(backgroundColor.substring(0,2), 16); // 0 ~ 255
  const g = parseInt(backgroundColor.substring(2,4), 16);
  const b = parseInt(backgroundColor.substring(4,6), 16);

  const srgb = [r / 255, g / 255, b / 255];
  const x = srgb.map((i) => {
    if (i <= 0.04045) {
      return i / 12.92;
    } else {
      return Math.pow((i + 0.055) / 1.055, 2.4);
    }
  });

  const L = 0.2126 * x[0] + 0.7152 * x[1] + 0.0722 * x[2];
  return L > 0.179 ? "#000" : "#fff";
}

Example

Here's an example. You can observe the font color while changing the background color. You can also get the code from Gist.

References:

1. Web Content Accessibility Guidelines (WCAG)
   2.1
2. Determine the best text color for a given background
   color
3. How to decide font color in white or black depending on background
   color?