Get text color for given background color

By Vivek Kumar Bansal on October 18th, 2017

For a side project, I needed a way to determine, whether to use a dark font or light font, based on the background-color, which is configurable by the user. After googling for a while, I found a perfect solution (for my use case at least).

If luminance of background-color is less than 0.5, use light font else use dark font. Luminance of a given RGB value can be calculated using the following function:

/**
 * red   number HEX value between 0 and 255 scaled to 0 and 1
 * green number HEX value between 0 and 255 scaled to 0 and 1
 * blue  number HEX value between 0 and 255 scaled to 0 and 1
 */
function getLuminance (red, green, blue) {
    const luminance = 1 - ( 0.299 * red + 0.587 * green + 0.114 * blue);

    return luminance;
}

This utility function is also available as a part of Polished library, and can handle hex values too. Will Bamford has a CodePen demonstrating the same.