DEV Community

Louis Liu
Louis Liu

Posted on

How to Choose the Font Color Based on the Background

#webdev #css #javascript

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)

Image description

If I reverse the font color:

Image description

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.
Image description

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<sub>black</sub> is 0

    • 

  • L<sub>white</sub> is 1

    • 




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



Let's simplify the formula:

<pre>

(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

</pre>



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) =&gt; {
    if (i &lt;= 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 &gt; 0.179 ? "#000" : "#fff";
}


</code></pre></div><h2>
  <a name="example" href="#example">
  </a>
  Example
</h2>

<p>Here's an example. You can observe the font color while changing the background color.</p>

<p><iframe
  height="600"
  src="https://codepen.io/louis-7/embed/pomPXVe?height=600&default-tab=result&embed-version=2"
  scrolling="no"
  frameborder="no"
  allowtransparency="true"
  loading="lazy"
  style="width: 100%;">
</iframe>
</p>

<p>References:<br>
<a href="https://www.w3.org/TR/WCAG21/">Web Content Accessibility Guidelines (WCAG) 2.1</a><br>
<a href="https://ux.stackexchange.com/questions/114952/determine-the-best-text-color-for-a-given-background-color#:~:text=In%20your%20case%20you%20simply,on%20the%20highest%20contrast%20ratio.&amp;text='Pleasing%20to%20the%20eyes'%20is%20very%20subjective">Determine the best text color for a given background color</a><br>
<a href="https://stackoverflow.com/questions/3942878/how-to-decide-font-color-in-white-or-black-depending-on-background-color">How to decide font color in white or black depending on background color?</a></p>






    Enter fullscreen mode
    


    Exit fullscreen mode
Enter fullscreen mode Exit fullscreen mode

Top comments (5)

Collapse
 
fabiogiolito profile image
Fabio Giolito • • Edited

Soon we'll be able to do this in CSS with color-contrast.

.text-contrast {
  color: color-contrast(var(--bg-color) vs white, black);
}
Enter fullscreen mode Exit fullscreen mode

You can add any number of colors and it will pick the one with better contrast automatically.

developer.mozilla.org/en-US/docs/W...

Collapse
 
louis7 profile image
Louis Liu • • Edited

@fabiogiolito thanks for sharing this! This function is cool, it can compare colors other than black and white.

Collapse
 
lionelrowe profile image
lionel-rowe •

Omg that's incredible news! Hope implementations start cropping up soon.

Collapse
 
lionelrowe profile image
lionel-rowe • • Edited

Nice demo! Here's a version that I think is a bit more self-documenting and also rejects invalid inputs:

const HEX_COLOR_MATCHER = /^#(?<r>\p{AHex}{2})(?<g>\p{AHex}{2})(?<b>\p{AHex}{2})$/u

function relativeLuminance(srgb) {
    const [R, G, B] = srgb.map((i) => i <= 0.04045 ? i / 12.92 : ((i + 0.055) / 1.055) ** 2.4)
    return 0.2126 * R + 0.7152 * G + 0.0722 * B
}

function hexToSrgb(hex) {
    const match = hex.match(HEX_COLOR_MATCHER)
    if (!match) throw new Error('Not a valid 6-digit hex color')
    const { r, g, b } = match.groups

    return [r, g, b].map((x) => parseInt(x, 16) / 255)
}

function contrastingColor(hex) {
    return relativeLuminance(hexToSrgb(hex)) > 0.179 ? '#000000' : '#ffffff'
}
Enter fullscreen mode Exit fullscreen mode

\p{AHex} in a Unicode-aware regex matches any ASCII hex digit.

Collapse
 
louis7 profile image
Louis Liu •

@lionelrowe I was going to create a gist to provide a comprehensive function. Yours is awesome!

Read next

shanu001x profile image

Your Session has Expired !!

Shanu -

paulocappa profile image

Object-Oriented Programming (OOP): Understand the 4 Pillars with Clear Examples

Paulo Messias -

virali_vasa profile image

Troubleshooting Common Issues of React Native Firebase- Cloud Messaging

Virali Vasa -

goodylili profile image

How to Use the Sui TypeScript SDK

Ukeje Chukwuemeriwo Goodness -