Changing text colour based on 

background colour luminosity 
Tags: csharp, css, dotnet
Published: 2021-05-09 21:07:22

#####Scenario
You decide to let the users of your application set the preferred colour of an item - this could anything from a simple card to an list item on a Kanban board.  This is a straightforward feature and common enough but it can wreak havoc on any foreground text that we place over it, like what happens if our text is white and they choose a light colour ? 

Your text will have the visibility of a ghost 👻.

This isn't good. Our foreground text is gone and its because we gave the user an input in the application style, but fear not, the battle hasn't been lost yet.   

#####Le Solution
What if we could check how dark / bright the colour the user selected is ? 
We could change the colour of the foreground text dynamically to be visible. To do this we need to find the Luminosity of the background colour, which is a measure of how bright or dark a hue is. 
 
#####Code
Create a Service folder in your project and create a new class `Luminosity.cs` . Within this class we'll keep our helper methods for the task.
We need to first get the luminance of the background colour , then using this value return a colour between white and black. The Luminance will be a double  between 0 (black) and 1(white), and we'll then translate this into an RGB value.

 
```c#
using System;
using System.Collections.Generic;
using System.Drawing;
using System.Linq;
using System.Web;

namespace sampleproject.Services
{
    public static class Luminosity
    {
        public static double GetLuminosity(string colour)
        {
            //Convert html colour to Color Object
            Color color = ColorTranslator.FromHtml(colour);
            //Get the Luminancce value from the converted color.    
            double luminance = (0.299 * color.R + 0.587 * color.G + 0.114 * color.B) / 255;

            return luminance;
        }

        public static string GetColour(string colour)
        {
            double luminance = GetLuminosity(colour);
            // Translate the luminance to RGB values 
            int c = (255 - Convert.ToInt32( luminance * 255)) ;
            
            /*Add some additional contrast just in case the 
 luminance was near the 127  props to InHuOfficial for noticing. 
*/
           if (c > 127 )
            {
                c += 100;
                if (c > 255)
                {
                    c = 255;
                }
            }
            else if (c <= 127 )
            {
                c -= 100;
                if (c < 0)
                {
                    c = 0;
                }
            }
        var color =  $"rgb({c},{c},{c})";

            return color;
        }

      
    }
}
```
#####Razor View
Now within the Razor View we can use the helper method to change the value of the foreground text. 
```c#
@using sampleproject.Services;
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}


<div class="card-container">
    @foreach (var item in Model)
    {
        var style = "";
        style = "background-color:" + item.Primarycolor + ";color:"+Luminosity.GetColour(item.Primarycolor)+";"; 

        <div class="card" style="@style">
        .....card content
       </div>
}
</div>
```

#####The Result 
With the above code we should get a result roughly like the below.  
The colour of the foreground text should always be on the opposite end of the scale to the background text. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ewmc8lu6ydx7pzv1m2e9.png)

And if you're feeling generous you can buy me a coffee with the link below ( and yes its all for coffee,  I drink a copius amount of it while writing ☕ )  


[![Buy Me A Coffee](https://cdn.buymeacoffee.com/buttons/default-black.png)](https://www.buymeacoffee.com/SUKaQp9)


######Credits
<small>Cover Photo by <a href="https://unsplash.com/@ruvimnogaphoto?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Ruvim Noga</a> on <a href="https://unsplash.com/license?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
  </small>