0

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
gog
  • 10,367
  • 2
  • 24
  • 38
Jenny Fer
  • 21
  • 1
  • What exactly is your question? Why can't you do it as described? – mkrieger1 Mar 21 '23 at 21:51
  • When I have a color with Eight-digit hex notation I have two more numbers. For example, this number #000000 is black but if I add number 91(#00000091) it is now transparent, so the color is now not black, now it is kind of gray. So with two more numbers I can't use this formula – Jenny Fer Mar 21 '23 at 22:09

1 Answers1

0

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)

enter image description here

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

enter image description here

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.

slugolicious
  • 15,824
  • 2
  • 29
  • 43