Luminance calculator with 8-digit hexadecimal or RGBa colors

Question

I am calculating the contrast of a website and finding errors. But when I have rgba or Eight-digit hex notation I don't know how calculate the Luminance.

I calculate the hexadecimal luminance with this definition:

---

https://contrastchecker.online/color-relative-luminance-calculator

Relative luminance is the relative brightness of any point in a colorspace, normalized to 0 for darkest black and 1 for lightest white. For the sRGB colorspace, the relative luminance of a color is defined as L = 0.2126 * R + 0.7152 * G + 0.0722 * B where R, G and B are defined as:

if RsRGB \<= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB+0.055)/1.055) ^ 2.4
if GsRGB \<= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB+0.055)/1.055) ^ 2.4
if BsRGB \<= 0.03928 then B = BsRGB/12.92 else B = ((BsRGB+0.055)/1.055) ^ 2.4

and RsRGB, GsRGB, and BsRGB are defined as:

RsRGB = R8bit/255
GsRGB = G8bit/255
BsRGB = B8bit/255

Answer 1

WCAG uses the luminance formula as well, but as you said, it's for 6-digit RGB values.

There are formulas for calculating a color given an opacity. The simple formula is if the color is on a white background.

newColor = 255 - opacity * (255 - RGB)

You apply this to each RGB value separately. For example, if the color is #ABC123 (kind of a light olive color)

and you want to apply 0.5 opacity, the separate RGB values are:

• 0xAB (171)
• 0xC1 (193)
• 0x23 (35)

The new values are:

• 255 - 0.5(255 - 171) = 213 = 0xD5
• 255 - 0.5(255 - 193) = 224 = 0xE0
• 255 - 0.5(255 - 35) = 145 = 0x91

So the new color is #D5E091

and you can plug that RGB value into your luminance formula.

You could combine the opacity formula with the luminance formula to have one formula.

To calculate the new RGB value for opacity on a different background color other than white, it's a bit messier. I'll hold off on that in case this solution works.

Answer 2

Short Answer:

If the alpha-bits are less than #ff, then you can't, not directly. You first must composite all transparent colors with the colors underneath them, using the standard alpha channel math, defined in CSS.

Longer Answer

If you have a transparent color, How can you know what the luminance will be if you do not know the color(s) under the transparent color?

You can't!

If you have transparent colors, it is first necessary to composite them (mix them together) into the final color, before calculating luminance.

From 0 to 1

If something is 100% transparent, then it is also 0% opaque, and something 100% opaque is 0% transparent. CSS describes transparency in terms of opacity, where 1.0 is fully opaque and 0.0 is fully transparent.

Therefore, an alpha hex value of #ff is equal to 1.0, and #80 is 0.5

Simple alpha compositing

The formula for simple alpha compositing is:

// Simplest alpha composite math

comp = rgbBg x (1 - αFg)  +  rgbFg x αFg

Where

comp: the pixel value after compositing

rgbFg: each separate R, G, and B value of the foreground color

αFg: the alpha value of the foreground color

rgbBg: each separate R, G, and B value of the background color

Notes:

1. We assume starting with a background that is fully opaque.
2. All values are within the range 0.0 and 1.0 inclusive.
3. Each R, G and B channel is processed independently.
4. This is using the simple "over" operator, though there are other transfer modes, "over" would be the expected form for this use case.
5. To be accurate, you need to calculate all the transparent layers, starting first with a fully opaque layer, and then calculating the succeeding transparencies.